至顶网›软件频道 ›用.Net处理xmlHttp发送异步请求

用.Net处理xmlHttp发送异步请求

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

本文是作者在阅读《Ajax in Action》这本书时，运用书中知识，结合使用的.net，写了这篇用.net 处理xmlHttp发送异步请求的文章。并附有实现步骤和详细源代码。

作者：中国IT实验室来源：中国IT实验室 2007年9月9日

最近正在拜读《Ajax in Action》这本书，运用书中知识，结合.net，写了这篇用.net 处理xmlHttp发送异步请求的文章。

我们要达到的目的是点击按钮，获得服务器的当前时间，aspx的html如下：

Html 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
Inherits="Linkedu.Web.WebWWW.Default" %> 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 



<html xmlns="http://www.w3.org/1999/xhtml" > 

<head runat="server"> 

<title>测试</title> 

<script language="javascript" src="javascript/prototype/extras-array.js"></script> 

<script language="javascript" src="javascript/xmlHttp.js"></script> 

<script language="javascript" src="javascript/eventRouter.js"></script> 

<script language="javascript" src="Default.js"></script> 

<script language="javascript"> 



</script> 

</head> 

<body> 

<form id="form1" 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对象中，同时在这个对象中解决了跨浏览器支持的问题。代码如下：

xmlHttp对象 


/**//* 

url-loading object and a request queue built on top of it 

*/ 



/**//* namespacing object */ 

var net=new Object(); 



net.READY_STATE_UNINITIALIZED=0; 

net.READY_STATE_LOADING=1; 

net.READY_STATE_LOADED=2; 

net.READY_STATE_INTERACTIVE=3; 

net.READY_STATE_COMPLETE=4;    



/**//*--- content loader object for cross-browser requests ---*/ 

net.xmlHttp=function(url, onload, params, method, contentType, onerror){ 

this.req=null; 

this.onload=onload; 

this.onerror=(onerror) ? onerror : this.defaultError; 

if(typeof(method) == "undefined" || method == null) 

{ 

method = "POST"; 

} 

this.loadXMLDoc(url, params, method, contentType); 

} 



net.xmlHttp.prototype.loadXMLDoc=function(url, params, method, contentType){ 

if (!method){ 

method="GET"; 

} 

if (!contentType && method=="POST"){ 

contentType='application/x-www-form-urlencoded'; 

} 

if (window.XmlHttpRequest){ 

this.req=new XmlHttpRequest(); 

} else if (window.ActiveXObject){ 

this.req=new ActiveXObject("Microsoft.xmlHttp"); 

} 

if (this.req){ 

try{ 

var loader=this; 

this.req.onreadystatechange=function(){ 

net.xmlHttp.onReadyState.call(loader); 

} 

this.req.open(method,url,true); 

if (contentType){ 

this.req.setRequestHeader('Content-Type', contentType); 

} 

this.req.send(params); 

}catch (err){ 

this.onerror.call(this); 

} 

} 

}    



net.xmlHttp.onReadyState=function(){ 

var req=this.req; 

var ready=req.readyState; 

if (ready==net.READY_STATE_COMPLETE){ 

var httpStatus=req.status; 

if (httpStatus==200 || httpStatus==0){ 

this.onload.call(this); 

}else{ 

this.onerror.call(this); 

} 

} 

} 



net.xmlHttp.prototype.defaultError=function(){ 

alert("error fetching data!" 

+"\n\nreadyState:"+this.req.readyState 

+"\nstatus: "+this.req.status 

+"\nheaders: "+this.req.getAllResponseHeaders()); 

}

下面开始写发送xmlHttp请求的代码：

default.js 

//全局xmlHttp对象 

var cobj; 



/**//* Post begin*/ 

//绑定Post发送xmlHttp事件到btnTestPost 

function loadTestPost() 

{ 

var iobj = document.getElementById("btnTestPost"); 

//btnTestPost按钮监听的绑定 

var clickRouter=new jsEvent.EventRouter(iobj,"onclick"); 

clickRouter.addListener(btnTestPostClick); 

} 

function btnTestPostClick() 

{ // open参数 url, onload, params, method, contentType, onerror 

cobj = new net.xmlHttp("DefaultHandler.ashx",dealResult, "<T/>", "POST"); 

} 

/**//* Post end*/ 





/**//* Get begin*/ 

//绑定Get发送xmlHttp事件到btnTestGet 

function loadTestGet() 

{ 

var iobj = document.getElementById("btnTestGet"); 

//btnTestGet按钮监听的绑定 

var clickRouter=new jsEvent.EventRouter(iobj,"onclick"); 

clickRouter.addListener(btnTestGetClick); 

} 

function btnTestGetClick() 

{ // open参数 url, onload, params, method, contentType, onerror 

cobj = new net.xmlHttp("DefaultHandler.ashx?T=1",dealResult, null, "GET"); 

} 

/**//* Get end*/ 







function dealResult() 

{ 

var dobj = document.getElementById("divResult"); 

dobj.innerHTML = cobj.req.responseXML.text; 

} 





window.onload = function() 

{ 

//绑定Post发送xmlHttp事件到btnTestPost 

loadTestPost(); 

//绑定Get发送xmlHttp事件到btnTestGet 

loadTestGet(); 

};

最后是.net处理xmlHttp的代码：

.net 处理xmlHttp请求 


public class DefaultHandler : IHttpHandler 

{ 

protected XmlDocument _xmlResult; 



public void ProcessRequest(HttpContext context) 

{ 

if (context.Request["T"] != null) 

{//GET xmlhttp测试 

context.Response.ContentType = "text/xml"; 

XmlDocument xmlDoc = new XmlDocument(); 

xmlDoc.LoadXml(string.Format(@"<time>GET:{0}</time>", System.DateTime.Now)); 

xmlDoc.Save(context.Response.OutputStream); 

context.Response.End(); 

} 

else 

{//POST xmlhttp测试 

context.Response.ContentType = "text/xml"; 

XmlDocument xmlDoc = new XmlDocument(); 

xmlDoc.Load(context.Request.InputStream); 

if (xmlDoc.DocumentElement.Name == "T") 

{ 

xmlDoc.LoadXml(string.Format(@"<time>POST:{0}</time>", System.DateTime.Now)); 

xmlDoc.Save(context.Response.OutputStream); 

context.Response.End(); 

} 

} 

} 



public bool IsReusable 

{ 

get 

{ 

return false; 

} 

} 

}

查看本文来源

用ICallbackEventHandler实现客户端与服务器端异步

VIP专区

VIP用户

普通用户

邮件订阅

如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。

重磅专题

往期文章

用.Net处理xmlHttp发送异步请求

业界热点: