標籤：xmlhttprequest ajax asynchronous 非同步 activex
自從把AJAX學了之後，就是在雲裡霧裡飄著，想總結，卻無從下手，就一直拖到現在。最近看DRP，王勇老師簡單的講了AJAX，對這個又是技術又是技巧的東西做了再一次的解，感覺自己稍微理解了一些。現將我現在理解的分享下。
首先什麼是AJAX呢？
AJAX這個名詞最早是由Jesse James Garrett提出的，當時給出的解釋是：Asynchronous JavaScript And XML，雖然當時Jesse James Garrett也曾發表文章介紹這個技術，但是真正被人們所熟知的時候還是在Google在Google Labs發布了Google Maps和Google搜尋引擎之後。
其實關於AJAX，它是一種建立快速動態網頁的一種技術，是幾種技術的合成體，這幾種技術包括：
基於HTML+CSS的標準的表示；
用（DOM）Document Object Model進行動態顯示和互動；
用XMLHttpRequest與伺服器進行非同步通訊；
用JavaScript綁定和處理；
用XML做資料交換 。
正式這這幾種技術合成一體，才構成了強大的AJAX，那麼AJAX的核心是什麼呢？
XMLHttpRequest對象是JavaScript的一個對象，其實這個對象早在IE5（1995年發布）出現的時候就有了，是將它實現成一個對象——ActiveX，而其他瀏覽器是將它實現為一個本地的JavaScript對象，正是因為有這些差異，所以在JavaScript中才包含一些邏輯，從而使用Activex技術或者使用本地JavaScript對象技術建立XMLHttpRequest的執行個體。到底如何建立呢？
建立XMLHttpRequest對象：var xmlhttp=null;if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest(); }else{//IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}分析：
首先建立全域作用變數xmlhttp來儲存XMLHttpRequest，根據不同的瀏覽器返回的對象的不同，決定執行個體化對象，Firefox等瀏覽器調用本地的JavaScript來執行個體化對象，而IE5，IE6根據ActiveX對象來建立XMLHttpRequest執行個體。那這個對象的主要方法和屬性有哪些呢？
XMLHttpRequest方法與屬性：方法：
分析：
open(method,url,async) ，建立對伺服器的應用，有三個參數，參數1：需要提供提交方式（GET、POST、PUT）；參數2：提供所調資源的URL；參數3：指示是同步還是非同步布爾值，預設為true，表示非同步。
send(string)：string，選擇性參數，具體向伺服器發出請求，如果請求聲明為非同步，則方法立即返回，否則會等待直到伺服器接到響應為止。string，僅用於POST請求。
setRequestHeader(header，value)：有兩個參數，第一表示設定的首部，第二表示要在首部放置的值。
屬性：
瞭解了XMLHttpRequest的建立、方法、屬性後，我們應該怎麼使用AJAX去實現一個簡單的請求呢？
XMLHttpRequest對象的五步使用法： 1、 建立XMLHttpRequest對象；
2、 註冊回呼函數 ；
3、 使用open方法和伺服器端互動；
4、 設定發送的資料，開始和伺服器端互動 ；
5、 在回呼函數中判斷互動是否結束，響應是否正確，並根據伺服器端返回的資料，更新頁面內容。
<body class="body1" onload="init()"><form name="userForm" target="_self" id="userForm"><div align="center"><hr width="97%" align="center" size=0><table width="95%" border="0" cellpadding="0" cellspacing="0"><tr><td width="22%" height="29"><div align="right"><font color="#FF0000">*</font>使用者代碼: </div></td><td width="78%"><input name="userId" type="text" class="text1" id="userId" onblur="validate()"size="10" maxlength="10"><span id="spanUserId"></span></td></tr><tr><td height="26"><div align="right"><font color="#FF0000">*</font>使用者名稱稱: </div></td><td><input name="userName" type="text" class="text1" id="userName" size="20" maxlength="20"></td></tr><tr><td height="26"><div align="right"><font color="#FF0000">*</font>密碼: </div></td><td><label><input name="password" type="password" class="text1" id="password" size="20" maxlength="20"></label></td></tr></table></div></form></body>JS：
var xmlHttp;function createXMLHttpRequest(){//1：建立XMLHttpRequest對象//IE7+、Firefox等if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}else { //IE5、IE6if(window.ActiveXObject){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}}}
function validate(){var field = document.getElementById("userId");if(trim(field.value).length!=0){//1：建立ajax核心對象XMLHttpRequestcreateXMLHttpRequest();var url="user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();//2：註冊回呼函數，將方法給onredystatechange屬性xmlHttp.onreadystatechange=callback;//3：使用open方法，佈建要求方式、url、是否非同步xmlHttp.open("GET",url,true);//4：將設定資訊發送給ajax引擎xmlHttp.send(null);}else{document.getElementById("spanUserId").innerHTML="";}}
function callback(){//5：在回呼函數中判斷互動是否結束，響應是否正確，並根據伺服器端返回的資料，更新頁面內容。//與伺服器互動完成，即Ajax引擎狀態成功if(xmlHttp.readyState==4){//200表示“HTTP協議狀態成功”，404表示“未找到”，500表示“伺服器內部錯誤”if(xmlHttp.status==200){if(trim(xmlHttp.responseText)!=""){document.getElementById("spanUserId").innerHTML="<font color='red'>"+xmlHttp.responseText+"</font>";}else{document.getElementById("spanUserId").innerHTML="";}}else{alert("請求失敗，錯誤碼="+ xmlHttp.status);}}}效果如下：
Ajax，簡單來說就是通過XmlHttpRequest對象來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面，這其中最關鍵的一步就是從伺服器獲得請求資料，實現頁面無重新整理，在頁面內與伺服器通訊，不需要打斷使用者的操作，具有更加迅速的響應能力。
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
