最近正在拜读<<Ajax in Action>>这本书运用书中知识结写了这篇 处理xmlHttp发送异步请求的文章
我们要达到的目的是点击按钮获得服务器的当前时间aspx的html如下
<%@PageLanguage=C#AutoEventWireup=trueCodeBehind=DefaultaspxcsInherits=LinkeduWebWebWWWDefault%>
<!DOCTYPEhtmlPUBLIC//WC//DTDXHTMLTransitional//ENtransitionaldtd>
<htmlxmlns=>
<headrunat=server>
<title>测试</title>
<scriptlanguage=javascriptsrc=javascript/prototype/extrasarrayjs></script>
<scriptlanguage=javascriptsrc=javascript/xmlHttpjs></script>
<scriptlanguage=javascriptsrc=javascript/eventRouterjs></script>
<scriptlanguage=javascriptsrc=Defaultjs></script>
<scriptlanguage=javascript>
</script>
</head>
<body>
<formid=formrunat=server>
用Post方式获得服务器的当前时间
<inputid=btnTestPosttype=buttonvalue=Post/>
用Get方式获得服务器的当前时间
<inputid=btnTestGettype=buttonvalue=Get/>
<divid=divResult></div>
</form>
</body>
</html>
要用javascript 发送xmlHttp 请求必须解决的问题是跨浏览器的支持我们把xmlHttp的发送封装在一个javascript对象中同时在这个对象中解决了跨浏览器支持的问题代码如下
/*
urlloadingobjectandarequestqueuebuiltontopofit
*/
/**//*namespacingobject*/
varnet=newObject();
netREADY_STATE_UNINITIALIZED=;
netREADY_STATE_LOADING=;
netREADY_STATE_LOADED=;
netREADY_STATE_INTERACTIVE=;
netREADY_STATE_COMPLETE=;
/**//*contentloaderobjectforcrossbrowserrequests*/
netxmlHttp=function(urlonloadparamsmethodcontentTypeonerror){
thisreq=null;
thisonload=onload;
thisonerror=(onerror)?onerror:thisdefaultError;
if(typeof(method)==undefined||method==null)
{
method=POST;
}
thisloadXMLDoc(urlparamsmethodcontentType);
}
netxmlHttpprototypeloadXMLDoc=function(urlparamsmethodcontentType){
if(!method){
method=GET;
}
if(!contentType&&method==POST){
contentType=application/xwwwformurlencoded;
}
if(windowXmlHttpRequest){
thisreq=newXmlHttpRequest();
}elseif(windowActiveXObject){
thisreq=newActiveXObject(MicrosoftxmlHttp);
}
if(thisreq){
try{
varloader=this;
thisreqonreadystatechange=function(){
netxmlHttponReadyStatecall(loader);
}
thisreqopen(methodurltrue);
if(contentType){
thisreqsetRequestHeader(ContentTypecontentType);
}
thisreqsend(params);
}catch(err){
thisonerrorcall(this);
}
}
}
netxmlHttponReadyState=function(){
varreq=thisreq;
varready=reqreadyState;
if(ready==netREADY_STATE_COMPLETE){
var;
if(httpStatus==||httpStatus==){
thisonloadcall(this);
}else{
thisonerrorcall(this);
}
}
}
netxmlHttpprototypedefaultError=function(){
alert(errorfetchingdata!
+\n\nreadyState:+thisreqreadyState
+\nstatus:+thisreqstatus
+\nheaders:+thisreqgetAllResponseHeaders());
}
下面开始写发送xmlHttp请求的代码
//全局xmlHttp对象
varcobj;
/**//*Postbegin*/
//绑定Post发送xmlHttp事件到btnTestPost
functionloadTestPost()
{
variobj=documentgetElementById(btnTestPost);
//btnTestPost按钮监听的绑定
varclickRouter=newjsEventEventRouter(iobjonclick);
clickRouteraddListener(btnTestPostClick);
}
functionbtnTestPostClick()
{//open参数urlonloadparamsmethodcontentTypeonerror
cobj=newnetxmlHttp(DefaultHandlerashxdealResult<T/>POST);
}
/**//*Postend*/
/**//*Getbegin*/
//绑定Get发送xmlHttp事件到btnTestGet
functionloadTestGet()
{
variobj=documentgetElementById(btnTestGet);
//btnTestGet按钮监听的绑定
varclickRouter=newjsEventEventRouter(iobjonclick);
clickRouteraddListener(btnTestGetClick);
}
functionbtnTestGetClick()
{//open参数urlonloadparamsmethodcontentTypeonerror
cobj=newnetxmlHttp(DefaultHandlerashx?T=dealResultnullGET);
}
/**//*Getend*/
functiondealResult()
{
vardobj=documentgetElementById(divResult);
dobjinnerHTML=cobjreqresponseXMLtext;
}
windowonload=function()
{
//绑定Post发送xmlHttp事件到btnTestPost
loadTestPost();
//绑定Get发送xmlHttp事件到btnTestGet
loadTestGet();
};
最后处理xmlHttp的代码
spublicclassDefaultHandler:IHttpHandler
{
protectedXmlDocument_xmlResult;
publicvoidProcessRequest(HttpContextcontext)
{
if(contextRequest[T]!=null)
{//GETxmlhttp测试
contextResponseContentType=text/xml;
XmlDocumentxmlDoc=newXmlDocument();
xmlDocLoadXml(stringFormat(@<time>GET:{}</time>SystemDateTimeNow));
xmlDocSave(contextResponseOutputStream);
contextResponseEnd();
}
else
{//POSTxmlhttp测试
contextResponseContentType=text/xml;
XmlDocumentxmlDoc=newXmlDocument();
xmlDocLoad(contextRequestInputStream);
if(xmlDocDocumentElementName==T)
{
xmlDocLoadXml(stringFormat(@<time>POST:{}</time>SystemDateTimeNow));
xmlDocSave(contextResponseOutputStream);
contextResponseEnd();
}
}
}
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
