Ajax-基礎學習

AJAX原理

Asynchronous JavaScript and XML，能夠異步請求服務器數據而且無需重新加載整個頁面的技術。

Ajax的核心是XMLHttpRequest（XHR）對象，XHR向服務器發送異步請求獲得新數據，通過DOM將新數據動態添加到頁面中。

XMLHttpRequest

創建XHR對象

IE7+、Firefox、Chrome、Safari 、Opera可以直接使用XMLHttpRequest對象；
在IE5，IE6需要使用 ActiveXObject對象。

var xhr;
if(window.XMLHttpRequest){
    xhr =new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

發送請求

調用open(method,url,async)方法，啓動一個請求準備發送。

其中：

• method:要發送的請求類型，GET,POST。
• url：請求的url
• async：布爾值，表示是否異步發送請求，true異步，false同步。異步請求時在調用send()方法後不會等服務器響應，直接執行JS代碼，同步請求時會等到服務器響應之後再執行。

xhr.open("GET", "example.php", true);

調用send()方法發送請求。

send()方法接收一個參數，作爲請求中發送的數據，如果不需要發送數據，則需要傳入null，因爲有些瀏覽器必須傳入參數。

send(null);

響應

收到響應請求之後，響應的數據會自動填充XHR對象的屬性。

• responseText：作爲響應主體被返回的文本。
• responseXML：如果響應的內容類型是“text/xml”或“application/xml”，這個屬性中將包含響應數據的XML DOM文檔。
• status：響應的HTTP狀態。
• statusText：HTTP狀態的說明。
• readyState：請求/響應過程的當前活動階段。
• readystatechange：readyState改變時觸發事件。

readyState的狀態值：

• 0：XHR對象已建立，還沒有調用open()方法。
• 1：啓動。已經調用open()方法，但未調用send()方法。
• 2：發送。已經調用send()方法，但未接收到響應。
• 3：接收中。已經接收到部分響應數據。
• 4：完成。已經接收到全部響應數據，並且可以在客戶端使用。

readyState的每次狀態變化，都會觸發一次readystatechange事件。可以通過檢測readyState的每次狀態變化，並且在readyState爲4時進行數據處理。onreadystatechange事件需要在open之前指定才能確保跨瀏覽器兼容性。

var xhr;
if(window.XMLHttpRequest){
    xhr =new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        alert(xhr.responseText);
    }else{
        alert(xhr.status);
    }
}
xhr.open("GET", url, true);
xhr.send(null);

HTTP頭部信息

默認情況下，在發送XHR請求時還會發送以下頭部信息：

• Accept： 瀏覽器能夠處理的類型。
• Accept-Charset：瀏覽器能夠顯示的字符集。
• Accept-Encoding：瀏覽器能夠處理的壓縮編碼。
• Accept-Language：瀏覽器當前設置的語言。
• Connection：瀏覽器與服務器之間連接的類型。
• Cookie：當前頁面設置的任何Cookie。
• Host：發出請求頁面所在的域。
• referer：發出請求頁面的URI。

• User-Agent：瀏覽器的用戶代理字符串。

  使用setRequestHeader()可以設置自定義的請求頭部信息。接收兩個參數：頭部字段的名稱和值。需要在調用open()之後，調用send()之前調用。

xhr.open("GET", url, true);
xhr.setRequestHeader("header","value");
xhr.send(null);

服務器接收自定義的頭部信息後，可以執行相應的後續操作。有的瀏覽器不允許使用瀏覽器正常發送字段名稱，因此儘量用自定義的頭部字段名稱。

使用getResponseHeader()，並傳入頭部字段名稱，可以取得相應頭部信息；
使用getAllResponseHeader()可以取得包含所有頭部信息的長字符串。

POST
POST請求用於向服務器發送應該被保存的數據。POST請求應該把數據作爲請求的主體提交，向send()方法中傳入數據，可以傳入XML DOM，也可以傳入任何想發送到服務器的字符串。
通過XHR模擬表單提交，將Content-Type頭部信息設爲application/x-www-form-urlencode，並且序列化處理數據。

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("idForm");
xhr.send(serialize(form));