概述
AJAX 是一個縮寫，它的全名是 Asynchronous JavaScript and XML，意思就是異步 JavaScript 和 XML，即用JavaScript執行異步網絡請求。
AJAX 不是一種新技術，而是一個在 2005 年被 Jesse James Garrett 提出的新術語，用來描述一種使用現有技術集合的‘新’方法，包括:
- HTML 或 XHTML
- CSS
- JavaScript
- DOM
- XML
- XSLT
- XMLHttpRequest
盡管 X 在 AJAX 中代表 XML, 但由於 JSON 的許多優勢，比如更加輕量以及作為 Javascript 的一部分，目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用於在 AJAX 模型中打包信息。
AJAX 的優勢
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。
AJAX 通過在后台與服務器進行少量數據交換，可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
XMLHttpRequest 對象
XMLHttpRequest（XHR）對象用於與服務器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請求特定 URL，獲取數據。這允許網頁在不影響用戶操作的情況下，更新頁面的局部內容。XMLHttpRequest 在 AJAX 編程中被大量使用。
AJAX 的工作原理
其工作原理基本經過以下幾個步驟：
- 客戶端發送請求，請求交給 xhr。
- xhr 把請求提交給服務。
- 服務器進行業務處理。
- 服務器響應數據交給 xhr 對象。
- xhr 對象接收數據，由 JavaScript 把數據寫到頁面上。
AJAX 的創建步驟
根據 AJAX 的工作原理，它的創建步驟主要包括：
- 創建 XMLHttpRequest 對象，即創建一個異步調用對象。
- 創建一個新的 HTTP 請求，並指定該 HTTP 請求的方法、URL 及驗證信息。
- 設置響應 HTTP 請求狀態變化的函數。
- 發送 HTTP 請求。
- 獲取異步調用返回的數據。
- 使用 JavaScript 和 DOM 實現局部刷新。
AJAX 的具體使用
以下是 使用 AJAX 的完整流程。
1. 創建 XMLHttpRequest 對象
const request = new XMLHttpRequest();
2. 創建一個新的 HTTP 請求，並指定該 HTTP 請求的方法、URL 及驗證信息
創建 HTTP 請求可以使用 XMLHttpReques t對象的 open() 方法,其語法代碼如下：
request.open(method, url, async, user, password);
參數解析：
- method 要使用的HTTP方法，比如 "GET"、"POST"、"PUT"、"DELETE" 等。
- url 表示要向其發送請求的 URL 地址。
- async (可選) 一個可選的布爾參數，表示是否異步執行操作，默認為 true。如果值為 false，send() 方法直到收到答復前不會返回。如果 true，已完成事務的通知可供事件監聽器使用。如果 multipart 屬性為 true 則這個必須為 true，否則將引發異常。
- user (可選 用於認證用途的用戶名，默認值為 null。
- password (可選) 用於認證用途的密碼，默認值為 null。
3. 設置響應 HTTP 請求狀態變化的函數和服務端返回信息函數
創建完 HTTP 請求之后，應該就可以將 HTTP 請求發送給 Web 服務器了。然而，發送 HTTP 請求的目的是為了接收從服務器中返回的數據。從創建 XMLHttpRequest 對象開始，到發送數據、接收數據、XMLHttpRequest 對象一共會經歷以下 5 種狀態：
- 未初始化狀態。在創建完 XMLHttpRequest 對象時，該對象處於未初始化狀態，此時 XMLHttpRequest 對象的 readyState 屬性值為 0。
- 初始化狀態。在創建完 XMLHttpRequest 對象后使用 open() 方法創建了 HTTP 請求時，該對象處於初始化狀態。此時 XMLHttpRequest 對象的readyState屬性值為 1。
- 發送數據狀態。在初始化 XMLHttpRequest 對象后，使用 send() 方法發送數據時，該對象處於發送數據狀態，此時XMLHttpRequest 對象的 readyState 屬性值為 2。
- 接收數據狀態。Web 服務器接收完數據並進行處理完畢之后，向客戶端傳送返回的結果。此時，XMLHttpRequest 對象處於接收數據狀態，XMLHttpRequest 對象的 readyState 屬性值為 3。
- 完成狀態。XMLHttpRequest 對象接收數據完畢后，進入完成狀態，此時 XMLHttpRequest 對象的 readyState 屬性值為 4。此時接收完畢后的數據存入在客戶端計算機的內存中，可以使用 responseText 屬性或 responseXml 屬性來獲取數據。
總的來說，readyState 屬性的值有以下幾種：
- 0 (未初始化) or (請求還未初始化)
- 1 (正在加載) or (已建立服務器鏈接)
- 2 (加載成功) or (請求已接受)
- 3 (交互) or (正在處理請求)
- 4 (完成) or (請求已完成並且響應已准備好)
只讀屬性 XMLHttpRequest.status 返回了 XMLHttpRequest 響應中的數字狀態碼。status 的值是一個無符號短整型。在請求完成前，status 的值為 0。值得注意的是，如果 XMLHttpRequest 出錯，瀏覽器返回的 status 也為0：
- UNSENT（未發送） 0
- OPENED（已打開） 0
- LOADING（載入中） 200
- DONE（完成） 200
var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState); // readyState 為 0
xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState); // readyState 為 1
xhr.onprogress = function () {
console.log('LOADING', xhr.readyState); // readyState 為 3
};
xhr.onload = function () {
console.log('DONE', xhr.readyState); // readyState 為 4
};
xhr.send(null);
只有在XMLHttpRequest對象完成了以上5個步驟之后，才可以獲取從服務器端返回的數據。因此，如果要獲得從服務器端返回的數據，就必須要先判斷XMLHttpRequest對象的狀態：
const xhr = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// do something here
}
}
4. 發送HTTP請求
XMLHttpRequest.send(data);
結束
最后，附上一個簡單的完整 AJAX 實例：
<button id="ajaxButton" type="button">Make a request</button>
<script>
var httpRequest;
document.getElementById("ajaxButton").addEventListener('click', makeRequest);
function makeRequest() {
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', 'test.html');
httpRequest.send();
}
function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
</script>
~
- ~
- 本文完
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好！我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！
知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！