什么是AJAX？
AJAX的意思就是異步的JavaScript和XML。簡而言之恋昼，它是使用XMLHttpRequest對象與服務器端通信的腳本語言。它可以發(fā)送及接收各種格式的信息赶促，包括JSON液肌、XML、HTML和文本文件鸥滨。AJAX最為吸引人的就是它的“異步”特性嗦哆，這意味著AJAX可以無需刷新頁面而與服務器端進行通信谤祖。允許你根據(jù)用戶事件來更新部分頁面內(nèi)容。
可以考慮的兩個特性：
向服務器端發(fā)送請求老速，而不用重新加載頁面粥喜。
從服務器端接收數(shù)據(jù)并處理。
第一步：如何發(fā)送一個HTTP請求
需要通過XMLHttpRequest實現(xiàn)使用JavaScript向服務器端發(fā)送一個HTTP請求橘券。而Internet
Explorer（IE）中引入一個名為XMLHTTP的ActiveX對象實現(xiàn)與XMLHttpRequest相同的功能额湘，Mozilla、Safari和其他瀏覽器則使用XMLHttpRequest旁舰。
如果要兼容各個瀏覽器的話锋华，可以這樣來做：
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
注意：出于演示目的，上面創(chuàng)建XMLHTTP實例是簡化了的代碼箭窜。關于更加真實的例子供置，請參閱本文的第三步。
接下來绽快，當接收到服務器端響應時，需要告訴HTTP請求對象使用JavaScript函數(shù)來處理響應紧阔。將XMLHttpRequest對象的onreadystatechange屬性設置為該函數(shù)的名稱坊罢，當請求的狀態(tài)變化時，該函數(shù)會被調(diào)用擅耽。
httpRequest.onreadystatechange = nameOfTheFunction;
注意：該函數(shù)名沒有傳遞參數(shù)的括號和參數(shù)活孩，這表示只是分配了一個函數(shù)的引用，而不是真正調(diào)用該函數(shù)乖仇。當然憾儒，也可以動態(tài)定義一個匿名函數(shù)，這樣可以實時地處理響應乃沙。
httpRequest.onreadystatechange = function(){
// process the server response
};
在處理完服務器端的響應之后起趾，我們就可以調(diào)用XMLHttpRequest對象的open()和send()方法向服務器端發(fā)送請求了。
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send(null);
open()方法的第一個參數(shù)：HTTP請求方法 - GET警儒、POST训裆、HEAD及任何服務器端支持的方法。根據(jù)HTTP標準保持大寫蜀铲，否則一些瀏覽器（例如火狐）可能無法處理請求边琉。關于HTTP請求方法的更多信息，你可以查看W3C規(guī)范
open()方法的第二個參數(shù)：請求的URL记劝。出于安全考慮变姨，不能調(diào)用第三方域的頁面內(nèi)容。當調(diào)用open()方法時厌丑，一定確認使用相同域名內(nèi)的頁面定欧，否則會得到“permission
denied”的錯誤提示渔呵。常見的錯誤是使用domain.tld訪問網(wǎng)站，卻使用www.domain.tld來請求頁面忧额。如果真的需要發(fā)送一個請求到另一個域的話厘肮，可以查看HTTP訪問控制
open()方法的第三個參數(shù)：可選，是否是異步請求睦番。如果是true（默認值）类茂，表示是異步請求。
send()方法的參數(shù)表示當請求為POST時托嚣，向服務器端發(fā)送請求的數(shù)據(jù)內(nèi)容巩检。如果發(fā)送的是表單數(shù)據(jù)格式的話，服務器端可以向字符串一樣地解析示启。
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
向服務器端發(fā)送的數(shù)據(jù)格式也可以是JSON兢哭、SOAP等格式。
注意：如果使用POST方式發(fā)送數(shù)據(jù)的話夫嗓，在調(diào)用send()方法前迟螺，需要設置請求的MIME類型。：
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
第二步：處理服務器端的響應
當發(fā)送請求時舍咖，已經(jīng)定義了一個函數(shù)來處理響應矩父。
httpRequest.onreadystatechange = nameOfTheFunction;
這個函數(shù)可以做什么呢？首先排霉，該函數(shù)需要檢查請求的狀態(tài)窍株。如果狀態(tài)值為4的話，這表示接收到完成的服務器端響應攻柠，可以繼續(xù)處理球订。
if (httpRequest.readyState === 4) {
// everything is good, the response is received
} else {
// still not ready
}
readyState的值列表如下：
0 - 未初始化
1 - 正在加載
2 - 加載完畢
3 - 交互中
4 - 完成
接下來需要檢查HTTP服務器端響應的狀態(tài)代碼，W3C網(wǎng)站 列出了所有的狀態(tài)代碼瑰钮。下面的例子中冒滩，通過是否為200 OK的狀態(tài)碼來判斷AJAX調(diào)用是否是成功的。
if (httpRequest.status === 200) {
// perfect!
} else {
// there was a problem with the request,
// for example the response may contain a 404 (Not Found)
// or 500 (Internal Server Error) response code
}
在檢查了請求的狀態(tài)和響應的狀態(tài)碼后飞涂，就可以接收服務器端發(fā)送的數(shù)據(jù)并處理旦部。有兩種選項訪問這些數(shù)據(jù)：
httpRequest.responseText - 將服務器端響應作為文本字符串返回
httpRequest.responseXML - 將響應作為一個XMLDocument對象返回，該對象可以使用JavaScript DOM函數(shù)進行遍歷较店。
注意士八，上述步驟只有異步請求（open()方法的第三個參數(shù)設置為true）時才是有效的。如果使用同步請求的話梁呈，是不需要指定函數(shù)的婚度。在調(diào)用send()方法后就可以訪問到服務器端返回的數(shù)據(jù)，因為腳本會停止并等待服務器端的響應。
第三步：一個簡單的例子
下面來做一個簡單的HTTP請求蝗茁。JavaScript將請求一個包含“I’m a test.”文本的“test.html”HTML文檔醋虏，然后使用alert()方法打印test.html文件的內(nèi)容。
Make a request
(function() {
var httpRequest;
document.getElementById("ajaxButton").onclick = function() { makeRequest('test.html'); };
function makeRequest(url) {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', url);
httpRequest.send();
}
function alertContents() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
})();
在這個例子中：
在瀏覽器中用戶單擊“Make a request”鏈接哮翘；
事件處理器調(diào)用makeRequest()方法颈嚼，通過向該函數(shù)傳遞的參數(shù)，請求一個處在同一目錄中的“test.html”HTML文件饭寺；
請求后阻课，（onreadystatechange）執(zhí)行 alertContents()方法；
alertContents()方法用于檢查如果正確地接收到響應艰匙，利用alert()方法打印“test.html”文件包含的內(nèi)容限煞。
注意：如果你發(fā)送一個請求后返回的是一段XML代碼，而不是一個靜態(tài)的XML文件的話员凝，在Internet
Explorer中必須設置一些響應頭署驻。如果沒有設置響應頭“Content-Type:
application/xml”的話，當試圖訪問XML元素時IE將拋出一個”O(jiān)bject Expected”的JavaScript錯誤健霹。
注意：如果沒有設置頭“Cache-Control:no-cache”的話旺上，瀏覽器將緩存響應并不會重新提交請求√锹瘢可以添加像時間戳或一個隨機數(shù)的不同GET請求參數(shù)（參考 bypassing the cache）抚官。
注意：如果httpRequest變量是全局的，makeRequest()方法因為沖突可能會被重寫阶捆。將httpRequest變量定義在一個閉包中的話，可以避免AJAX函數(shù)的沖突钦听。
注意：如果出現(xiàn)通信錯誤（如服務器端被關閉）洒试，當試圖訪問狀態(tài)字段時在onreadystatechange的方法中將會拋出一個異常。確保if語句聲明在try..catch語句中朴上。
function alertContents() {
try {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
catch( e ) {
alert('Caught Exception: ' + e.description);
}
}
第四步：使用XML進行響應
在前面的例子中垒棋，當接收到響應后使用XMLHttpRequest對象的responseText屬性訪問“test.html”文件包含的內(nèi)容。現(xiàn)在嘗試一下responseXML屬性痪宰。
首先叼架，創(chuàng)建一個用于請求的名為“test.xml”的有效XML文檔，代碼如下：
I'm a test.
在腳本中衣撬，只需要修改請求行：
onclick="makeRequest('test.xml')">
然后在alertContents()方法中乖订，需要使用如下代碼替換
alert(httpRequest.responseText);
這一行代碼：
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);
這段代碼需要由responseXML給予的XMLDocument對象，然后使用DOM方法來訪問XML文檔中的數(shù)據(jù)具练。
第五步：處理數(shù)據(jù)
最后乍构，向服務器端發(fā)送一些數(shù)據(jù)并接收響應。這次JavaScript腳本請求一個動態(tài)頁面“test.php”扛点，該頁面將根據(jù)發(fā)送的數(shù)據(jù)返回一個“computedString”-“Hello, [user data]!”哥遮，并使用alert()方法進行打印岂丘。
首先，向HTML頁面中添加一個文本框眠饮，用戶可以通過該文本框輸入他們的名字：
Your name:
Make a request
還需要添加一行事件處理器用于從文本框獲取用戶的數(shù)據(jù)奥帘，并將該數(shù)據(jù)隨著URL傳遞給makeRequest()方法：
document.getElementById("ajaxButton").onclick = function() {
var userName = document.getElementById("ajaxTextbox").value;
makeRequest('test.php',userName);
};
修改makeRequest()方法用于接收用戶數(shù)據(jù)并發(fā)送給服務器端。將請求方式從GET修改為POST仪召，用戶數(shù)據(jù)作為參數(shù)傳遞給httpRequest.send()方法：
function makeRequest(url, userName) {
...
httpRequest.onreadystatechange = alertContents;
httpRequest.open('POST', url);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('userName=' + encodeURIComponent(userName));
}
alertContents()方法可以向第三步一樣利用alert()方法打印服務器端返回的數(shù)據(jù)寨蹋。假設服務器端返回的是computedString和用戶數(shù)據(jù)的話，如果用戶在文本框中輸入“Jane”服務器端響應的內(nèi)容會像是這樣：
{“userData”:”Jane”,”computedString”:”Hi, Jane!”}
在alertContents()方法中使用這些數(shù)據(jù)返咱，不僅可以使用alert()方法打印responseText的內(nèi)容钥庇，還可以將其解析并打印computedString屬性內(nèi)容：
function alertContents() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
var response = JSON.parse(httpRequest.responseText);
alert(response.computedString);
} else {
alert('There was a problem with the request.');
}
}
}
原文：https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
譯文：http://www.longestory.com/Ajax/ajax-getting-started.html
