[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請求狀態

狀態	名	解釋
0：未初始化	UNSENT	還沒有調用open()方法
1：啓動	OPENED	已經調用open()方法，已創建服務器鏈接，但還沒有調用send()方法
2：發送	HEADERS_RESPONSE	已經調用send()方法，請求已接受，但還沒有接受到響應拿不到響應體(responseText)，此時能夠拿到頭.getAllResponseHeaders()
3：接收	LOADING	已經接收到部分響應數據
4：完成	DONE	已經接收到所有響應數據，並且能夠在客戶端使用

xhr.status響應碼

查看MDN中HTTP響應碼

xhr.responseText

服務器以文本字符的形式返回

xhr.responseXML

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

 

本文連接集

跨域問題  HTTP access control

HTTP全部響應碼 MDN