Ajax簡介

Ajax 的全稱是 Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），是一種用于創建動態網頁的技術，

Ajax 是一種使用現有標準的新方法，通過與服務器進行少量的資料交換，Ajax 可以使網頁實作異步更新，這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新，

Ajax的優缺點

Ajax 的優點：

• 最大的優點是頁面無重繪更新，用戶的體驗非常好
• 使用異步方式與服務器通信，具有更迅速的回應能力
• 可以將一些服務器作業轉移到客戶端，利用客戶端資源來處理，減輕服務器和帶寬的壓力，節約空間和帶寬租用成本
• 技術標準化，并被瀏覽器廣泛支持，不需要下載插件或者小程式

Ajax 的缺點：

• Ajax 不支持瀏覽器 back 回傳按鈕
• 有安全問題，Ajax 暴露了與服務器互動的細節
• 對搜索引擎不友好
• 破壞了程式的例外機制
• 不容易除錯

Ajax作業原理

在客戶端（如瀏覽器）和服務器之間加了一個中間層：Ajax 引擎，由 Ajax 引擎獨立向服務器請求資料，前端獲取到 Ajax 回傳的資料后，可以使用新資料來更新頁面、或進行其它操作，使用戶請求和服務器回應異步化，從而保證了在不重繪頁面的前提下可以區域更新網頁內容，

使用new XMLHttpRequest()命令來創建一個Ajax實體物件，

XMLHttpRequest類

Ajax 技術的核心是XMLHttpRequest類，簡稱 XHR，它允許腳本異步呼叫 HTTP API，

XMLHttpRequest 的兼容

在 IE7 之前的版本（IE5、IE6）并不支持XMLHttpRequest()建構式，它們需要使用ActiveX物件進行模擬：

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

XMLHttpRequest的兼容寫法可以是這樣的：

// 三元運算式,其中問號前面的是條件,當條件是正確的就執行冒號前面的陳述句,否則執行冒號后面的陳述句
var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

Ajax請求行程

創建 XMLHttpRequest 物件之后，發起 HTTP 請求的下一步是呼叫 XMLHttpRequest 物件的open方法，指定 HTTP 請求的兩個必需部分：請求方法 和 URL

var xhr = new XMLHttpRequest();
// 其中請求方法為大寫
xhr.open("GET", "/statics/demosource/demo_get_json.php");
//第一個引數用于指定 HTTP 請求的方法，不區分大小寫；
//該引數可取的值包括："GET"、"POST"、"HEAD"、"PUT"、"OPTIONS"、"DELETE"，其中，"GET" 和 "POST" 是得到廣泛支持的請求方法；
//第二個引數用于指定 HTTP 請求的 URL 地址，可以是 絕對URL 或 相對URL；
//第三個引數是可選的，可用布林值指定腳本是否以異步的方式呼叫此次 Ajax 請求；默認為true，

setRequestHeader 設定請求頭

如果 HTTP 請求需要設定請求頭，那么呼叫 open 方法之后的下個步驟就是設定它，使用的方法是：setRequestHeader

var xhr = new XMLHttpRequest();
xhr.open("POST", "/statics/demosource/demo_post_json.php");

// 在 open 方法之后設定請求頭
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//xhr.setRequestHeader(name, value)
//name：請求頭名稱，
//value：請求頭的值，

send 發送請求主體

使用 XMLHttpRequest 發起 HTTP 請求的最后一步是指定可選的請求主體、并向服務器發送它，使用的方法是：send

• 示例1：GET 請求

var xhr = new XMLHttpRequest();
xhr.open("GET", "/statics/demosource/demo_get_json.php");

// 無請求主體
xhr.send(null);
//由于 GET 請求 絕對 沒有請求主體，所以在呼叫 send 方法時可以傳遞 null 或 省略這個引數；

• 示例2：POST 請求

var xhr = new XMLHttpRequest();
xhr.open("POST", "/statics/demosource/demo_post_json.php");

