最近正在拜讀<<Ajax in Action>>這本書運用書中知識結寫了這篇 處理xmlHttp發送異步請求的文章
我們要達到的目的是點擊按鈕獲得服務器的當前時間aspx的html如下
<%@ Page Language=C# AutoEventWireup=true CodeBehind=Defaultaspxcs Inherits=LinkeduWebWebWWWDefault %>
<!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd>
<html xmlns= >
<head runat=server>
<title>測試</title>
<script language=javascript src=javascript/prototype/extrasarrayjs></script>
<script language=javascript src=javascript/xmlHttpjs></script>
<script language=javascript src=javascript/eventRouterjs></script>
<script language=javascript src=Defaultjs></script>
<script language=javascript>
</script>
</head>
<body>
<form id=form runat=server>
用Post方式獲得服務器的當前時間
<input id=btnTestPost type=button value=Post />
用Get方式獲得服務器的當前時間
<input id=btnTestGet type=button value=Get />
<div id=divResult></div>
</form>
</body>
</html>
要用javascript 發送xmlHttp 請求必須解決的問題是跨浏覽器的支持我們把xmlHttp的發送封裝在一個javascript對象中同時在這個對象中解決了跨浏覽器支持的問題代碼如下
/*
urlloading object and a request queue built on top of it
*/
/**//* namespacing object */
var net=new Object();
netREADY_STATE_UNINITIALIZED=;
netREADY_STATE_LOADING=;
netREADY_STATE_LOADED=;
netREADY_STATE_INTERACTIVE=;
netREADY_STATE_COMPLETE=;
/**//* content loader object for crossbrowser requests */
netxmlHttp=function(url onload params method contentType onerror){
thisreq=null;
thisonload=onload;
thisonerror=(onerror) ? onerror : thisdefaultError;
if(typeof(method) == undefined || method == null)
{
method = POST;
}
thisloadXMLDoc(url params method contentType);
}
netxmlHttpprototypeloadXMLDoc=function(url params method contentType){
if (!method){
method=GET;
}
if (!contentType && method==POST){
contentType=application/xwwwformurlencoded;
}
if (windowXmlHttpRequest){
thisreq=new XmlHttpRequest();
} else if (windowActiveXObject){
thisreq=new ActiveXObject(MicrosoftxmlHttp);
}
if (thisreq){
try{
var loader=this;
thisreqonreadystatechange=function(){
netxmlHttponReadyStatecall(loader);
}
thisreqopen(methodurltrue);
if (contentType){
thisreqsetRequestHeader(ContentType contentType);
}
thisreqsend(params);
}catch (err){
thisonerrorcall(this);
}
}
}
netxmlHttponReadyState=function(){
var req=thisreq;
var ready=reqreadyState;
if (ready==netREADY_STATE_COMPLETE){
var ;
if (httpStatus== || httpStatus==){
thisonloadcall(this);
}else{
thisonerrorcall(this);
}
}
}
netxmlHttpprototypedefaultError=function(){
alert(error fetching data!
+\n\nreadyState:+thisreqreadyState
+\nstatus: +thisreqstatus
+\nheaders: +thisreqgetAllResponseHeaders());
}
下面開始寫發送xmlHttp請求的代碼
//全局xmlHttp對象
var cobj;
/**//* Post begin*/
//綁定Post發送xmlHttp事件到btnTestPost
function loadTestPost()
{
var iobj = documentgetElementById(btnTestPost);
//btnTestPost按鈕監聽的綁定
var clickRouter=new jsEventEventRouter(iobjonclick);
clickRouteraddListener(btnTestPostClick);
}
function btnTestPostClick()
{ // open參數 url onload params method contentType onerror
cobj = new netxmlHttp(DefaultHandlerashxdealResult <T/> POST);
}
/**//* Post end*/
/**//* Get begin*/
//綁定Get發送xmlHttp事件到btnTestGet
function loadTestGet()
{
var iobj = documentgetElementById(btnTestGet);
//btnTestGet按鈕監聽的綁定
var clickRouter=new jsEventEventRouter(iobjonclick);
clickRouteraddListener(btnTestGetClick);
}
function btnTestGetClick()
{ // open參數 url onload params method contentType onerror
cobj = new netxmlHttp(DefaultHandlerashx?T=dealResult null GET);
}
/**//* Get end*/
function dealResult()
{
var dobj = documentgetElementById(divResult);
dobjinnerHTML = cobjreqresponseXMLtext;
}
windowonload = function()
{
//綁定Post發送xmlHttp事件到btnTestPost
loadTestPost();
//綁定Get發送xmlHttp事件到btnTestGet
loadTestGet();
};
最後處理xmlHttp的代碼
spublic class DefaultHandler : IHttpHandler
{
protected XmlDocument _xmlResult;
public void ProcessRequest(HttpContext context)
{
if (contextRequest[T] != null)
{//GET xmlhttp測試
contextResponseContentType = text/xml;
XmlDocument xmlDoc = new XmlDocument();
xmlDocLoadXml(stringFormat(@<time>GET:{}</time> SystemDateTimeNow));
xmlDocSave(contextResponseOutputStream);
contextResponseEnd();
}
else
{//POST xmlhttp測試
contextResponseContentType = text/xml;
XmlDocument xmlDoc = new XmlDocument();
xmlDocLoad(contextRequestInputStream);
if (xmlDocDocumentElementName == T)
{
xmlDocLoadXml(stringFormat(@<time>POST:{}</time> SystemDateTimeNow));
xmlDocSave(contextResponseOutputStream);
contextResponseEnd();
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
From:http://tw.wingwit.com/Article/program/net/201311/12276.html
