根據(jù)Ajax與XMLHttpRequest對(duì)象一文的介紹，我們可以開(kāi)發(fā)一個(gè)簡(jiǎn)單的Ajax框架供以后開(kāi)發(fā)應(yīng)用。
首先要知道Ajax的開(kāi)發(fā)流程：
1：初始化XMLHttpRequest,這一步要考慮跨瀏覽器的問(wèn)題。
2：設(shè)置XMLHttpRequest對(duì)象的onReadyStateChange屬性，指定服務(wù)器返回響應(yīng)數(shù)據(jù)時(shí)要調(diào)用的回調(diào)函數(shù)，即指定響應(yīng)處理函數(shù)，
3：調(diào)用XMLHttpRequest對(duì)象的open方法，創(chuàng)建http請(qǐng)求。
4：調(diào)用XMLHttpRequest對(duì)象的setResouceHeader等方法，設(shè)置必要的http請(qǐng)求頭信息。
5：調(diào)用XMLHttpRequest對(duì)象的send方法，發(fā)送之前創(chuàng)建的http請(qǐng)求。
6：根據(jù)XMLHttpRequest對(duì)象的open方法參數(shù)，決定等待或者不等待服務(wù)器回響應(yīng)數(shù)據(jù)。如果服務(wù)器返回響應(yīng)數(shù)據(jù)，則將控制權(quán)交給之前設(shè)置回調(diào)函數(shù)。

了解上面的流程后，我們來(lái)一步步的解析和示范，形成一個(gè)發(fā)送和接收XMLHttpRequest請(qǐng)求的Ajax應(yīng)用程序框架。 //定義XMLHttpRequest對(duì)象實(shí)例
var?http_request?=?false;
//定義創(chuàng)建跨瀏覽器XMLHttpRequest方法
function?createXMLHttpRequest()
{
????http_request?=?false;
????//開(kāi)始初始化XMLHttpRequest對(duì)象
????if(window.XMLHttpRequest)?{?//Mozilla?瀏覽器
????????http_request?=?new?XMLHttpRequest();
????????if?(http_request.overrideMimeType)?{//設(shè)置MiME類(lèi)別
????????????//有些版本的瀏覽器在處理服務(wù)器返回的未包含XML?mime-type頭部信息的內(nèi)容時(shí)會(huì)報(bào)錯(cuò)，因此，要確保返回的內(nèi)容包含text/xml信息。
????????????http_request.overrideMimeType("text/xml");
????????}
????}
????else?if?(window.ActiveXObject)?{?//?IE瀏覽器
????????try?{
????????????http_request?=?new?ActiveXObject("Msxml2.XMLHTTP");
????????}?catch?(e)?{
????????????try?{
????????????????http_request?=?new?ActiveXObject("Microsoft.XMLHTTP");
????????????}?catch?(e)?{}
????????}
????}
????if?(!http_request)?{?//?異常，創(chuàng)建對(duì)象實(shí)例失敗
????????window.alert("不能創(chuàng)建XMLHttpRequest對(duì)象實(shí)例.");
????????return?false;
????}
}
//定義可復(fù)用的http請(qǐng)求發(fā)送函數(shù)
function?send_request(method,url,content,callback)?{//請(qǐng)求方式，請(qǐng)求目標(biāo)，內(nèi)容，處理函數(shù)名稱(chēng)
????
????//第一步：初始化XMLHttpRequest
????createXMLHttpRequest();
????
????//第二步：指定響應(yīng)處理函數(shù)
????http_request.onreadystatechange?=?callback;//注意這里不用加括號(hào)

????//第三步：向服務(wù)器發(fā)出http請(qǐng)求　調(diào)用?open和send方法
????//?確定發(fā)送請(qǐng)求的方式和URL以及是否異步執(zhí)行下段代碼
????if(method.toLowerCase()=="get")?{
????????http_request.open(method,?url,?true);//第三個(gè)參數(shù)　為　是否異步
????}
????else?if(method.toLowerCase()=="post")?{
????????http_request.open(method,?url,?true);
????????http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//這個(gè)位置不能放錯(cuò)
????}
????else?{
????????window.alert("http請(qǐng)求類(lèi)別參數(shù)錯(cuò)誤。");
????????return?false;
????}

????http_request.send(content);
????//send方法如果POST方式發(fā)出的話，可以是任何想傳給服務(wù)器的內(nèi)容，不過(guò)與form一樣，如果要傳的是文件或者POST內(nèi)容給服務(wù)器，在調(diào)用open方法之后send方法之前，必須先調(diào)用XMLHttpRequest對(duì)象的setRequestHeader方法，修改http請(qǐng)求頭信息中的MIME類(lèi)別。
}
????//最后一步　就是處理服務(wù)器返回信息的方法了，由于每個(gè)頁(yè)面的應(yīng)用不同，所以應(yīng)該將具體方法寫(xiě)在相應(yīng)的頁(yè)面中。這寫(xiě)一個(gè)示例：
????
????//?處理返回文本格式信息的函數(shù)　示例
function?processTextResponse()?{
????if?(http_request.readyState?==?4)?{?//?判斷對(duì)象狀態(tài)（4表示完成）
????????if?(http_request.status?==?200)?{?//?200　信息已經(jīng)成功返回，開(kāi)始處理信息
????????????//這里面即是具體的處理代碼
????????????alert("Text文檔響應(yīng)。");
????????}?else?{?//頁(yè)面不正常
????????????alert("您所請(qǐng)求的頁(yè)面有異常。");
????????}
????}
}　

//我們將以上文件保存為ajax.js文件
//然后在以后的每個(gè)需要應(yīng)用Ajax的頁(yè)面中引入
<script?language="javascript"?src="ajax.js"></script>

這個(gè)Ajax應(yīng)用程序開(kāi)發(fā)框架現(xiàn)在還是一個(gè)簡(jiǎn)單的初步的框架，其目的就是通過(guò)這個(gè)框架的示范，形式一個(gè)使用Ajax的基本方法和輪廓。 關(guān)于如何使用這個(gè)框架，將在以后的文章中寫(xiě)出

?

補(bǔ)充：

如果使用POST方法傳遞。則content一般使用XML的形式。例如：

?

Code
function?login()
{
?
????var?xml?=?"<root><userName>123</userName><pwd>中國(guó)</pwd></root>";
????send_request("post","/StockSacChat/ChatHander.aspx",xml,result);
}
function?result()
{
?????if?(http_request.readyState?==?4)?{?
????????if?(http_request.status?==?200)?{
?????????
????????????alert(http_request.responseText);
????????}?else?{?//頁(yè)面不正常
????????????alert("頁(yè)面有異常。");
????????}
????}
}

?

而相應(yīng)的后臺(tái)代碼 ASP.NET中可以如下獲得

Code
private?void?Page_Load(object?sender,?System.EventArgs?e)
{?
????XmlDocument?xmlDoc?=?new??System.Xml.XmlDocument();
????xmlDoc.Load(Request.InputStream);
????//得到root所有子節(jié)點(diǎn)
????XmlNodeList?xnl=xmlDoc.SelectSingleNode("root").ChildNodes;
????
????Response.Write(xnl.Item(0).InnerText);//輸出userName值
}

總結(jié)

以上是生活随笔為你收集整理的一个简单的Ajax开发框架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。