Overriew: onReadyStateChange被回撥函式賦值，則能實現非同步呼叫，回撥函式直接操作DOM，則能實現區域性重新整理。那麼XMLHttpRequest的onReadyStateChange如何知道服務ready了呢？狀態如何change了呢（觀察者模式）？則是通過客戶端對服務的狀態詢問（定期輪詢）所實現的。

參考：http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html

詳解：

1. XMLHttpRequest 負責與伺服器端的通訊，其內部有很多重要的屬性：readyStatus=4，status=200等等。當XMLHttpRequest

操作一般就是直接操作DOM，所以AJAX能做到所謂的“無重新整理”使用者體驗。

1. document.getElementById("user1").innerHTML = "資料正在載入...";  
2.             if (xmlhttp.status == 200) {  
3.                 document.write(xmlhttp.responseText);  
4.             }  

2. 那麼在AJAX客戶端如何做到的非同步呢？實際上就是Javascript的回撥函式起的作用

提供一個回撥JavaScript函式，一旦伺服器響應可用，該函式就被執行

業務函式：

1. function castVote(rank) {  
2.   var url = "/ajax-demo/static-article-ranking.html";  
3.   var callback = processAjaxResponse;  
4.   executeXhr(callback, url);  
5. }  

1. function executeXhr(callback, url) {  
2.   // branch for native XMLHttpRequest object
3.   if (window.XMLHttpRequest) {  
4.     req = new XMLHttpRequest();  
5.     req.onreadystatechange = callback;  
6.     req.open("GET", url, true);  
7.     req.send()(null);  
8.   } // branch for IE/Windows ActiveX version
9.   elseif (window.ActiveXObject) {  
10.     req = new ActiveXObject("Microsoft.XMLHTTP");  
11.     if (req) {  
12.       req.onreadystatechange = callback;  
13.       req.open("GET", url, true);  
14.       req.send()();  
15.     }  
16.   }  
17. }  

req.onreadystatechange = callback
req.open("GET", url, true)

第一行定義了JavaScript回撥函式，一旦響應就緒它就自動執行，而req.open()方法中所指定的“true”標誌說明想要非同步執行該請求。
一旦伺服器處理完XmlHttpRequest並返回給瀏覽器，使用req.onreadystatechange指派所設定的回撥方法將被自動呼叫。

回撥函式：

1. function processAjaxResponse() {  
2.   if (req.readyState == 4) {  
3.     // only if "OK"
4.     if (req.status == 200) {  
5.       document.getElementById("user1").innerHTML = req.responseText;  
6.     } else {  
7.       alert("There was a problem retrieving the XML data:  
8. " + req.statusText);  
9.     }  
10.   }  
11. }  

Overriew: onReadyStateChange被回撥函式賦值，則能實現非同步呼叫，回撥函式直接操作DOM，則能實現區域性重新整理。那麼XMLHttpRequest的onReadyStateChange如何知道服務ready了呢？狀態如何change了呢（觀察者模式）？則是通過客戶端對服務的狀態詢問（定期輪詢）所實現的。

參考：http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html

詳解：

1. XMLHttpRequest 負責與伺服器端的通訊，其內部有很多重要的屬性：readyStatus=4，status=200等等。當XMLHttpRequest的整體狀態並且保證它已經完成（readyStatus=4），即資料已經發送完畢。然後根據伺服器的設定詢問（類似於客戶端會輪詢伺服器的返回狀態，仍然是http短連線,並非長連線的伺服器端push）請求狀態，如果一切已經就緒（status=200），那麼就執行需要的操作。

操作一般就是直接操作DOM，所以AJAX能做到所謂的“無重新整理”使用者體驗。

1. document.getElementById("user1").innerHTML = "資料正在載入...";  
2.             if (xmlhttp.status == 200) {  
3.                 document.write(xmlhttp.responseText);  
4.             }  

2. 那麼在AJAX客戶端如何做到的非同步呢？實際上就是Javascript的回撥函式起的作用

提供一個回撥JavaScript函式，一旦伺服器響應可用，該函式就被執行

業務函式：

1. function castVote(rank) {  
2.   var url = "/ajax-demo/static-article-ranking.html";  
3.   var callback = processAjaxResponse;  
4.   executeXhr(callback, url);  
5. }  

1. function executeXhr(callback, url) {  
2.   // branch for native XMLHttpRequest object
3.   if (window.XMLHttpRequest) {  
4.     req = new XMLHttpRequest();  
5.     req.onreadystatechange = callback;  
6.     req.open("GET", url, true);  
7.     req.send()(null);  
8.   } // branch for IE/Windows ActiveX version
9.   elseif (window.ActiveXObject) {  
10.     req = new ActiveXObject("Microsoft.XMLHTTP");  
11.     if (req) {  
12.       req.onreadystatechange = callback;  
13.       req.open("GET", url, true);  
14.       req.send()();  
15.     }  
16.   }  
17. }  

req.onreadystatechange = callback
req.open("GET", url, true)

第一行定義了JavaScript回撥函式，一旦響應就緒它就自動執行，而req.open()方法中所指定的“true”標誌說明想要非同步執行該請求。
一旦伺服器處理完XmlHttpRequest並返回給瀏覽器，使用req.onreadystatechange指派所設定的回撥方法將被自動呼叫。

回撥函式：

1. function processAjaxResponse() {  
2.   if (req.readyState == 4) {  
3.     // only if "OK"
4.     if (req.status == 200) {  
5.       document.getElementById("user1").innerHTML = req.responseText;  
6.     } else {  
7.       alert("There was a problem retrieving the XML data:  
8. " + req.statusText);  
9.     }  
10.   }  
11. }  

轉載自：http://blog.csdn.net/fyxxq/article/details/22219361