JavaScript之AJAX：原生ajax入門

標籤：提交表單   2.x   params   mozilla   初始化   完成   其他   false   開發   

背景

      傳統的Web應用允許使用者端填寫表單（form），當提交表單時就向網頁伺服器發送一個請求。伺服器接收並處理傳來的表單，然後送回一個新的網頁，但這個做法浪費了許多頻寬，因為在前後兩個頁面中的大部分HTML碼往往是相同的。由於每次應用的溝通都需要向伺服器發送請求，應用的回應時間依賴於伺服器的回應時間。這導致了使用者介面的回應比本機應用慢得多。

      2005年2月18號，一位大佬，名叫Jesse James Garrett（傑西·詹姆斯·賈瑞特），發表了一篇文章叫做“Ajax: A new Approach to Web Applications”，介紹了一種技術叫做Asynchronous JavaScript and XML，這項技術能夠向伺服器請求額外的資料而不需要重新載入頁面，這樣就可以部分請求資料而不需要重新整理整個頁面，不僅僅節約了大量的頻寬，還加快了響應速度。

--摘自維基百科並稍作修改

XHR

      XHR全稱是XMLHttpRequest，可擴充超文本傳輸請求，是一個API，它通過URL在用戶端和伺服器端傳輸資料而不需要使頁面重新整理，提供了對 HTTP 協議的完全的訪問，是AJAX技術的核心對象，AJAX的請求過程可以據此分為四個部分：

1 建立 XMLHttpRequest 對象2 串連後台伺服器3 發送資料請求4 接收伺服器的響應資料；

      XHR對象在IE5中第一次引入，對象是通過MSXML庫中的一個ActiveX對象實現的。因而IE中可能遇到三種不同版本的XHR對象：MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。IE7+、Firefox、Opera、Chrome 和Safari 都支援原生的XHR 對象。

一、建立XMLHttpRequest 對象

      如果要相容IE7之前的瀏覽器的話，要根據不同的XHR版本來編寫函數，再建立ActiveXObject對象，而其他的瀏覽器，則可以直接建立 XMLHttpRequest 對象。代碼如下：

 1 function createXHR(){ 2     if (typeof XMLHttpRequest != "undefined"){ 3         return new XMLHttpRequest(); 4     } else if (typeof ActiveXObject != "undefined"){ 5         if (typeof arguments.callee.activeXString != "string"){ 6             var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", 7                     "MSXML2.XMLHttp"], 8                 i, len; 9             for (i=0,len=versions.length; i < len; i++){10                 try {11                     new ActiveXObject(versions[i]);12                     arguments.callee.activeXString = versions[i];13                     break;14                 } catch (ex){15                     //跳過16                 }17             }18         }19         return new ActiveXObject(arguments.callee.activeXString);20     } else {21         throw new Error("No XHR object available.");22     }23 }24 var xhr = createXHR();

 

      不過現在一般很少人想要相容IE7之前的版本了，於是可以簡化如下：

var xhr = new XMLHttpRequest();

二、串連伺服器與發送資料

      XMLHttpRequest串連伺服器也不難：

xhr.open(method, url, async, user, password)

      使用以上的open方法來初始化一個請求即可，open方法的參數說明如下：

method：請求所使用的HTTP方法; 例如 "GET", "POST", "PUT", "DELETE"等. 如果下個參數是非HTTP(S)的URL,則忽略該參數.url：該請求所要訪問的URLasync：一個可選的布爾值參數，預設為true,意味著是否執行非同步作業，如果值為false,則send()方法不會返回任何東西，直到接受到了伺服器的返回資料。如果為值為true，一個對開發人員透明的通知會發送到相關的事件監聽者。這個值必須是true,如果multipart 屬性是true，否則將會出現一個意外。user：使用者名稱,選擇性參數,為授權使用;預設參數為空白string.password：密碼,選擇性參數,為授權使用;預設參數為空白string.

 

       method方法中最常用的請求類型便是GET和POST，一般情況下：

1、GET用於向伺服器查詢某些資訊，而POST向伺服器發送要儲存的資料。2、GET將查詢字串參數追加到URL的末尾發給伺服器，而POST通過傳遞參數給send()方法發送資料。

      舉個栗子：

1 　　　　　if ( method == "GET") {2             xhr.open("GET",url + "?" + params, true);3             xhr.send(null);4         } else if ( method == "POST") {5             xhr.open("POST", url, true);6             //設定表單提交時的內容類型7             xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");8             xhr.send(params);9         }

 

      如上所示，GET請求是直接在URL後面添加 ？+parm_name=parm_value&……來傳遞資料，然後xhr.send(null)（註：null不能省略）

http://www.yourhost.com?username="myname"&password="123"

而POST請求則是類比表單提交，將頭部資訊設定為表單提交時的內容類型，然後將params當做send()方法的參數傳遞給伺服器。

三、接收伺服器的響應資料

      在調用send()方法後，請求便會派發到伺服器，伺服器對請求進行處理後作出響應。然後自動填滿到XHR對象的屬性中。

responseText：作為響應主體被返回的文本。responseXML：如果響應的內容類型是"text/xml"或"application/xml"，這個屬性中將儲存包含著響應資料的XML DOM 文檔。status：響應的HTTP 狀態。statusText：HTTP 狀態的說明。

      我們根據檢測XHR對象中的 readyState 屬性，可以擷取當前的響應狀態：

0：未初始化。尚未調用open()方法。1：啟動。已經調用open()方法，但尚未調用send()方法。2：發送。已經調用send()方法，但尚未接收到響應。3：接收。已經接收到部分響應資料。4：完成。已經接收到全部響應資料，而且已經可以在用戶端使用了。

      一般而言，我們只對狀態“4”感興趣，而 readyState 每次更改，都會觸發一次readystatechange監聽事件，因此，我們可以通過在監聽函數中判斷 readyState 的來判斷響應是否成功，並取得響應資料。

xhr.onreadystatechange = function(){    if (xhr.readyState == 4){        //200-300表示成功返回，304表示資源未修改        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){            //在這裡對響應資料進行處理（儲存、列印等）            console.log(xhr.responseText);        } else {            alert("Request was unsuccessful: " + xhr.status);        }    }};

至此，一次完整的AJAX請求就已經完成了：

 1 //建立 2 var xhr = createXHR(); 3 //監聽狀態、處理資料 4 xhr.onreadystatechange = function(){ 5     if (xhr.readyState == 4){ 6         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 7             //對xhr.responseText響應資料進行處理; 8         } else { 9             alert("Request was unsuccessful: " + xhr.status);10         }11     }12 };13 //串連14 xhr.open("get", "/xxx/xxx?param1=value1&param2=value2", true);15 //發送16 xhr.send(null);17 18 function createXHR(){19     if (typeof XMLHttpRequest != "undefined"){20         return new XMLHttpRequest();21     } else if (typeof ActiveXObject != "undefined"){22         if (typeof arguments.callee.activeXString != "string"){23             var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",24                     "MSXML2.XMLHttp"],25                 i, len;26             for (i=0,len=versions.length; i < len; i++){27                 try {28                     new ActiveXObject(versions[i]);29                     arguments.callee.activeXString = versions[i];30                     break;31                 } catch (ex){32                 }33             }34         }35         return new ActiveXObject(arguments.callee.activeXString);36     } else {37         throw new Error("No XHR object available.");38     }39 }

 

參考資料：

1、XMLHttpRequest-MDN

2、《JavaScript進階程式設計（第三版）》

JavaScript之AJAX：原生ajax入門