上篇部落格較為詳細的介紹了一下XMLHttpRequest的屬性、方法和事件控制代碼，這篇部落格來介紹一下Ajax的五步使用法。為了直觀，用一個簡單的例子說明：AjaxClient用於提交使用者名稱，AjaxServer用於判斷使用者名稱是否使用，並返回提示。
AjaxClient.html：
<html><head><title>ajaxClient</title><script type="text/javascript"> var xmlhttp; function submit() { if(window.XMLHttpRequest) { //IE7 above,firefox,chrome^^ xmlhttp=new XMLHttpRequest(); //為了相容部分Mozillar瀏覽器,當來自伺服器響應開頭不是xml，導致的無法響應問題 if(xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType('text/xml'); } } else if(window.ActiveXObject) { //IE5\IE6 xmlhttp=new activeXObject("Microsoft.XMLHTTP"); } if(xmlhttp==null||xmlhttp==undefined) { alert("con't create XMLHttpRequest Object"); } var userName = document.getElementById('testText').value; //註冊回呼函數 xmlhttp.onreadystatechange = callback; //發送資訊 xmlhttp.open('GET','AjaxServer.aspx?name='+userName,true); xmlhttp.send(null); } function callback() { //判斷互動是否完成,是否正確返回 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //擷取伺服器返回資訊 var message = xmlhttp.responseText; //得到提示資訊div var testDiv=document.getElementById('test'); testDiv.innerHTML=message; } } </script></head><body> <!--使用者名稱輸入框--> <input type="text" name="wenben" value="" id="testText" /> <input type="button" name="ceshi" value="submit" onclick="submit();" /> <!--用於顯示提示資訊--> <div id="test"></div></body></html>
AjaxServer.aspx.cs
protected void Page_Load(object sender, EventArgs e) { string getName = Request["name"].ToString ().Trim(); if (getName == "lida") { Response.Write(getName+" 不可用，該使用者名稱已經被使用"); } else { Response.Write("可用，該使用者名稱尚未被使用"); } }
如果採用POST方式，則需要更改open()和send()方法，並佈建要求頭部資訊：
//POST方式//需要制定RequstHeader//將請求參數寫入到send中xmlhttp.open('POST', 'AjaxServer', true);xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xmlhttp.send('name='+userName);
測試結果：
第一步：建立XMLHttpRequest，就像以前部落格中所說一樣，不能採用瀏覽器檢測，要使用能力檢測。建立XMLHttpRequest基本是兩種，一種是IE5/IE5.5/IE6使用的activeXObject；一種是其它瀏覽器使用的XMLHttpRequest()。建立一個全域的xmlhttp變數用來存放XMLHttpRequest對象。
第二步：註冊回呼函數，注意的是僅僅是將回呼函數的地址傳給onreadystatechange，而不是傳回值，所以不能帶執行括弧。
第三步：設定與伺服器互動的方式、地址、參數等資訊。
第四步：向伺服器發送請求，啟動與伺服器的互動。
第五步：建立回呼函數，讓回呼函數接收服務端返回的資料，然後更新頁面。
如果僅僅是展示一下Ajax伺服器與瀏覽器頁面的互動過程，這個樣本就夠了，但需要掌握的不僅僅是互動的過程，其中涉及到的很多的細節問題，還需要隨著學習的深入繼續補充。
以前也使用過瀏覽器內建的調試功能，通過今天調試，發現內建的開發人員工具功能還是挺強大的，不但可以調試js，還可以查看源檔案、請求和響應等具體內容，附圖一張：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
