當下盛行的Ajax 現在Ajax架構數不勝數，Ajax的功能也太龐大的以至於它連它的父輩
JavaScript 都帶動起來了，記得我最初接觸web的時候Javascript還沒到達有現在的高度，如今隨著客戶提醒越來越重要，很多軟體開發並不僅僅停留在功能實現的要求上，而是更注重互動、分享和互動（這也是web2.0的目標）。其實這也是完全正確的，畢竟那種僅僅賦予功能的東西我們不能滿足了，例如你買東西還想要挑好看的呢，何況軟體開發呢。回到正題，Ajax架構我還是贊成使用的，畢竟自己來實現效率太慢了，像目前優秀的
JavaScript架構
jQuery 就不得不令人讚賞，而且它也是越來越受歡迎，連微軟都在Asp
.NET MVC架構中內建了jQuery。但是我覺還是有必要瞭解Ajax的本質的，這樣你才能運用自如。
Ajax的工作 Ajax直覺認識：我們發送一個請求，但是這個請求比較特殊它是非同步，也就是說用戶端是不會感覺到的。在發送這個請求的時候我們綁定了一個事件，這個事件會監控我們發送請求的狀態，並且每次狀態改變都會觸發，所以我們就可以根據不同的狀態讓他執行不同的操作。請求到達伺服器端的後伺服器端根據相應的請求返回對應的資訊，這個返回資訊我們可以取得並且是非同步得到，不會引起用戶端重新整理。既然在上面已經綁定了監控狀態變化的事件，我們就可以在那裡首先做好在得到返回資訊要做的處理（當然如果失敗也會有相應的狀態我們也會做出相應的處理），我們在處理中得到返回資訊通過javascript在用戶端做相應操作即可。
Ajax核心—-----XMLHttpRequest 上面我們大概感受了一下Ajax的過程，我們發現發送非同步請求才是核心，事實上它就是XMLHttpRequest，整個Ajax之所以能完成非同步請求完全是因為這個對應可以發送非同步請求的緣故。而且我們又發現上面那個事件就是整個處理過程的核心，可以根據不同狀態執行不同操作，其實它就是XMLHttpRequest的方法onreadystatechange，它在每次狀態發生改變時都會觸發。那麼是誰取得的返回資訊呢。它就是XMLHttpRequest的另一個方法responseText（當然還有responseXML）。(⊙o⊙)哦，我們還沒有說發送給誰以及執行發送操作，這兩個就是XMLHttpRequest的open和send方法。Y(^o^)Y，其他的當然還有了，我們直接列出來吧：
XMLHttpRequest對象屬性
readyState： 請求狀態，開始請求時值為0直到請求完成這個值增長到4
responseText： 目前為止接收到的響應體,readyState<3此屬性為空白字串，=3為當前響應體，=4則為完整響應體
responseXML： 伺服器端相應，解析為xml並作為Document對象返回
status： 伺服器端返回的狀態代碼，=200成功，=404表示“Not Found”
statusText： 用名稱表示的伺服器端返回狀態，對於“OK”為200，“Not Found”為400
方法
setRequestHeader()： 向一個開啟但是未發生的請求設定頭資訊
open()： 初始化請求參數但是不發送
send()： 發送Http請求
abort()： 取消當前相應
getAllResponseHeaders()： 把http相應頭作為未解析的字串返回
getResponseHeader()： 返回http相應頭的值
事件控制代碼
onreadystatechange： 每次readyState改變時調用該事件控制代碼，但是當readyState=3有可能調用多次
代碼實現 ajax.js檔案代碼，也是我們說的主要內容，是一個javascript檔案，所有的Ajax操作都在這裡：
//與伺服器通訊 function talktoServer(url) { var req = newXMLHTTPRequst(); var callbackHandler = getReadyStateHandler(req); req.onreadystatechange = callbackHandler; req.open("POST", url, true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var testmsg = document.getElementById("testmsg"); var msg_value = testmsg.value; req.send("msg="+msg_value); }
//建立XMLHTTP對象 function newXMLHTTPRequst() { var xmlreq = false; if (window.XMLHttpRequest) { xmlreq = new XMLHttpRequest(); } else if (window.ActiveXobject) { try{ xmlreq=new ActiveXObject("Msxm12.XMLHTTP"); } catch (e1) { try { xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { } } } return xmlreq; }
//伺服器回呼函數 function getReadyStateHandler(req) { return function() { if (req.readyState == 4) { if (req.status == 200) { var msg_display = document.getElementById("msg_display"); msg_display.innerHTML = req.responseText; } else { var hellomsg = document.getElementById("hellomsg"); hellomsg.innerHTML = "ERROR" + req.status; } } } } 其他相關的代碼也貼出來吧，這樣才能正確執行 使用ajax.js代碼的頁面代碼，也就是Default.aspx前台代碼： <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="myFirst._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> <mce:script type="text/javascript" src="js/ajax.js" mce_src="js/ajax.js"></mce:script> </head> <body> <form id="form1" runat="server"> <div> <input id="testmsg" type="text" value="helloworld" /> <input id="Button1" type="button" value="button" onclick="talktoServer('Ajax.aspx')" /> <div id="msg_display" style="height:50px;"> </div> 在此提醒大家，他對應的非同步請求頁一定不能有form標籤，否之就只有將顯示資訊的div放到此頁的form外了 ，原因很簡單：返回資訊中有form，在此也顯示的時候就造成了form嵌套，不允許。。。 </div> </form> </body> </html> Ajax.aspx的後台代碼，也就是處理XMLHttpRequest請求的頁面後台代碼（其對應的前台需要去掉form標籤）： using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace myFirst { public partial class Ajax : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string str = "伺服器ajax.aspx得到了您輸入的資訊" + Request["msg"] + "<br/>您的ip地址是："; str += Request.UserHostAddress; str += "<br/>當前伺服器時間："; str += DateTime.Now.ToLocalTime(); Response.Write(str); } } }
從代碼我們看出：首先我們建立一個 XMLHttpRequest 對象（由於瀏覽器不同需要 相應判斷處理），設定相應的請求資訊（通過open來做，例如請求地址等 設定 ）；然後我們綁定 onreadystatechange 事件，在這個事件中我們根 據伺服器返回狀態的不同來做出不同處理，這其中主要是請求成功後接收相應的傳回值來通過 javascript 對用戶端做出相應操作（我 們只是使顯示有關資訊）；最後我們發送這個請 求（通過send方法）。
總結
通過上面說 明和代碼實現我們發現事實上整個 Ajax 的無重新整理功能就是利用 XMLHttpRequest 的非同步請求來完成的。關鍵 就是我們瞭解XMLHttpRequest的相關成員資訊。當然，我們上面說實際開發中如果在手動寫這些代碼就太不划算了，我們可以選擇合適的架構來進行 Ajax開發。OK，就到這裡吧。
