Ajax（Asynchronous JavaScript and XML）是一種前后臺(tái)數(shù)據(jù)交互的技術(shù)，通過(guò)在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，實(shí)現(xiàn)前后臺(tái)之間的數(shù)據(jù)傳輸和通信。它通過(guò)異步請(qǐng)求和響應(yīng)機(jī)制，能夠使頁(yè)面實(shí)時(shí)更新而不影響用戶的操作體驗(yàn)。下面我們將通過(guò)一個(gè)實(shí)例來(lái)深入了解Ajax的應(yīng)用。

假設(shè)我們正在開發(fā)一個(gè)在線電影票購(gòu)買網(wǎng)站，當(dāng)用戶選擇某一部電影并點(diǎn)擊“購(gòu)買”按鈕后，需要將用戶選擇的電影信息發(fā)送給后臺(tái)服務(wù)器進(jìn)行處理，并顯示購(gòu)買成功的提示信息給用戶。

<button onclick="buyTicket()">購(gòu)買</button>
<script>
function buyTicket() {
// 創(chuàng)建XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
// 設(shè)置請(qǐng)求方法和URL
var url = "http://example.com/buy_ticket";
xhr.open("POST", url, true);
// 設(shè)置請(qǐng)求頭
xhr.setRequestHeader("Content-Type", "application/json");
// 定義響應(yīng)處理函數(shù)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
alert("購(gòu)買成功！");
} else {
alert("購(gòu)買失敗，請(qǐng)稍后重試。");
}
}
};
// 發(fā)送請(qǐng)求
var movie = {
name: "Avatar",
time: "2022-01-01 20:00:00",
cinema: "ABC影城",
seat: "A01"
};
xhr.send(JSON.stringify(movie));
}
</script>

在上述代碼中，我們定義了一個(gè)名為buyTicket()的函數(shù)，該函數(shù)將在用戶點(diǎn)擊“購(gòu)買”按鈕時(shí)觸發(fā)。在函數(shù)內(nèi)部，我們首先創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，該對(duì)象用于處理與后臺(tái)服務(wù)器的通信。然后，我們使用open()方法設(shè)置請(qǐng)求的方法和URL，這里使用了POST方法，并指定了后臺(tái)服務(wù)的URL地址。setRequestHeader()方法用于設(shè)置請(qǐng)求頭，這里設(shè)置了Content-Type為application/json，表示請(qǐng)求體的數(shù)據(jù)格式為JSON。

接下來(lái)，我們定義了onreadystatechange函數(shù)，該函數(shù)用于處理后臺(tái)服務(wù)器的響應(yīng)。在這個(gè)函數(shù)內(nèi)部，我們首先判斷響應(yīng)的狀態(tài)（readyState為4表示請(qǐng)求已完成，status為200表示請(qǐng)求成功）。如果請(qǐng)求成功，我們將響應(yīng)的內(nèi)容解析為JSON對(duì)象，并判斷是否購(gòu)買成功，根據(jù)結(jié)果顯示對(duì)應(yīng)的提示信息。

最后，我們使用send()方法發(fā)送請(qǐng)求。在這里，我們構(gòu)造了一個(gè)電影信息的JSON對(duì)象，并將其通過(guò)JSON.stringify()方法轉(zhuǎn)換為JSON字符串，然后傳遞給send()方法，作為請(qǐng)求體發(fā)送給后臺(tái)服務(wù)器。

通過(guò)上述代碼，當(dāng)用戶點(diǎn)擊“購(gòu)買”按鈕時(shí)，就會(huì)觸發(fā)Ajax請(qǐng)求，將用戶選擇的電影信息發(fā)送給后臺(tái)服務(wù)器。后臺(tái)服務(wù)器接收到請(qǐng)求后，將進(jìn)行相應(yīng)的處理，并返回處理結(jié)果給前端頁(yè)面。前端頁(yè)面根據(jù)處理結(jié)果，顯示購(gòu)買成功或失敗的提示信息，提高了用戶體驗(yàn)。