AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個(gè)頁(yè)面的情況下從服務(wù)器異步獲取數(shù)據(jù)的技術(shù)。通過(guò)AJAX，我們可以通過(guò)發(fā)送請(qǐng)求并在后臺(tái)與服務(wù)器通信獲取數(shù)據(jù)，然后在網(wǎng)頁(yè)上動(dòng)態(tài)更新數(shù)據(jù)，而不需要整個(gè)頁(yè)面重新加載。本文將討論如何使用AJAX獲取數(shù)據(jù)并將其顯示在頁(yè)面上的不同位置。
作為一個(gè)示例，假設(shè)我們正在開(kāi)發(fā)一個(gè)電子商務(wù)網(wǎng)站，并且我們想要顯示商品的價(jià)格和庫(kù)存。我們可以使用AJAX從服務(wù)器獲取這些數(shù)據(jù)，并將其顯示在網(wǎng)頁(yè)的不同位置上。
1. 首先，我們需要在網(wǎng)頁(yè)上指定一個(gè)用于顯示商品價(jià)格的位置。這可以是一個(gè)
<div id="price"></div>
2. 接下來(lái)，我們使用JavaScript中的AJAX請(qǐng)求從服務(wù)器獲取商品價(jià)格的數(shù)據(jù)。使用XMLHttpRequest對(duì)象的open()和send()方法可以發(fā)送AJAX請(qǐng)求：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/getPrice', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var price = response.price;
document.getElementById('price').innerHTML = '價(jià)格：' + price + '元';
}
};
xhr.send();在這個(gè)示例中，我們發(fā)送了一個(gè)GET請(qǐng)求到"https://api.example.com/getPrice"，并在服務(wù)器響應(yīng)成功后更新了頁(yè)面上ID為"price"的元素的內(nèi)容。服務(wù)器返回的響應(yīng)是一個(gè)包含商品價(jià)格的JSON對(duì)象，我們通過(guò)解析這個(gè)對(duì)象并將價(jià)格顯示到頁(yè)面上。
3. 同樣地，我們可以在網(wǎng)頁(yè)上指定用于顯示商品庫(kù)存的位置。例如：
<div id="stock"></div>
4. 在關(guān)于庫(kù)存的AJAX請(qǐng)求中，我們將類似的代碼放在一個(gè)新的XMLHttpRequest對(duì)象中，并發(fā)送到適當(dāng)?shù)姆?wù)器URL：
var xhr2 = new XMLHttpRequest();
xhr2.open('GET', 'https://api.example.com/getStock', true);
xhr2.onreadystatechange = function() {
if (xhr2.readyState === 4 && xhr2.status === 200) {
var response = JSON.parse(xhr2.responseText);
var stock = response.stock;
document.getElementById('stock').innerHTML = '庫(kù)存：' + stock + '件';
}
};
xhr2.send();通過(guò)這種方式，我們可以使用AJAX從服務(wù)器獲取商品價(jià)格和庫(kù)存的數(shù)據(jù)，并將其分別顯示在網(wǎng)頁(yè)的指定位置。
總結(jié)而言，使用AJAX可以幫助我們?cè)诓凰⑿抡麄€(gè)頁(yè)面的情況下獲取數(shù)據(jù)并將其動(dòng)態(tài)更新到網(wǎng)頁(yè)上。通過(guò)定義不同的位置來(lái)展示數(shù)據(jù)，我們可以將AJAX的結(jié)果顯示在網(wǎng)頁(yè)的合適位置。