ajax異步傳輸之深入解析
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
AJAX 不是新的編程語言，而是一種使用現有標準的新方法。AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。
AJAX 是一種用於創建快速動態網頁的技術。通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。
AJAX 的工作原理如下圖所示：
AJAX是基於現有的Internet標準，並且聯合使用它們：
- XMLHttpRequest 對象 (異步的與服務器交換數據)
- JavaScript/DOM (信息顯示/交互)
- CSS (給數據定義樣式)
- XML (作為轉換數據的格式)
所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用於在後臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject 。
1 var xmlhttp; 2 if (window.XMLHttpRequest) 3 { 4 // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 5 xmlhttp=new XMLHttpRequest(); 6 } 7 else 8 { 9 // IE6, IE5 瀏覽器執行代碼 10 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 11 }
XMLHttpRequest 對象用於和服務器交換數據。如需將請求發送到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.jsp",true);
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) |
規定請求的類型、URL 以及是否異步處理請求。
|
| send(string) |
將請求發送到服務器。
|
與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。然而，在以下情況中，請使用 POST 請求：
- 無法使用緩存文件（更新服務器上的文件或數據庫）
- 向服務器發送大量數據（POST 沒有數據量限制）
- 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
為了避免緩存的情況，請向 URL 添加一個唯一的 ID：
xmlhttp.open("GET","/try/ajax/demo_get.jsp?t=" + Math.random(),true);
xmlhttp.send();
如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的數據：
1 xmlhttp.open("POST","/try/ajax/demo_post2.jsp",true); 2 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 3 xmlhttp.send("fname=Henry&lname=Ford");
| 方法 | 描述 |
|---|---|
| setRequestHeader(header,value) |
向請求添加 HTTP 頭。
|
我們不推薦使用 async=false，但是對於一些小型的請求，也是可以的。JavaScript 會等到服務器響應就緒才繼續執行。如果服務器繁忙或緩慢，應用程序會掛起或停止。
如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
| 屬性 | 描述 |
|---|---|
| responseText | 獲得字符串形式的響應數據。 |
| responseXML | 獲得 XML 形式的響應數據。 |
如果來自服務器的響應並非 XML，請使用 responseText 屬性。
如果來自服務器的響應是 XML，而且需要作為 XML 對象進行解析，請使用 responseXML 屬性。
1 xmlDoc=xmlhttp.responseXML; 2 txt=""; 3 x=xmlDoc.getElementsByTagName("ARTIST"); 4 for (i=0;i<x.length;i++) 5 { 6 txt=txt + x[i].childNodes[0].nodeValue + "<br>"; 7 } 8 document.getElementById("myDiv").innerHTML=txt;
當請求被發送到服務器時，我們需要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。下面是 XMLHttpRequest 對象的三個重要的屬性：
| 屬性 | 描述 |
|---|---|
| onreadystatechange | 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。 |
| readyState |
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
|
| status | 200: "OK" 404: 未找到頁面 |
在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
回調函數是一種以參數形式傳遞給另一個函數的函數。如果您的網站上存在多個 AJAX 任務，那麽您應該為創建 XMLHttpRequest 對象編寫一個標準的函數，並為每個 AJAX 任務調用該函數。該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：
function myFunction() { loadXMLDoc("/try/ajax/ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }
示例1（創建一個簡單的XMLHttpRequest，從一個XML文件中返回數據）：
1 <html><!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 function loadXMLDoc(url) 6 { 7 var xmlhttp; 8 if (window.XMLHttpRequest) 9 {// code for IE7+, Firefox, Chrome, Opera, Safari 10 xmlhttp=new XMLHttpRequest(); 11 } 12 else 13 {// code for IE6, IE5 14 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 15 } 16 xmlhttp.onreadystatechange=function() 17 { 18 if (xmlhttp.readyState==4 && xmlhttp.status==200) 19 { 20 document.getElementById(‘A1‘).innerHTML=xmlhttp.status; 21 document.getElementById(‘A2‘).innerHTML=xmlhttp.statusText; 22 document.getElementById(‘A3‘).innerHTML=xmlhttp.responseText; 23 } 24 } 25 xmlhttp.open("GET",url,true); 26 xmlhttp.send(); 27 } 28 </script> 29 </head> 30 <body> 31 32 <h2>Retrieve data from XML file</h2> 33 <p><b>Status:</b><span id="A1"></span></p> 34 <p><b>Status text:</b><span id="A2"></span></p> 35 <p><b>Response:</b><span id="A3"></span></p> 36 <button onclick="loadXMLDoc(‘note.xml‘)">Get XML data</button> 37 38 </body> 39 </html>
示例2（檢索資源（文件）的頭信息）：
1 <html><!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 function loadXMLDoc(url) 6 { 7 var xmlhttp; 8 if (window.XMLHttpRequest) 9 {// code for IE7+, Firefox, Chrome, Opera, Safari 10 xmlhttp=new XMLHttpRequest(); 11 } 12 else 13 {// code for IE6, IE5 14 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 15 } 16 xmlhttp.onreadystatechange=function() 17 { 18 if (xmlhttp.readyState==4 && xmlhttp.status==200) 19 { 20 document.getElementById(‘p1‘).innerHTML=xmlhttp.getAllResponseHeaders(); 21 } 22 } 23 xmlhttp.open("GET",url,true); 24 xmlhttp.send(); 25 } 26 </script> 27 </head> 28 <body> 29 30 <p id="p1">The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.</p> 31 <button onclick="loadXMLDoc(‘/try/ajax/ajax_info.txt‘)">Get header information</button> 32 33 </body> 34 </html>
示例3（創建一個XMLHttpRequest從XML文件中檢索數據並顯示在一個HTML表格中）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 table,th,td { 7 border : 1px solid black; 8 border-collapse: collapse; 9 } 10 th,td { 11 padding: 5px; 12 } 13 </style> 14 </head> 15 <body> 16 17 <h1>XMLHttpRequest 對象</h1> 18 19 <button type="button" onclick="loadDoc()">獲取我收藏的 CD</button> 20 <br><br> 21 <table id="demo"></table> 22 23 <script> 24 function loadDoc() { 25 var xhttp = new XMLHttpRequest(); 26 xhttp.onreadystatechange = function() { 27 if (this.readyState == 4 && this.status == 200) { 28 myFunction(this); 29 } 30 }; 31 xhttp.open("GET", "cd_catalog.xml", true); 32 xhttp.send(); 33 } 34 function myFunction(xml) { 35 var i; 36 var xmlDoc = xml.responseXML; 37 var table="<tr><th>Artist</th><th>Title</th></tr>"; 38 var x = xmlDoc.getElementsByTagName("CD"); 39 for (i = 0; i <x.length; i++) { 40 table += "<tr><td>" + 41 x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + 42 "</td><td>" + 43 x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + 44 "</td></tr>"; 45 } 46 document.getElementById("demo").innerHTML = table; 47 } 48 </script> 49 50 </body> 51 </html>
示例4（用一個callback函數創建一個XMLHttpRequest，並從一個TXT文件中檢索數據）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 var xmlhttp; 6 function loadXMLDoc(url,cfunc) 7 { 8 if (window.XMLHttpRequest) 9 {// IE7+, Firefox, Chrome, Opera, Safari 代碼 10 xmlhttp=new XMLHttpRequest(); 11 } 12 else 13 {// IE6, IE5 代碼 14 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 15 } 16 xmlhttp.onreadystatechange=cfunc; 17 xmlhttp.open("GET",url,true); 18 xmlhttp.send(); 19 } 20 function myFunction() 21 { 22 loadXMLDoc("/try/ajax/ajax_info.txt",function() 23 { 24 if (xmlhttp.readyState==4 && xmlhttp.status==200) 25 { 26 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 27 } 28 }); 29 } 30 </script> 31 </head> 32 <body> 33 34 <div id="myDiv"><h2>使用 AJAX 修改文本內容</h2></div> 35 <button type="button" onclick="myFunction()">修改內容</button> 36 </body> 37 </html>
ajax異步傳輸之深入解析