// 把 msg 作為請求主體發送
xhr.send(msg);
//POST 請求通常都擁有請求主體，可在 send 方法中指定它；
//POST 請求的請求主體，應該匹配setRequestHeader方法所指定的 "Content-Type" 頭，

Ajax取得回應

一個完整的 HTTP 回應由 狀態碼、回應頭和 回應主體 組成，這三者都可以通過XMLHttpRequest物件提供的屬性和方法獲取，

為了能夠在 HTTP 回應準備就緒時得到通知，必須監聽XMLHttpRequest物件上的readystatechange事件，但為了理解這個事件型別，需要先了解下readyState屬性，因為該事件監聽的是readyState屬性值的改變，

readystatechange 事件的觸發時機是在 readyState 屬性值發生改變時觸發

readyState 屬性

readyState屬性是一個整數，它的值代表了不同的 HTTP 請求狀態，

readyState屬性值的含義：

• 0：初始值，表示請求未初始化，open方法尚未呼叫
• 1：啟動請求，open 方法已經呼叫，但尚未呼叫 send 方法
• 2：請求發送，已經呼叫 send 方法，但尚未接收到回應
• 3：接收回應，已經接受到部分回應資料，主要是回應頭
• 4：HTTP 回應完成，已經接收到全部回應資料，而且可以在客戶端使用

每次readyState屬性值的改變都會觸發readystatechange事件，但只有readyState屬性值為 4 時的狀態才表示 HTTP 的回應準備就緒，

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        // HTTP回應完成
    }
};

xhr.open("GET", "/statics/demosource/demo_get_json.php");
xhr.send();
//readyState的屬性值只代表此時的 HTTP 請求處于哪個階段：是發送了請求還是未發送請求，是只接收到了回應頭還是回應完成；
//"回應完成" 只代表 HTTP 請求結束，至于服務器的回應狀態：是請求成功還是請求錯誤，又或者是服務器錯誤，需要通過 HTTP 狀態碼判斷，它存盤在XMLhttpRequest的status屬性上； 

status 屬性

status屬性會以數字的形式保存服務器回應的 HTTP 狀態碼，諸如使用最頻繁的 "200" 表示請求成功，"404" 表示 URL 不能匹配服務器上的任何資源，

HTTP 狀態碼是用來表示網頁服務器回應狀態的 3 位數字代碼，所有狀態碼的第一個數字代表了回應的五種狀態之一：

• 1xx:臨時回應
• 2xx:成功
• 3xx:重定向
• 4xx:請求錯誤
• 5xx:服務器錯誤

示例：Ajax 請求失敗

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        // 獲取到回應資料，可執行一些請求成功的回呼函式
    } else {
        alert("請求失敗，HTTP 狀態碼為：" + xhr.status);
    }
};

xhr.open("GET", "/statics/demosource/404.txt");
xhr.send();

結果為：

responseText 屬性

responseText屬性以字串的形式存盤了回應主體，即：服務器的回應資料，

示例：回應HTML文本

xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) return;
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                    oView.innerHTML = xhr.responseText;
                }
            };

示例：回應 JSON 資料

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        // 使用JSON.parse把 回應資料轉換為json資料
        var res = JSON.parse(xhr.responseText);
        // 將回應資料中的date屬性賦值給oTime做內容
        oTime.innerText = res.date;
    }
};

• responseText：無論回傳的資料型別是什么，回應主體的內容都會保存在responseText屬性中
• responseXML：只對 XML 資料有效，若回應主體是非 XML 資料，該屬性值為null
• response：通常配合responseType使用，若指定了XMLHttpRequest實體的responseType屬性，則將回應內容轉換為該屬性所指定的格式并回傳，否則按默認情況處理

abort 中止請求

若 HTTP 請求的時間超出預期，可以呼叫XMLHttpRequest物件上的abort方法來中止 HTTP 請求，

示例：實作超時

