今天我們要討論的是AJAX獲取請(qǐng)求返回的response。在編寫網(wǎng)頁(yè)時(shí)，我們經(jīng)常需要從服務(wù)器中獲取數(shù)據(jù)或者發(fā)送數(shù)據(jù)到服務(wù)器。在傳統(tǒng)的網(wǎng)頁(yè)編程中，我們需要通過(guò)刷新整個(gè)網(wǎng)頁(yè)來(lái)獲取最新的數(shù)據(jù)。但是，這樣的方式會(huì)導(dǎo)致用戶體驗(yàn)不佳，因?yàn)檎麄€(gè)頁(yè)面都會(huì)被刷新。而AJAX技術(shù)的出現(xiàn)，可以實(shí)現(xiàn)異步加載數(shù)據(jù)，只更新頁(yè)面的某一部分，提高用戶體驗(yàn)。

AJAX使用JavaScript和XMLHttpRequest對(duì)象來(lái)實(shí)現(xiàn)數(shù)據(jù)的異步加載。當(dāng)我們向服務(wù)器發(fā)送請(qǐng)求時(shí)，服務(wù)器會(huì)將請(qǐng)求的結(jié)果以response的形式返回給客戶端。這個(gè)response可以是各種數(shù)據(jù)格式，例如HTML片段、JSON數(shù)據(jù)或者XML數(shù)據(jù)。我們可以通過(guò)JavaScript代碼來(lái)獲取這個(gè)response，并將其顯示在網(wǎng)頁(yè)上。

下面我們通過(guò)一個(gè)例子來(lái)演示如何通過(guò)AJAX獲取請(qǐng)求返回的response。假設(shè)我們有一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，其中有一個(gè)按鈕，當(dāng)用戶點(diǎn)擊這個(gè)按鈕時(shí)，網(wǎng)頁(yè)會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求，獲取最新的新聞列表。服務(wù)器會(huì)將新聞列表以JSON格式返回給客戶端。我們需要將這個(gè)返回的response取出，并將新聞列表顯示在網(wǎng)頁(yè)上。

// JavaScript代碼示例
var button = document.getElementById("btn");
button.addEventListener("click", function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.example.com/news", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var newsList = document.getElementById("news-list");
response.forEach(function(news) {
var item = document.createElement("li");
item.innerText = news.title;
newsList.appendChild(item);
});
}
};
xhr.send();
});

在上面的代碼中，我們首先通過(guò)getElementById方法獲取到按鈕元素，并給它添加了一個(gè)點(diǎn)擊事件的監(jiān)聽器。當(dāng)用戶點(diǎn)擊按鈕時(shí)，點(diǎn)擊事件會(huì)被觸發(fā)。在點(diǎn)擊事件的回調(diào)函數(shù)中，我們創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，打開一個(gè)GET請(qǐng)求，將請(qǐng)求的URL設(shè)置為http://www.example.com/news，并將異步標(biāo)志設(shè)置為true。

然后，我們給XMLHttpRequest對(duì)象的onreadystatechange屬性設(shè)置了一個(gè)回調(diào)函數(shù)。這個(gè)回調(diào)函數(shù)會(huì)在每次 readyState 屬性發(fā)生變化時(shí)被觸發(fā)。readyState 屬性表示請(qǐng)求的狀態(tài)，有五個(gè)可能的值：0表示未初始化，1表示正在加載，2表示已加載，3表示交互中，4表示完成。只有當(dāng)readyState為4且status為200時(shí)，表示服務(wù)器返回的response已經(jīng)準(zhǔn)備完畢，我們可以對(duì)它進(jìn)行處理。

在回調(diào)函數(shù)中，我們首先通過(guò)xhr.responseText獲取到服務(wù)器返回的response，它是一個(gè)字符串形式的JSON數(shù)據(jù)。然后，我們通過(guò)JSON.parse方法將這個(gè)字符串解析成一個(gè)JavaScript對(duì)象，并遍歷其中的每一條新聞。對(duì)于每一條新聞，我們創(chuàng)建一個(gè)li元素，并將其title屬性作為li元素的文本內(nèi)容。最后，我們將這個(gè)li元素添加到id為news-list的元素中，實(shí)現(xiàn)將新聞列表顯示在網(wǎng)頁(yè)上的功能。

AJAX獲取請(qǐng)求返回的response可以說(shuō)是現(xiàn)代網(wǎng)頁(yè)開發(fā)中非常重要的一個(gè)功能。通過(guò)異步加載數(shù)據(jù)，我們可以提高網(wǎng)頁(yè)的性能和用戶體驗(yàn)。上面的例子只是一個(gè)簡(jiǎn)單的示例，實(shí)際應(yīng)用中，我們可以根據(jù)具體的需求，處理不同類型的response，并將其展示在網(wǎng)頁(yè)上。