在現(xiàn)代 Web 開發(fā)中，使用 Ajax 發(fā)送異步請求獲取后端數(shù)據(jù)是一種非常常見的方式。Ajax（Asynchronous JavaScript and XML）是一種在不刷新整個頁面的情況下，通過 JavaScript 進行異步通信的技術(shù)。利用 Ajax，前端可以向后端發(fā)送請求并獲取數(shù)據(jù)，然后將這些數(shù)據(jù)實時展示給用戶，提高用戶體驗。本文將介紹如何使用 Ajax 返回前端數(shù)據(jù)，并通過舉例來說明其具體應(yīng)用。

發(fā)送 Ajax 請求

要發(fā)送 Ajax 請求，首先需要創(chuàng)建一個 XMLHttpRequest 對象。例如，我們可以通過以下代碼來創(chuàng)建一個 XMLHttpRequest 對象：

var xhttp = new XMLHttpRequest();

創(chuàng)建完 XMLHttpRequest 對象后，我們可以使用它的 open() 方法來設(shè)置請求的類型、URL 和是否異步等參數(shù)。例如，我們可以通過以下代碼來設(shè)置一個 GET 請求：

xhttp.open("GET", "https://api.example.com/data", true);

接下來，我們可以使用 XMLHttpRequest 對象的 send() 方法來發(fā)送請求。對于 GET 請求，可以將參數(shù)作為 URL 的一部分，例如：

xhttp.open("GET", "https://api.example.com/data?param1=value1¶m2=value2", true);
xhttp.send();

對于 POST 請求，我們可以將參數(shù)作為 send() 方法的參數(shù)傳遞，例如：

xhttp.open("POST", "https://api.example.com/data", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("param1=value1¶m2=value2");

處理返回的數(shù)據(jù)

當(dāng)后端返回數(shù)據(jù)后，我們可以通過 XMLHttpRequest 對象的 readyState 和 status 屬性來判斷請求的狀態(tài)。readyState 屬性表示請求的當(dāng)前狀態(tài)，status 屬性表示請求的狀態(tài)碼。

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 處理返回的數(shù)據(jù)
}
};

在請求成功并返回數(shù)據(jù)后，將返回的數(shù)據(jù)保存在變量中，以便后續(xù)處理。例如：

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var responseData = this.responseText; // 返回的數(shù)據(jù)
// 處理返回的數(shù)據(jù)
}
};

根據(jù)后端返回的數(shù)據(jù)類型，我們可以使用不同的解析方法來解析數(shù)據(jù)。例如，如果是 JSON 格式的數(shù)據(jù)，可以使用 JSON.parse() 方法來將返回的字符串轉(zhuǎn)換為 JavaScript 對象。例如：

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var responseData = JSON.parse(this.responseText); // 將字符串轉(zhuǎn)換為對象
// 處理返回的數(shù)據(jù)
}
};

應(yīng)用舉例

下面舉一個使用 Ajax 返回前端數(shù)據(jù)的例子，假設(shè)我們的網(wǎng)頁上有一個按鈕，當(dāng)用戶點擊該按鈕時，通過 Ajax 請求后端接口獲取當(dāng)前時間，并將結(jié)果實時展示給用戶。

獲取當(dāng)前時間

在上述例子中，在用戶點擊按鈕后，我們創(chuàng)建了一個 XMLHttpRequest 對象，并發(fā)送了一個 GET 請求。當(dāng)請求成功并返回數(shù)據(jù)后，我們將返回的時間展示在網(wǎng)頁上。

結(jié)論

通過使用 Ajax 返回前端數(shù)據(jù)，可以實現(xiàn)與后端的異步通信，提高用戶體驗。我們可以使用 XMLHttpRequest 對象發(fā)送請求，并通過監(jiān)聽其狀態(tài)和狀態(tài)碼來處理返回的數(shù)據(jù)。根據(jù)后端返回的數(shù)據(jù)類型，可以使用不同的解析方法來解析數(shù)據(jù)。舉例中的按鈕獲取當(dāng)前時間的例子，展示了使用 Ajax 返回前端數(shù)據(jù)的實際應(yīng)用。

希望這篇文章能幫助你理解和使用 Ajax 返回前端數(shù)據(jù)。