Ajax原理
一、Ajax簡介
1、Ajax=Asynchronous JavaScript and XML（異步的JavaScript和XML），是一種在不重新加載整個網頁的情況下，實現頁面局部更新的藝術，它不是一種編程語言，而是一種使用現有標準的新方法。
2、不使用Ajax的情況下，如果需要更新內容，必須重載整個頁面；Ajax通過在後臺與服務器進行進行少量交互實現網頁的異步更新。使用Ajax的例子有：新浪微博、Google地圖、開心網等。
二、Ajax執行原理（過程）
1、創建XMLHttpRequest對象
(1) 簡介：
XMLHttpRequest對象用於在後臺與服務器交換數據。現代瀏覽器基本都支持該對象，其中IE5和IE6使用ActiveXObject對象；IE7+、Firefox、Chrome、Safari以及Opera等內建XMLHttpRequest對象。
(2) 創建方式：
var xmlhttp;
if(window.XMLHttpRequest)
{//code for IE7+,Firefox,Chrome,Opera,Safari
xmlhttp = new XMLHttpRequest();
}
else
{//code for IE5,IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}2、向服務器發送請求
(1)發送方式：
如果需要向服務器發送請求，我們要使用XMLHttpRequest對象的open()和send()方法，如下代碼所示：
xmlhttp.open("GET","test.jsp","true");
xmlhttp.send();(2)方法及參數介紹：
- open(method,url,async)方法：規定請求的類型、URL以及是否異步
– method：請求的類型，GET或POST；
–url：文件在服務器上的位置,該文件可以是任意類型,比如如.txt，.xml，.asp，.php或.jsp等；
– async：true（異步）或false（同步），使用Ajax時必須爲true；
xmlhttp.open("GET","test.jsp?name=zhangsan&sno=1101",true);
xmlhttp.send();- send()方法：將請求發送到服務器上
– String：僅用於POST請求；
–使用該方法發送請求時要使用setRequestHeader()方法來添加HTTP請求頭，然後再send中添加請求的數據。
xmlhttp.open("POST","test2.jsp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=zhangsan&sno=1101");(3)Async = true
通過Ajax，JavaScript無需等待服務器的響應，而是：
- 在等待服務器響應時執行其他腳本
- 當響應就緒後對響應進行處理
當使用async=true時，請規定在響應處於onreadystatechange事件中的就緒狀態時執行的函數，即回調函數，如下代碼所示：
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("MyDiv").innerHTML = xmlhttp.responseText;
}
xmlhttp.open("GET","test1.jsp",true);
xmlhttp.send();
}注意：當您使用async=false時，請不要編寫onreadystatechange函數，只要把相應的處理代碼放到send語句後即可，則JavaScript代碼會等到服務器響應就緒時才繼續執行，看如下代碼：
xmlhttp.open("GET","test1.jsp",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;3、服務器響應
如需獲得來自服務器的響應，請使用SMLHttpRequest對象的responseText或responseXML屬性。
（1）responseText屬性：獲得字符串形式的響應數據。
如果來自服務器的響應並非XML，請使用responseText屬性，使用方法如下：
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;（2）responseXML屬性：獲得XML形式的響應數據。
如果來自服務器的響應是XML，而且需要作爲XML對象進行解析，請使用responseXML屬性，如下爲請求books.xml文件，並解析響應：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementByTagName("ARTIST");
for(int i = 0;i<s.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;4、onreadystatechange事件(其實是XMLHttpRequest對象的屬性)
當請求被髮送到服務器時，我們需要執行一些基於響應的任務，每當readyState改變時，就會觸發onreadystatechange事件，該事件中有兩個屬性，分別是readyState和status，下面分別作介紹：
（1）onreadystatechange屬性
存儲函數（或函數名），每當readyState屬性的值改變時，就會調用該函數。
（2）readyState:存有XMLHttpRequest的狀態，從0到4發生變化
- 0：請求未初始化
- 1：服務器連接已經建立
- 2：請求已連接
- 3：請求處理中
- 4：請求已完成，且服務器響應就緒
（3）status：狀態
- 200：“OK”
- 404：未找到頁面
在onreadystatechange事件中，我們規定當服務器響應已經做好被處理的準備時所執行的任務。當readyState等於4且狀態爲200時，表示響應已就緒，如下代碼所示：
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState==4 && status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}附加：使用Callback函數（回調函數）
回調函數是一種以參數形式傳遞給另一個函數的函數，如果您的網站上存在多個AJAX任務，那麼您應該爲創建XMLHttpRequest對象編寫一個標準的函數，併爲每個AJAX調用該標準函數，該函數調用應該包含URL以及發生onreadystatechange事件時執行的任務（每次調用的執行可能不盡相同），如下代碼所示：
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
});
}5、綜合以上所講的內容，舉一個簡單的例子，代碼如下所示：
<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if(window.XMLHttpRequest)
{//code for IE7+,Chrom,Firefox,Safari,Opera
xmlhttp = new XMLHttpRequest();
}
else
{//code for IE5,IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/ajax/test1.jsp",function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<div id="myDiv">
<h2>Let AJAX change this text</h2>
</div>
<button type="button" onclick="myFunction()">通過AJAX改變內容</button>
</body>
</html>以上內容是本人在學習Ajax時總結的重點知識，主要的學習輔助資源是W3School，如果您不喜歡W3School中的在線學習法，可以參考本文，其優點在於將W3School中的多個頁面濃縮在一篇文章中，方便閱讀；其缺點在於代碼實例比較少，而且看不到實現的效果，這個我建議您去W3School參考相應的代碼，那裏可以看到代碼的效果展示。如果有什麼不足之處，比如表述錯誤之類的，我也希望能得到大家的指證，以求共同進步。
