JS AJAX請求的五個步驟

一、選擇合適的HTTP請求方法

在進行AJAX請求之前，需要明確執行何種HTTP請求方法。常見的HTTP方法有GET、POST、PUT、DELETE等。一般而言，GET方法用於數據的讀取，POST方法用於數據的提交，PUT方法用於數據的修改，DELETE方法用於刪除數據。選擇不同的HTTP方法將決定請求的結果。

比如，對於一個獲取用戶信息的請求，我們可以選擇GET方法，將請求發送到服務器，並將響應作為用戶信息返回。下面是一個簡單的GET請求的代碼示例：

    
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://example.com/api/users/1');
        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
            } else {
                console.log('請求失敗');
            }
        };
        xhr.send();
    

二、設置HTTP請求頭部信息

HTTP請求的頭部信息包含了請求的元數據，通常包括Content-Type、Accept、Authorization等字段。這些字段可以提供對請求的更細粒度控制，例如指定請求的數據類型、接受的響應格式以及身份驗證信息等。

對於一些需要特殊處理的請求，我們需要自行設置HTTP請求頭部信息。下面是一個常見的設置請求頭部信息的示例：

    
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://example.com/api/users');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('Authorization', 'Bearer ' + token);
        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
            } else {
                console.log('請求失敗');
            }
        };
        xhr.send(JSON.stringify(data));
    

三、構造HTTP請求體

HTTP請求的請求體包含了請求的具體數據，例如表單、JSON數據等。在有效載荷上發送數據主要使用POST和PUT方法，這兩個方法都可以具有請求體。通過請求體，我們可以向服務器傳遞數據，並讓服務器做出相應的操作。

下面是一個向服務器提交JSON數據的示例：

    
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://example.com/api/users');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
            } else {
                console.log('請求失敗');
            }
        };
        xhr.send(JSON.stringify({name: 'Tom', age: 18}));
    

四、發送HTTP請求

在完成HTTP請求的設置後，最後一步是將請求發送到服務器。我們可以通過XMLHttpRequest對象的send方法將請求發送到服務器，並等待服務器的響應。

下面是一個完整的POST請求的代碼示例：

    
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://example.com/api/users');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
            } else {
                console.log('請求失敗');
            }
        };
        xhr.send(JSON.stringify({name: 'Tom', age: 18}));
    

五、處理HTTP請求的響應

當服務器收到HTTP請求後，會返回一個HTTP響應，XMLHttpRequest對象可以通過xhr.status屬性獲取到響應的HTTP狀態碼，通過xhr.responseText屬性獲取到響應的數據。

在響應到達之後，我們根據響應的狀態碼和數據做出相應的處理。下面是一個獲取用戶信息的完整代碼示例：

    
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://example.com/api/users/1');
        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
                const user = JSON.parse(xhr.responseText);
                console.log("用戶信息：" + user.name + " " + user.age);
            } else {
                console.log('請求失敗');
            }
        };
        xhr.send();