JavaScript之Ajax同步

一．XMLHttpRequest
Ajax技術核心是XMLHttpRequest對象(簡稱XHR)，這是由微軟首先引入的一個特性，其他瀏覽器供應商後來都提供了相同的實現。在XHR出現之前，Ajax式的通訊必須藉助一些hack手段來實現，大多數是使用隱藏的架構或內嵌架構。
XHR的出現，提供了向伺服器發送請求和解析伺服器響應提供了流暢的介面。能夠以非同步方式從伺服器擷取更多的資訊，這就意味著，使用者只要觸發某一事件，在不重新整理網頁的情況下，補救伺服器最新的資料。
雖然Ajax中的x代表的是XML，但Ajax通訊和資料格式無關，也就是說這種技術不一定使用XML。
 
IE7+、Firefox、Opera、Chrome和Safari都支援原生的XHR對象，在這些瀏覽器中建立XHR對象可以直接執行個體化XMLHttpRequest即可。
var xhr = new XMLHttpRequest();
alert(xhr); //XMLHttpRequest
 
如果是IE6及以下，那麼我們必須還需要使用ActiveX對象通過MSXML庫來實現。在低版本IE瀏覽器可能會遇到三種不同版本的XHR對象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。我們可以編寫一個函數。

1. function createXHR() { 
2. if (typeof XMLHttpRequest != 'undefined') { 
3. return new XMLHttpRequest(); 
4. } else if  (typeof ActiveXObject != 'undefined') { 
5. var versions = [ 
6. 'MSXML2.XMLHttp.6.0', 
7. 'MSXML2.XMLHttp.3.0', 
8. 'MSXML2.XMLHttp' 
9. ]; 
10. for (var i = 0; i < versions.length; i ++) { 
11. try { 
12. return new ActiveXObject(version[i]); 
13. } catch (e) { 
14. //跳過 
15. }  
16. } 
17. } else { 
18. throw new Error('您的瀏覽器不支援XHR對象！'); 
19. } 
20. } 
21.   
22. var xhr = new createXHR(); 

 
在使用XHR對象時，先必須調用open()方法，它接受三個參數：要發送的請求類型(get、post)、請求的URL和表示是否非同步。
xhr.open('get', 'demo.php', false); //對於demo.php的get請求，false同步
 
PS：demo.php的代碼如下：
//一個時間
 
open()方法並不會真正發送請求，而只是啟動一個請求以備發送。通過send()方法進行發送請求，send()方法接受一個參數，作為請求主體發送的資料。如果不需要則，必須填null。執行send()方法之後，請求就會發送到伺服器上。
xhr.send(null); //發送請求
 
當請求發送到伺服器端，收到響應後，響應的資料會自動填滿XHR對象的屬性。那麼一共有四個屬性：
 

屬性名稱	說明
responseText	作為響應主體被返回的文本
responseXML	如果響應主體內容類型是"text/xml"或"application/xml"，則返回包含響應資料的XML DOM文檔
status	響應的HTTP狀態
statusText	HTTP狀態的說明

 
接受響應之後，第一步檢查status屬性，以確定響應已經成功返回。一般而已HTTP狀態碼為200作為成功的標誌。除了成功的狀態碼，還有一些別的：
 
 

HTTP狀態代碼	狀態字串	說明
200	OK	伺服器成功返回了頁面
400	Bad Request	語法錯誤導致伺服器不識別
401	Unauthorized	請求需要使用者認證
404	Not found	指定的URL在伺服器上找不到
500	Internal Server Error	伺服器遇到意外錯誤，無法完成請求
503	ServiceUnavailable	由於伺服器過載或維護導致無法完成請求

 
我們判斷HTTP狀態值即可，不建議使用HTTP狀態說明，因為在跨瀏覽器的時候，可能會不太一致。

1. addEvent(document, 'click', function () { 
2. var xhr = new createXHR(); 
3. xhr.open('get', 'demo.php?rand=' + Math.random(), false); //設定了同步 
4. xhr.send(null); 
5. if (xhr.status == 200) { //如果返回成功了 
6. alert(xhr.responseText); //調出伺服器返回的資料 
7. } else { 
8. alert('資料返回失敗！狀態碼：' + xhr.status + '狀態資訊：' + xhr.statusText); 
9. } 
10. }); 

 

//PS：如果沒有向伺服器端發送,firebug無發送提示，如果有send()方法，則firebug會提示已發送//PS：通過點擊事件，不斷的向伺服器發送請求，然後伺服器會時時的返回最新的資料，就是Ajax功能//PS：IE瀏覽器第一次會向伺服器端請求，擷取最新資料，而第二次它就預設擷取的快取資料，導致資料不是最新的//PS：怎麼處理緩衝？可以使用JS隨機字串

以上的代碼每次點擊頁面的時候，返回的時間都是時時的，不同的，說明都是通過伺服器及時載入回的資料。那麼我們也可以測試一下在非Ajax情況下的情況，建立一個demo2.php檔案，使用非Ajax。

1. <script type="text/javascript" src="base.js"></script> 
2. <script type="text/javascript"> 
3.     addEvent(document, 'click', function () { 
4.         alert("<?php echo Date('Y-m-d H:i:s')?>"); 
5.     }); 
6. </script>