AJAX如何發送請求和接收響應數據

AJAX（Asynchronous JavaScript and XML）是一種用于在后臺與服務器進行數據交換的技術。通過AJAX，我們可以在不刷新整個頁面的情況下，實現數據的動態加載和更新。本文將介紹如何使用AJAX發送請求并接收響應的過程。

首先，我們需要創建一個XMLHttpRequest對象，該對象用于與服務器進行異步通信。然后，我們可以使用該對象發送HTTP請求，以獲取服務器返回的數據。最后，我們可以通過回調函數來處理從服務器接收到的響應數據。

舉個例子來說明。假設我們正在開發一個在線商城網站，并希望根據用戶輸入的關鍵字動態搜索相關的商品信息。

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
var keyword = '手機';
// 配置請求參數
xhr.open('GET', '/search?keyword=' + keyword, true);
// 發送請求
xhr.send();
// 定義回調函數，用于處理從服務器接收到的響應數據
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displaySearchResults(response);
}
};

以上代碼示例中，我們首先創建了一個XMLHttpRequest對象，并指定用戶輸入的關鍵字為"手機"。然后，我們通過xhr.open()方法配置了一個GET請求，請求的URL為"/search?keyword=手機"，其中的關鍵字將通過查詢字符串的形式傳遞給服務器。

通過xhr.send()方法，我們將請求發送到服務器端，并等待服務器的響應。

在xhr.onreadystatechange回調函數中，我們首先判斷請求的狀態是否為4（已完成）和響應的狀態碼是否為200（成功）。如果滿足這兩個條件，說明服務器返回的響應數據已經就緒，我們可以通過xhr.responseText獲取到響應的文本數據。

在這個例子中，我們假設服務器返回的是一個JSON格式的數據，通過JSON.parse()方法將文本數據解析為JavaScript對象。然后，我們調用displaySearchResults()函數來展示搜索結果。

除了GET請求，我們還可以使用POST請求來發送數據給服務器。POST請求適用于向服務器提交表單數據或其他大量數據的情況。

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('name', 'John');
formData.append('email', 'john@example.com');
// 配置請求參數
xhr.open('POST', '/submit', true);
// 發送請求
xhr.send(formData);
// 定義回調函數，用于處理從服務器接收到的響應數據
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayConfirmation(response);
}
};

以上代碼示例中，我們首先創建了一個XMLHttpRequest對象，并使用FormData對象來存儲要發送給服務器的數據。然后，我們通過xhr.open()方法配置了一個POST請求，請求的URL為"/submit"。

通過xhr.send(formData)方法，我們將請求以FormData對象的形式發送到服務器端。在服務器端，我們可以使用對應的后端語言來解析接收到的數據。

通過xhr.onreadystatechange回調函數，我們可以處理服務器返回的響應，就像GET請求的示例中一樣。

總結來說，AJAX技術可以幫助我們在不刷新整個頁面的情況下，實現數據的動態加載和更新。通過創建XMLHttpRequest對象、發送HTTP請求以及定義回調函數，我們可以與服務器進行異步通信，并處理從服務器接收到的響應數據。