1.什麼是Ajax？
允許瀏覽器與服務器通信而無需刷新當前頁面的技術，叫做Ajax。而在實際編程過程中，常常將XMLHttpRequest作爲Ajax的代名詞，XMLHttpRequest就是JavaScript的一個擴展。
2.XMLHttpRequest
2.1創建XMLHttpReques對象：
var request = new XMLHttpReques();
2.2XMLHttpReques對象常用的方法和屬性：
2.3使用JavaScript語言進行編程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HelloWorld</title>
<script type="text/javascript">
window.onload = function(){
//1.爲a節點添加點擊事件
document.getElementsByTagName("a")[0].onclick = function(){
//3.創建XMLHttpRequest對象
var request = new XMLHttpRequest();
//4.準備請求參數url method
var url = this.href + "?time=" + new Date();
var method = "GET";
//5.調用 XMLHttpRequest 對象的 open 方法
request.open(method,url);
//6.調用 XMLHttpRequest 對象的 send 方法
request.send(null);
//7.爲XMLHttpRequest對象添加onreadystatechange響應函數
request.onreadystatechange = function(){
//8.判斷響應是否完成：XMLHttpReques對象的 readState 爲 4
if(request.readyState == 4){
//9.再判斷響應是否可用： XMLHttpReques對象的status 爲 200
if(request.status == 200 || request.status == 304){
//10.打印相應結果：responseText
alert(request.responseText);
}
}
}
//2.取消默認行爲，阻止點擊頁面跳轉
return false;
}
}
</script>
</head>
<body>
<a href="hello.txt">Hello</a>
</body>
</html>利用XMLHttpRequest實例與服務器通信包含了3個關鍵：
①onreadystatechange事件處理函數：
--|該事件處理函數由服務器觸發，而不是用戶；
--|在 Ajax 執行過程中，服務器會通知客戶端當前的通信狀態。這依靠更新 XMLHttpRequest 對象的 readyState 來實現。改變 readyState 屬性是服務器對客戶端連接操作的一種方式。每次 readyState 屬性的改變都會觸發 readystatechange 事件
②open(method, url, asynch)：
--|XMLHttpRequest 對象的 open 方法允許程序員用一個Ajax調用向服務器發送請求。
--|method：請求類型，類似 “GET”或”POST”的字符串。若只想從服務器檢索一個文件，而不需要發送任何數據，使用GET(可以在GET請求裏通過附加在URL上的查詢字符串來發送數據，不過數據大小限制爲2000個字符)。若需要向服務器發送數據，用 POST。
--|在某些情況下，有些瀏覽器會把多個XMLHttpRequest請求的結果緩存在同一個URL。如果對每個請求的響應不同，就會帶來不好的結果。在此將時間戳追加到URL的最後，就能確保URL的唯一性，從而避免瀏覽器緩存結果。
--|url：路徑字符串，指向你所請求的服務器上的那個文件。可以是絕對路徑或相對路徑。
--|asynch：表示請求是否要異步傳輸，默認值爲true。指定true，在讀取後面的腳本之前，不需要等待服務器的相應。指定false，當腳本處理過程經過這點時，會停下來，一直等到Ajax請求執行完畢再繼續執行
③send(data)：
--|open 方法定義了 Ajax 請求的一些細節。send 方法可爲已經待命的請求發送指令
--|data：將要傳遞給服務器的字符串。
--|若選用的是 GET 請求，則不會發送任何數據， 給 send 方法傳遞 null 即可：request.send(null);
--|當向send()方法提供參數時，要確保open()中指定的方法是POST，如果沒有數據作爲請求體的一部分發送，則使用null.
④setRequestHeader(header,value)：
--|當瀏覽器向服務器請求頁面時，它會伴隨這個請求發送一組首部信息。這些首部信息是一系列描述請求的元數據(metadata)。首部信息用來聲明一個請求是 GET 還是 POST。
--|Ajax 請求中，發送首部信息的工作可以由 setRequestHeader該完成
--|參數header： 首部的名字; 參數value：首部的值。
--|如果用 POST 請求向服務器發送數據，需要將 “Content-type” 的首部設置爲 “application/x-www-form-urlencoded”.它會告知服務器正在發送數據，並且數據已經符合URL編碼了。
--|該方法必須在open()之後才能調用
⑤readyState
--|readyState 屬性表示Ajax請求的當前狀態。它的值用數字代表。
----|0 代表未初始化。 還沒有調用 open 方法
----|1 代表正在加載。 open 方法已被調用，但 send 方法還沒有被調用
----|2 代表已加載完畢。send 已被調用。請求已經開始
----|3 代表交互中。服務器正在發送響應
----|4 代表完成。響應發送完畢
--|每次 readyState 值的改變，都會觸發 readystatechange 事件。如果把 onreadystatechange 事件處理函數賦給一個函數，那麼每次 readyState 值的改變都會引發該函數的執行。
--|readyState 值的變化會因瀏覽器的不同而有所差異。但是，當請求結束的時候，每個瀏覽器都會把 readyState 的值統一設爲 4
⑥status
--|服務器發送的每一個響應也都帶有首部信息。三位數的狀態碼是服務器發送的響應中最重要的首部信息，並且屬於超文本傳輸協議中的一部分。
--|常用狀態碼及其含義：
----|404 沒找到頁面(not found)
----|403 禁止訪問(forbidden)
----|500 內部服務器出錯(internal service error)
----|200 一切正常(ok)
----|304 沒有被修改(not modified)
--|在 XMLHttpRequest 對象中，服務器發送的狀態碼都保存在 status 屬性裏。通過把這個值和 200 或 304 比較，可以確保服務器是否已發送了一個成功的響應
⑦responseText
--|XMLHttpRequest 的 responseText 屬性包含了從服務器發送的數據。它是一個HTML,XML或普通文本，這取決於服務器發送的內容。
--|當 readyState 屬性值變成 4 時, responseText 屬性纔可用，表明 Ajax 請求已經結束。
⑧responseXML
--|如果服務器返回的是 XML， 那麼數據將儲存在 responseXML 屬性中。
--|只用服務器發送了帶有正確首部信息的數據時， responseXML 屬性纔是可用的。 MIME 類型必須爲 text/xml
3.Ajax的數據格式（HTML XML JSON）
3.1 HTML
（1）HTML 由一些普通文本組成。如果服務器通過 XMLHttpRequest 發送 HTML， 文本將存儲在 responseText 屬性中。
（2）不必從 responseText 屬性中讀取數據。它已經是希望的格式，可以直接將它插入到頁面中。
（3）插入 HTML 代碼最簡單的方法是更新這個元素的 innerHTML 屬性。
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
document.getElementById("details").innerHTML = request.responseText;
}
}
}
return false;
}
}
3.2 XML
優點：
（1）XML 是一種通用的數據格式。
（2）不必把數據強加到已定義好的格式中，而是要爲數據自定義合適的標記。
（3）利用 DOM 可以完全掌控文檔。
缺點：
（1）如果文檔來自於服務器，就必須得保證文檔含有正確的首部信息。若文檔類型不正確，那麼 responseXML 的值將是空的。
（2）當瀏覽器接收到長的 XML 文件後， DOM 解析可能會很複雜
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
//1獲取XML文件內容
var result = request.responseXML;
/*
* 解析XML文件：<h2><a href="mailto:[email protected]">Andy Budd</a></h2>
* <a href="http://andybudd.com/">http://andybudd.com/</a>
*/
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
//創建節點，並且添加到div節點中
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto:" + email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
var aNode2 = document.createElement("a");
aNode2.appendChild(document.createTextNode(website));
aNode2.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);
}
}
}
return false;
}
}
}3.3 JSON
（1）JSON（JavaScript Object Notation）一種簡單的數據格式，比xml更輕巧。JSON是JavaScript原生格式，這意味着在JavaScript中處理JSON數據不需要任何特殊的API或工具包。
（2）JSON的規則很簡單：對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”後跟一個“:”（冒號）；“‘名稱/值’對”之間使用“,”（逗號）分隔。
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
var jsonStr = request.responseText;
var jsonObject = eval("(" + jsonStr + ")");
var name = jsonObject.person.name;
var website = jsonObject.person.website;
var email = jsonObject.person.email;
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto:" + email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
var aNode1 = document.createElement("a");
aNode1.appendChild(document.createTextNode(website));
aNode1.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode1);
}
}
}
return false;
}
}
}4.使用jQuery實現Ajax技術
jQuery 對 Ajax 操作進行了封裝, 在 jQuery 中最底層的方法時 $.ajax(), 第二層是 load(), $.get() 和 $.post(), 第三層是 $.getScript() 和 $.getJSON()。
4.1 load() 方法
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
$("#details").load(url);
return false;
});
})（2）如果只需要加載目標 HTML 頁面內的某些元素, 則可以通過 load() 方法的 URL 參數來達到目的. 通過 URL 參數指定選擇符, 就可以方便的從加載過來的 HTML 文檔中選出所需要的內容. load() 方法的 URL 參數的語法結構爲 “url selector”(注意: url 和 選擇器之間有一個空格)
$(function(){
$("a").click(function(){
//選擇返回HTML結果頁面中的h2後代a元素
var url = this.href + " h2 a";
var args = {"time":new Date()};
$("#details").load(url);
return false;
});
})（3）傳遞方式: load() 方法的傳遞參數根據參數 data 來自動自定. 如果沒有參數傳遞, 採用 GET 方式傳遞, 否則採用 POST 方式
（4）對於必須在加載完才能繼續的操作, load() 方法提供了回調函數, 該函數有三個參數: 代表請求返回內容的 data; 代表請求狀態的 textStatus 對象和 XMLHttpRequest 對象
4.2$.get()或$.post() 方法
4.2.1加載XML數據
$(function(){
$("a").click(function(){
var url = this.href;
args = {"time" : new Date()};
$.get(url,args,function(data){
var name = $(data).find("name").text();
var email = $(data).find("email").text();
var website = $(data).find("website").text();
$("#details").empty()
.append("<h2><a href='mailto:" + email + "'>" + name +"</a></h2>")
.append("<a href='" + website + "'>" + website + "</a>");
})
return false;
});
})4.2.2加載HTML數據
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time" : new Date()};
$.get(url,args,function(data){
$("#details").empty();
$(data).appendTo($("#details"));
});
return false;
});
}) $(function(){
$("a").click(function(){
var url = this.href;
args = {"time" : new Date()};
$.get(url,args,function(data){
var name = data.person.name;
var email = data.person.email;
var website = data.person.website;
$("#details").empty()
.append("<h2><a href='mailto:" + email + "'>" + name +"</a></h2>")
.append("<a href='" + website + "'>" + website + "</a>");
},"JSON")
return false;
});
})（1）$.get() 方法使用 GET 方式來進行異步請求. 它的結構是: $.get(url[, data][, callback][, type])，其中：url：String類型，請求HTML頁面的URL地址；data（可選）：Object類型，發送到服務器的key/value數據；callback（可選）：Function類型，請求完成時的回調函數，無論請求成功還是失敗；type（可選）：String類型，服務器返回內容的格式，可以是xml,json,html,text等類型。
（2）$.get() 方法的回調函數只有兩個參數: data 代表返回的內容, 可以是 XML 文檔, JSON 文件, HTML 片段等; textstatus 代表請求狀態, 其值可能爲: succuss, error, notmodify, timeout 4 種.
（3）$.get() 和 $.post() 方法時 jQuery 中的全局函數, 而 find() 等方法都是對 jQuery 對象進行操作的方法
$(function(){
$("a").click(function(){
var url = this.href;
args = {"time" : new Date()};
$.getJSON(url,args,function(data){
var name = data.person.name;
var email = data.person.email;
var website = data.person.website;
$("#details").empty()
.append("<h2><a href='mailto:" + email + "'>" + name +"</a></h2>")
.append("<a href='" + website + "'>" + website + "</a>");
});
return false;
});
})