XmlHttp是什么？
最通用的定義為：XmlHttp是一套可以在Javascript、VbScript、Jscript等腳本語(yǔ)言中通過http協(xié)議傳送或從接收XML及其他數(shù)據(jù)的一套API。XmlHttp最大的用處是可以更新網(wǎng)頁(yè)的部分內(nèi)容而不需要刷新整個(gè)頁(yè)面。
來自MSDN的解釋：XmlHttp提供客戶端同http服務(wù)器通訊的協(xié)議?？蛻舳丝梢酝ㄟ^XmlHttp對(duì)象(MSXML2.XMLHTTP.3.0)向http服務(wù)器發(fā)送請(qǐng)求并使用微軟XML文檔對(duì)象模型Microsoft? XML Document Object Model (DOM)處理回應(yīng)。 現(xiàn)在的絕對(duì)多數(shù)瀏覽器都增加了對(duì)XmlHttp的支持，IE中使用ActiveXObject方式創(chuàng)建XmlHttp對(duì)象，其他瀏覽器如：Firefox、Opera等通過window.XMLHttpRequest來創(chuàng)建xmlhttp對(duì)象。
XmlHttp對(duì)象的屬性:
XmlHttp對(duì)象的方法:
如何發(fā)送一個(gè)簡(jiǎn)單的請(qǐng)求?
最簡(jiǎn)單的請(qǐng)求是,不以查詢參數(shù)或提交表單的方式向服務(wù)器發(fā)送任何信息.使用XmlHttpRequest對(duì)象發(fā)送請(qǐng)求的基本步驟:
● 為得到XmlHttpRequest對(duì)象實(shí)例的一個(gè)引用，可以創(chuàng)建一個(gè)新的XmlHttpRequest的實(shí)例。
● 告訴XmlHttpRequest對(duì)象,那個(gè)函數(shù)回處理XmlHttpRequest對(duì)象的狀態(tài)的改變.為此要把對(duì)象的
onreadystatechange屬性設(shè)置為指向JavaScript的指針.
● 指定請(qǐng)求屬性.XmlHttpRequest對(duì)象的Open()方法會(huì)指定將發(fā)送的請(qǐng)求.
● 將請(qǐng)求發(fā)送給服務(wù)器.XmlHttpRequest對(duì)象的send()方法將請(qǐng)求發(fā)送到目標(biāo)資源.
XmlHttpRequest實(shí)例分析 我想大家都知道,要想使用一不對(duì)象首先我門得做什么?是不是必須先創(chuàng)建一個(gè)對(duì)象吧.比如C#和Java里用new來實(shí)例對(duì)象.那么我門現(xiàn)在要使用XmlHttp對(duì)象是不是也應(yīng)該先創(chuàng)建一個(gè)XmlHttp對(duì)象呢?這是毫無疑問的!那么下面我們來看看在客戶端怎么創(chuàng)建一個(gè)XmlHttp對(duì)象,并使用這個(gè)對(duì)象向服務(wù)端發(fā)送Http請(qǐng)求,然后處理服務(wù)器返回的響應(yīng)信息.
1.創(chuàng)建一個(gè)XmlHttp對(duì)象(在這里我以一個(gè)無刷新做加法運(yùn)算的實(shí)例 )
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.定義發(fā)送請(qǐng)求的方法
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.定義回調(diào)函數(shù),用于處理服務(wù)端返回的信息
1//回調(diào)方法
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}
在上面這個(gè)實(shí)例中,是在客戶端想服務(wù)端的AddHandler.ashx發(fā)送的請(qǐng)求,并傳遞兩個(gè)參數(shù)(也就是待相加的數(shù))過去,下面我門來看看服務(wù)端是怎么處理接收傳遞過去的兩個(gè)參數(shù)以及怎么實(shí)現(xiàn)加法運(yùn)算并返回結(jié)果到客戶端的.代碼如下:
<%@ 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;
}
}
}
現(xiàn)在我門就可以調(diào)用AddNumber()這個(gè)方法向服務(wù)端發(fā)送請(qǐng)求來做一個(gè)無刷新的加法運(yùn)算了.
<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> 運(yùn)行結(jié)果如下:
這個(gè)實(shí)例雖然很簡(jiǎn)單.我之所以用這個(gè)實(shí)例主要是給大家介紹XmlHttp對(duì)象的處理過程.文章后面我把項(xiàng)目文件提供下載.
------------------------------------------------------------------------------------------------------------
上面把JS寫到頁(yè)面中了,在實(shí)際的項(xiàng)目開發(fā)中是不推薦這樣做的,最好把JS代碼都定義到一個(gè)JS文件類.我這里有一份XmlHttpRequest對(duì)象的JS(網(wǎng)上下載的),把相關(guān)的方法基本都寫全了.下面我門來看看怎么使用這個(gè)外部JS文件來發(fā)送異步請(qǐng)求及響應(yīng).
我門先來看看這個(gè)JS文件的詳細(xì)定義:
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 else91 this.OnError(
this.XmlHttp.status,
this.XmlHttp.statusText,
this.XmlHttp.responseText);
92 }
93}
94 一個(gè)簡(jiǎn)單的Hello實(shí)例:
<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"><title>HelloWorld實(shí)例
</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="發(fā)送請(qǐng)求" onclick="javascript:createRequest()"> </form></body></html> 關(guān)于XmlHttpRequest對(duì)象就介紹到這里,更多更詳細(xì)的內(nèi)容請(qǐng)大家查看相關(guān)資料.
歡迎拍磚指正，不甚感激！
本文實(shí)例源代碼下載 
