前端 JS 之 AJAX 簡介及使用

隱逸王發表於2021-06-15
前端JS

概述

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 的工作原理

其工作原理基本經過以下幾個步驟：

  1. 客戶端傳送請求，請求交給 xhr。
  2. xhr 把請求提交給服務。
  3. 伺服器進行業務處理。
  4. 伺服器響應資料交給 xhr 物件。
  5. xhr 物件接收資料，由 JavaScript 把資料寫到頁面上。

AJAX 工作原理

AJAX 的建立步驟

根據 AJAX 的工作原理，它的建立步驟主要包括：

  1. 建立 XMLHttpRequest 物件，即建立一個非同步呼叫物件。
  2. 建立一個新的 HTTP 請求，並指定該 HTTP 請求的方法、URL 及驗證資訊。
  3. 設定響應 HTTP 請求狀態變化的函式。
  4. 傳送 HTTP 請求。
  5. 獲取非同步呼叫返回的資料。
  6. 使用 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>

AJAX-Logo

~

~
本文完

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好！我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！

相關文章