[Ajax]（一）原生js中的Ajax

概述

AJAX是非同步的JavaScript和XML（Asynchronous JavaScript And XML）。簡單點說，就是使用 XMLHttpRequest 對象與伺服器通信。 它可以使用JSON，XML，HTML和text文本等格式發送和接收數據。AJAX最吸引人的就是它的“非同步”特性，也就是說他可以在不重新刷新頁面的情況下與伺服器通信，交換數據，或更新頁面。

你可以使用AJAX最主要的兩個特性做下列事：

• 在不重新載入頁面的情況下發送請求給伺服器。

• 接受並使用從伺服器發來的數據。

快速上手

var xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); // ie7+等現代瀏覽器
} else if (window.ActiveXObject) { // ie6，老版Opera
    xhr = new ActiveXObject('Microsft.XMLHTTP');
}
xhr.open('get', 'db.json', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () { 
    if (xhr.readyState == 4 && xhr.status == 200) {
        /* 
        readyState 請求的當前狀態
        status     響應碼
        */
        xhr.responseText;
        JSON.parse(xhr.responseText);
    }
}
xhr.send();

發送HTTP請求具體步驟

1.創建一個非同步調用對象xhr

var xhr = null; // 創建非同步對象
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); // ie7+等現代瀏覽器
} else if (window.ActiveXObject) { // ie6，老版Opera
    xhr = new ActiveXObject('Microsft.XMLHTTP');
}

2.初始化一個請求

xhr.open()聲明當你接到響應後要做什麼，你要發送一個實際的請求，通過調用HTTP請求對象的 open() 和 send() 方法，像下麵這樣:

xhr.open('GET', 'db.json', true);

• 第一個參數是HTTP請求方法 。有GET，POST，HEAD以及伺服器支持的其他方法。 保證這些方法一定要是大寫字母，否則其他一些瀏覽器（比如FireFox）可能無法處理這個請求。
• 第二個參數是你要發送的URL。由於安全原因，預設不能調用第三方URL功能變數名稱。 確保你在頁面中使用的是正確的功能變數名稱，否則在調用 open() 方法是會有 “許可權被拒絕” 錯誤提示。一個容易犯的錯誤是你企圖通過 domain.tld 訪問網站， 而不是使用 www.domain.tld。如果你真的需要向另一個功能變數名稱發送請求, 可以查看 HTTP access control。
• 第三個參數是可選的，用於設置請求是否是非同步的。如果設為 true (預設設置)，JavaScript執行會持續，並且在伺服器還沒有響應的情況下與頁面進行交互。

如果是GET請求，可以將查詢字元串參數追加到URL的末尾，以便將信息發送給伺服器。

如果是POST請求的話，要設置請求頭的值，且查詢字元串應該用伺服器可以解析的格式

3.設置http請求頭的值

xhr.setRequestsHeader()如果你使用 POST 數據，必須設置，且請求報文中請求頭的Content-Type應該跟隨請求體格式的變化而變化

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('key1=value1&key2=value2');

xhr.setRequestHeader('Content-Type', 'application/json');
httpRequest.send('{"foo":"123"}');

4.發送請求

xhr.send()參數可以是任何你想發送給伺服器的內容。

如果是POST請求的話，發送表單數據時應該用伺服器可以解析的格式，且一定要設置請求頭，像查詢語句：

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
//或者其他格式, 類似 multipart/form-data，JSON，XML等。

處理伺服器響應

xhr.onreadystatechange

這一步只在你發起非同步請求時有效（既 open() 的第三個參數未特別指定或設為 true），只要readyState屬性的值由一個值變成另一個，都會觸發一次readystatechange事件。

如果你發起的是同步請求則不必使用函數，但是非常不推薦這樣子做，它的用戶體驗很糟糕。

xhr.onreadystatechange = function () { // 若為同步，此代碼不用寫，直接在send後，用`xhr.responseText`即可。
    if (xhr.readyState == 4 && xhr.status == 200) {
       //在檢查完請求狀態和HTTP響應碼後， 你就可以用伺服器返回的數據做任何你想做的了
        xhr.responseText;
        JSON.parse(xhr.responseText);
    }
}

xhr.readyState請求狀態

xhr.status響應碼

查看MDN中HTTP響應碼

xhr.responseText

伺服器以文本字元的形式返回

xhr.responseXML

以 XMLDocument 對象方式返回，之後就可以使用JavaScript來處理

本文鏈接集

跨域問題  HTTP access control

HTTP所有響應碼 MDN