AJAX（Asynchronous JavaScript And XML）是一種用于在不刷新整個(gè)頁(yè)面的情況下向后臺(tái)發(fā)送請(qǐng)求并獲取數(shù)據(jù)的技術(shù)。它的引入極大地提高了網(wǎng)頁(yè)的用戶(hù)體驗(yàn)，并且被廣泛應(yīng)用于各種Web應(yīng)用中。本文將介紹如何使用AJAX異步調(diào)取后臺(tái)接口，并通過(guò)舉例說(shuō)明其使用方法和優(yōu)勢(shì)。

首先，我們將從一個(gè)簡(jiǎn)單的例子開(kāi)始，假設(shè)我們有一個(gè)網(wǎng)頁(yè)上的表單，用戶(hù)在表單中輸入一個(gè)城市名稱(chēng)，并點(diǎn)擊查詢(xún)按鈕后，我們需要通過(guò)后臺(tái)接口獲取該城市的天氣信息，并將結(jié)果展示給用戶(hù)。在沒(méi)有使用AJAX的情況下，每次用戶(hù)點(diǎn)擊查詢(xún)按鈕后，都需要刷新整個(gè)頁(yè)面才能獲取到新的數(shù)據(jù)，這樣用戶(hù)體驗(yàn)非常不友好。

<form>
<input type="text" id="city" name="city" placeholder="請(qǐng)輸入城市名稱(chēng)">
<button type="button" onclick="getWeather()">查詢(xún)</button>
</form>
<div id="result"></div>
<script>
function getWeather() {
var city = document.getElementById("city").value;
// 創(chuàng)建XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
// 設(shè)置回調(diào)函數(shù)
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("result").innerHTML = response.weather;
}
};
// 發(fā)送請(qǐng)求
xhr.open("GET", "api/weather?city=" + city, true);
xhr.send();
}
</script>

上述代碼中，我們通過(guò)JavaScript創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，然后設(shè)置了一個(gè)回調(diào)函數(shù)，當(dāng)請(qǐng)求的狀態(tài)變化時(shí)，會(huì)自動(dòng)觸發(fā)該回調(diào)函數(shù)。在回調(diào)函數(shù)中，我們首先判斷請(qǐng)求的狀態(tài)是否為4（已完成），并且狀態(tài)碼是否為200（請(qǐng)求成功）。如果滿(mǎn)足這兩個(gè)條件，說(shuō)明請(qǐng)求已成功返回?cái)?shù)據(jù)，我們將返回的JSON格式的數(shù)據(jù)解析，并將天氣信息展示在網(wǎng)頁(yè)上。

使用AJAX的好處是，用戶(hù)不需要等待整個(gè)頁(yè)面刷新，只需等待后臺(tái)接口返回?cái)?shù)據(jù)并進(jìn)行局部更新，這大大提高了用戶(hù)體驗(yàn)。此外，由于AJAX是異步的，因此可以同時(shí)發(fā)送多個(gè)請(qǐng)求，而不需要等待前一個(gè)請(qǐng)求完成。

除了上述的GET請(qǐng)求，AJAX還支持POST請(qǐng)求。例如，當(dāng)用戶(hù)在表單中輸入用戶(hù)名和密碼后，點(diǎn)擊登錄按鈕時(shí)，我們可以使用AJAX將用戶(hù)輸入的數(shù)據(jù)發(fā)送給后臺(tái)接口進(jìn)行驗(yàn)證。

<form>
<input type="text" id="username" name="username" placeholder="請(qǐng)輸入用戶(hù)名">
<input type="password" id="password" name="password" placeholder="請(qǐng)輸入密碼">
<button type="button" onclick="login()">登錄</button>
</form>
<div id="message"></div>
<script>
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var data = "username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("message").innerHTML = response.message;
}
};
xhr.open("POST", "api/login", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
}
</script>

在上述代碼中，我們將用戶(hù)輸入的用戶(hù)名和密碼拼接成一個(gè)字符串，然后設(shè)置請(qǐng)求頭的Content-Type為application/x-www-form-urlencoded，最后發(fā)送POST請(qǐng)求到后臺(tái)接口。后臺(tái)接口接收到數(shù)據(jù)后進(jìn)行驗(yàn)證，并返回驗(yàn)證結(jié)果給前端。

總結(jié)來(lái)說(shuō)，AJAX可以實(shí)現(xiàn)在不刷新整個(gè)頁(yè)面的情況下向后臺(tái)發(fā)送請(qǐng)求并獲取數(shù)據(jù)。通過(guò)使用AJAX，我們可以提高用戶(hù)體驗(yàn)，并使用戶(hù)可以同時(shí)進(jìn)行多個(gè)請(qǐng)求。無(wú)論是GET請(qǐng)求還是POST請(qǐng)求，AJAX都可以輕松實(shí)現(xiàn)。因此，合理地運(yùn)用AJAX技術(shù)將為Web應(yīng)用帶來(lái)更好的交互體驗(yàn)。