轻松掌握XMLHttpRequest对象XmlHttp是什么?
最通用的定义为:XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。 1var xmlHttp;
2function createXMLHttpRequest() 3{ 4 if(window.ActiveXObject) 5 { 6 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 7 } 8 else if(window.XMLHttpRequest) 9 { 10 xmlHttp = new XMLHttpRequest(); 11 } 12} 2.定义发送请求的方法 1//处理方法
2function AddNumber() 3{ 4 createXMLHttpRequest(); 5 var url= "AddHandler.ashx?num1="+document.getElementById("num1").value+"&num2="+document.getElementById("num2").value; 6 xmlHttp.open("GET",url,true); 7 xmlHttp.onreadystatechange=ShowResult; 8 xmlHttp.send(null); 9} 3.定义回调函数,用于处理服务端返回的信息 1//回调方法
在上面这个实例中,是在客户端想服务端的AddHandler.ashx发送的请求,并传递两个参数(也就是待相加的数)过去,下面我门来看看服务端是怎么处理接收传递过去的两个参数以及怎么实现加法运算并返回结果到客户端的.代码如下:2function ShowResult() 3{ 4 if(xmlHttp.readyState==4) 5 { 6 if(xmlHttp.status==200) 7 { 8 document.getElementById("sum").value=xmlHttp.responseText; 9 } 10 } 11} <%@ WebHandler Language="C#" Class="Handler" %>
using System; using System.Web; using System.Data; using System.Data.SqlClient; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; int a = Convert.ToInt32(context.Request.QueryString["num1"]); int b = Convert.ToInt32(context.Request.QueryString["num2"]); int result = a + b; context.Response.Write(result); } public bool IsReusable { get { return false; } } } 现在我门就可以调用AddNumber()这个方法向服务端发送请求来做一个无刷新的加法运算了. <div style="text-align: center">
运行结果如下:<br />无刷新求和示例<br /> <br /> <input id="num1" style="width: 107px" type="text" onkeyup="AddNumber();" value="0" /> +<input id="num2" style="width: 95px" type="text" onkeyup="AddNumber();" value="0" /> =<input id="sum" style="width: 97px" type="text" /></div> 这个实例虽然很简单.我之所以用这个实例主要是给大家介绍XmlHttp对象的处理过程.文章后面我把项目文件提供下载. ------------------------------------------------------------------------------------------------------------ 上面把JS写到页面中了,在实际的项目开发中是不推荐这样做的,最好把JS代码都定义到一个JS文件类.我这里有一份XmlHttpRequest对象的JS(网上下载的),把相关的方法基本都写全了.下面我门来看看怎么使用这个外部JS文件来发送异步请求及响应. 我门先来看看这个JS文件的详细定义: 1function CallBackObject()
2{ 3 this.XmlHttp = this.GetHttpObject(); 4} 5 6CallBackObject.prototype.GetHttpObject = function() 7{ 8 var xmlhttp; 9 if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { 10 try { 11 xmlhttp = new XMLHttpRequest(); 12 } catch (e) { 13 xmlhttp = false; 14 } 15 } 16 return xmlhttp; 17} 18 19CallBackObject.prototype.DoCallBack = function(URL) 20{ 21 if( this.XmlHttp ) 22 { 23 if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 ) 24 { 25 var oThis = this; 26 this.XmlHttp.open('POST', URL); 27 this.XmlHttp.onreadystatechange = function(){ oThis.ReadyStateChange(); }; 28 this.XmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 29 this.XmlHttp.send(null); 30 } 31 } 32} 33 34CallBackObject.prototype.AbortCallBack = function() 35{ 36 if( this.XmlHttp ) 37 this.XmlHttp.abort(); 38} 39 40CallBackObject.prototype.OnLoading = function() 41{ 42 // Loading 43} 44 45CallBackObject.prototype.OnLoaded = function() 46{ 47 // Loaded 48} 49 50CallBackObject.prototype.OnInteractive = function() 51{ 52 // Interactive 53} 54 55CallBackObject.prototype.OnComplete = function(responseText, responseXml) 56{ 57 // Complete 58} 59 60CallBackObject.prototype.OnAbort = function() 61{ 62 // Abort 63} 64 65CallBackObject.prototype.OnError = function(status, statusText) 66{ 67 // Error 68} 69 70CallBackObject.prototype.ReadyStateChange = function() 71{ 72 if( this.XmlHttp.readyState == 1 ) 73 { 74 this.OnLoading(); 75 } 76 else if( this.XmlHttp.readyState == 2 ) 77 { 78 this.OnLoaded(); 79 } 80 else if( this.XmlHttp.readyState == 3 ) 81 { 82 this.OnInteractive(); 83 } 84 else if( this.XmlHttp.readyState == 4 ) 85 { 86 if( this.XmlHttp.status == 0 ) 87 this.OnAbort(); 88 else if( this.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK" ) 89 this.OnComplete(this.XmlHttp.responseText, this.XmlHttp.responseXML); 90 else 91 this.OnError(this.XmlHttp.status, this.XmlHttp.statusText, this.XmlHttp.responseText); 92 } 93} 94 一个简单的Hello实例: <html xmlns="http://www./1999/xhtml" >
<head runat="server"> <title>HelloWorld实例</title> <script language="jscript" src="CallBackObject.js"></script> <script language=jscript> function createRequest() { var name = escape(document.getElementById("name").value); var cbo = new CallBackObject(); cbo.OnComplete = Cbo_Complete; cbo.onError = Cbo_Error; cbo.DoCallBack("HelloWorldServer.aspx?name=" + name); } function Cbo_Complete(responseText, responseXML) { alert(responseText); } function Cbo_Error(status, statusText, responseText) { alert(responseText); } </script> </head> <body> <form id="form1" runat="server"> <DIV style="DISPLAY: inline; FONT-WEIGHT: bold; FONT-SIZE: 30px; FONT-FAMILY: Arial, Verdana" ms_positioning="FlowLayout">Hello, Ajax!</DIV> <HR width="100%" SIZE="1"> <input type="text" id="name"> <br> <input type="button" value="发送请求" onclick="javascript:createRequest()"> </form> </body> </html> 关于XmlHttpRequest对象就介绍到这里,更多更详细的内容请大家查看相关资料. 欢迎拍砖指正,不甚感激! 本文实例源代码下载 评论:
#1楼[楼主]
2008-03-29 15:52 | Bēniaǒ
补上Hello实例的服务器端代码:
protected void Page_Load(object sender, EventArgs e) { string strName = HttpContext.Current.Request.QueryString["name"]; string strRes = "服务器返回的响应信息:\r\n" + "Hello, " + strName + "!"; HttpContext.Current.Response.Clear(); HttpContext.Current.Response.Write(strRes); HttpContext.Current.Response.Flush(); HttpContext.Current.Response.End(); }
#8楼[楼主]
2008-05-16 01:36 | Bēniaǒ @成长的强强
汗 轻松掌握XMLHttpRequest对象XmlHttp是什么?
最通用的定义为:XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。 1var xmlHttp;
2function createXMLHttpRequest() 3{ 4 if(window.ActiveXObject) 5 { 6 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 7 } 8 else if(window.XMLHttpRequest) 9 { 10 xmlHttp = new XMLHttpRequest(); 11 } 12} 2.定义发送请求的方法 1//处理方法
2function AddNumber() 3{ 4 createXMLHttpRequest(); 5 var url= "AddHandler.ashx?num1="+document.getElementById("num1").value+"&num2="+document.getElementById("num2").value; 6 xmlHttp.open("GET",url,true); 7 xmlHttp.onreadystatechange=ShowResult; 8 xmlHttp.send(null); 9} 3.定义回调函数,用于处理服务端返回的信息 1//回调方法
在上面这个实例中,是在客户端想服务端的AddHandler.ashx发送的请求,并传递两个参数(也就是待相加的数)过去,下面我门来看看服务端是怎么处理接收传递过去的两个参数以及怎么实现加法运算并返回结果到客户端的.代码如下:2function ShowResult() 3{ 4 if(xmlHttp.readyState==4) 5 { 6 if(xmlHttp.status==200) 7 { 8 document.getElementById("sum").value=xmlHttp.responseText; 9 } 10 } 11} <%@ WebHandler Language="C#" Class="Handler" %>
using System; using System.Web; using System.Data; using System.Data.SqlClient; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; int a = Convert.ToInt32(context.Request.QueryString["num1"]); int b = Convert.ToInt32(context.Request.QueryString["num2"]); int result = a + b; context.Response.Write(result); } public bool IsReusable { get { return false; } } } 现在我门就可以调用AddNumber()这个方法向服务端发送请求来做一个无刷新的加法运算了. <div style="text-align: center">
运行结果如下:<br />无刷新求和示例<br /> <br /> <input id="num1" style="width: 107px" type="text" onkeyup="AddNumber();" value="0" /> +<input id="num2" style="width: 95px" type="text" onkeyup="AddNumber();" value="0" /> =<input id="sum" style="width: 97px" type="text" /></div> 这个实例虽然很简单.我之所以用这个实例主要是给大家介绍XmlHttp对象的处理过程.文章后面我把项目文件提供下载. ------------------------------------------------------------------------------------------------------------ 上面把JS写到页面中了,在实际的项目开发中是不推荐这样做的,最好把JS代码都定义到一个JS文件类.我这里有一份XmlHttpRequest对象的JS(网上下载的),把相关的方法基本都写全了.下面我门来看看怎么使用这个外部JS文件来发送异步请求及响应. 我门先来看看这个JS文件的详细定义: 1function CallBackObject()
2{ 3 this.XmlHttp = this.GetHttpObject(); 4} 5 6CallBackObject.prototype.GetHttpObject = function() 7{ 8 var xmlhttp; 9 if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { 10 try { 11 xmlhttp = new XMLHttpRequest(); 12 } catch (e) { 13 xmlhttp = false; 14 } 15 } 16 return xmlhttp; 17} 18 19CallBackObject.prototype.DoCallBack = function(URL) 20{ 21 if( this.XmlHttp ) 22 { 23 if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 ) 24 { 25 var oThis = this; 26 this.XmlHttp.open('POST', URL); 27 this.XmlHttp.onreadystatechange = function(){ oThis.ReadyStateChange(); }; 28 this.XmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 29 this.XmlHttp.send(null); 30 } 31 } 32} 33 34CallBackObject.prototype.AbortCallBack = function() 35{ 36 if( this.XmlHttp ) 37 this.XmlHttp.abort(); 38} 39 40CallBackObject.prototype.OnLoading = function() 41{ 42 // Loading 43} 44 45CallBackObject.prototype.OnLoaded = function() 46{ 47 // Loaded 48} 49 50CallBackObject.prototype.OnInteractive = function() 51{ 52 // Interactive 53} 54 55CallBackObject.prototype.OnComplete = function(responseText, responseXml) 56{ 57 // Complete 58} 59 60CallBackObject.prototype.OnAbort = function() 61{ 62 // Abort 63} 64 65CallBackObject.prototype.OnError = function(status, statusText) 66{ 67 // Error 68} 69 70CallBackObject.prototype.ReadyStateChange = function() 71{ 72 if( this.XmlHttp.readyState == 1 ) 73 { 74 this.OnLoading(); 75 } 76 else if( this.XmlHttp.readyState == 2 ) 77 { 78 this.OnLoaded(); 79 } 80 else if( this.XmlHttp.readyState == 3 ) 81 { 82 this.OnInteractive(); 83 } 84 else if( this.XmlHttp.readyState == 4 ) 85 { 86 if( this.XmlHttp.status == 0 ) 87 this.OnAbort(); 88 else if( this.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK" ) 89 this.OnComplete(this.XmlHttp.responseText, this.XmlHttp.responseXML); 90 else 91 this.OnError(this.XmlHttp.status, this.XmlHttp.statusText, this.XmlHttp.responseText); 92 } 93} 94 一个简单的Hello实例: <html xmlns="http://www./1999/xhtml" >
<head runat="server"> <title>HelloWorld实例</title> <script language="jscript" src="CallBackObject.js"></script> <script language=jscript> function createRequest() { var name = escape(document.getElementById("name").value); var cbo = new CallBackObject(); cbo.OnComplete = Cbo_Complete; cbo.onError = Cbo_Error; cbo.DoCallBack("HelloWorldServer.aspx?name=" + name); } function Cbo_Complete(responseText, responseXML) { alert(responseText); } function Cbo_Error(status, statusText, responseText) { alert(responseText); } </script> </head> <body> <form id="form1" runat="server"> <DIV style="DISPLAY: inline; FONT-WEIGHT: bold; FONT-SIZE: 30px; FONT-FAMILY: Arial, Verdana" ms_positioning="FlowLayout">Hello, Ajax!</DIV> <HR width="100%" SIZE="1"> <input type="text" id="name"> <br> <input type="button" value="发送请求" onclick="javascript:createRequest()"> </form> </body> </html> 关于XmlHttpRequest对象就介绍到这里,更多更详细的内容请大家查看相关资料. 欢迎拍砖指正,不甚感激! 本文实例源代码下载 评论:
#1楼[楼主]
2008-03-29 15:52 | Bēniaǒ
补上Hello实例的服务器端代码:
protected void Page_Load(object sender, EventArgs e) { string strName = HttpContext.Current.Request.QueryString["name"]; string strRes = "服务器返回的响应信息:\r\n" + "Hello, " + strName + "!"; HttpContext.Current.Response.Clear(); HttpContext.Current.Response.Write(strRes); HttpContext.Current.Response.Flush(); HttpContext.Current.Response.End(); } |
|
来自: 百眼通 > 《06网站类编程-116》