var xhr = new XMLHttpRequest();
var timer = null;    // 用于存盤定時器標識

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        clearTimeout(timer);    // 未超時則取消定時器
    }
};

xhr.open("GET", "/statics/demosource/demo_get_json.php");
xhr.send();

// 2秒后中止此次 GET 請求
timer = setTimeout(function(){
    xhr.abort();
}, 2000)

GET 請求

GET 請求一般用于資訊獲取，它沒有請求主體，而是使用 URL 傳遞引數（即：傳遞資料給后臺），

GET 傳遞引數的方式分兩步：

1. 對所需發送的資料（具有名稱和值）執行普通的 URL 編碼，即：由一對對 "名稱=值" 組成（稱為：名/值對），每一對之間用 "&" 拼接，如 "name=value&name=value&...&name=value"；
2. 由于 名/值對 會附加在 URL 地址后面，因此在這串字符引數的最前面需要添加個 "?"，表示 URL 的 查詢引數 開始，

示例:傳遞表單資料

// GET請求的后端介面
var url = "/statics/demosource/demo_get_json.php";

// 獲取用戶輸入的表單資料
var country = document.getElementById("country").value,
    city = document.getElementById("city").value;

// 將需要傳遞的引數拼接為 "名稱=值" 對的形式
var query = "country=" + country + "&city=" + city;

// 在 query 前面添加個 "?"，再拼接后端介面
var queryURL = url + "?" + query;

// 發起GET請求：使用拼接好的 queryURL
ajaxGet(queryURL);

GET 請求的快取問題

對于 GET 請求，請求的結果會被瀏覽器快取，特別是在 IE 瀏覽器下，這時，如果 GET 請求的 URL 不變，那么請求的結果就是瀏覽器的快取（也就是上次 GET 請求的結果），

解決 GET 請求快取問題的辦法是：實時改變 GET 請求的 URL，只要 URL 不同，就不會取到瀏覽器的快取結果，

具體做法是：在 URL 末尾添加時間戳引數，由于時間戳可以精確到毫秒，從而保證了每次發起 GET 請求的時間不同，達到實時改變請求 URL 的目的，

var url = "/statics/demosource/demo_get_json.php";

// 在請求引數的最后附加時間戳引數 t
var query = "user=" + user + "&pwd=" + pwd + "&t=" + new Date().getTime();

var queryURL = url + "?" + query;
// ajax_get為自己封裝的請求物件，不是固定用法
ajax_get(queryURL);

POST 請求

POST 請求一般用于修改服務器上的資源，它需要發送一個請求主體，客戶端傳遞給服務器的資料就包含在這個請求主體中，

POST 請求使用 表單編碼 的方式來發送資料的關鍵步驟：

1. 對所需發送的資料（具有名稱和值）執行普通的 URL 編碼，即：像 GET 請求那樣拼接為 名/值 對的形式；
2. 將"Content-Type"請求頭的值設定為"application/x-www-form-urlencoded"，

"Content-Type"請求頭用于設定請求主體的編碼格式，

示例：

// 獲取用戶輸入的表單資料
var country = document.getElementById("country").value,
    city = document.getElementById("city").value;

// 將資料拼接為 名/值對 的形式
var query = "country=" + country + "&city=" + city;

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    // ... ... 省略事件處理程式
}

// 指定 POST 請求
xhr.open("POST", "/statics/demosource/demo_post_json.php");

// 設定請求主體的編碼方法
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// 發送請求主體（資料）
xhr.send(query);

"表單編碼" 只是對請求主體的一種編碼方式，并不是發送 HTML 表單資料所特有的，同樣的，資料往往都直接來自一個 JavaScript 物件，只需對 JavaScript 物件執行 URL 編碼

標籤：JavaScript

上一篇：【強烈推薦，超詳細，實操零失誤】node.js安裝 + npm安裝教程 + Vue開發環境搭建

下一篇：JavaScript HTML DOM 事件