本文將介紹Ajax從HTML請(qǐng)求數(shù)據(jù)的格式，并給出一些具體的代碼示例。Ajax是一種在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，通過(guò)與服務(wù)器進(jìn)行異步通信獲取數(shù)據(jù)的技術(shù)。它可以使網(wǎng)頁(yè)實(shí)現(xiàn)動(dòng)態(tài)更新，提高用戶(hù)的交互體驗(yàn)。

在Ajax中，使用HTTP協(xié)議來(lái)發(fā)送請(qǐng)求并獲取數(shù)據(jù)。常見(jiàn)的請(qǐng)求方法有GET和POST，它們?cè)谔峤粩?shù)據(jù)時(shí)有所不同。GET請(qǐng)求將數(shù)據(jù)附加在URL上，而POST請(qǐng)求則將數(shù)據(jù)放在請(qǐng)求體中。下面是一個(gè)使用GET請(qǐng)求從服務(wù)器獲取數(shù)據(jù)的示例：

const url = 'http://example.com/data?id=1';
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
// 處理獲取到的數(shù)據(jù)
}
};
xhr.send();

上述代碼中，我們使用了XMLHttpRequest對(duì)象來(lái)發(fā)送GET請(qǐng)求。在發(fā)送請(qǐng)求之前，我們需要通過(guò)open方法指定請(qǐng)求的方法和URL，并設(shè)置異步標(biāo)志位為true。通過(guò)onreadystatechange事件監(jiān)聽(tīng)xhr對(duì)象的狀態(tài)變化，在狀態(tài)碼為4（即請(qǐng)求已完成）且響應(yīng)狀態(tài)為200（即成功）時(shí)，表示獲取數(shù)據(jù)成功。通過(guò)解析響應(yīng)的文本內(nèi)容，我們可以得到服務(wù)器返回的數(shù)據(jù)并進(jìn)行處理。

除了GET請(qǐng)求，我們還可以使用POST請(qǐng)求向服務(wù)器發(fā)送數(shù)據(jù)。下面是一個(gè)使用POST請(qǐng)求將數(shù)據(jù)發(fā)送給服務(wù)器的示例：

const url = 'http://example.com/save';
const data = {
name: 'John',
age: 25
};
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
// 處理服務(wù)器返回的響應(yīng)數(shù)據(jù)
}
};
xhr.send(JSON.stringify(data));

在這個(gè)例子中，我們將一些數(shù)據(jù)封裝到一個(gè)JavaScript對(duì)象中，并使用JSON.stringify方法將其轉(zhuǎn)換成JSON字符串。通過(guò)設(shè)置請(qǐng)求頭的Content-Type為application/json，告訴服務(wù)器我們發(fā)送的是JSON格式的數(shù)據(jù)。在服務(wù)端，我們可以解析請(qǐng)求體中的JSON數(shù)據(jù)并進(jìn)行相應(yīng)的處理。

除了使用基本的GET和POST請(qǐng)求，還可以通過(guò)Ajax進(jìn)行其他類(lèi)型的請(qǐng)求，如PUT、DELETE等。同時(shí)，Ajax還支持設(shè)置請(qǐng)求頭、請(qǐng)求參數(shù)等不同配置，以滿(mǎn)足不同的需求。總體來(lái)說(shuō)，Ajax通過(guò)與服務(wù)器進(jìn)行異步通信，可以高效地從HTML頁(yè)面請(qǐng)求數(shù)據(jù)，并提供了豐富的功能和靈活的配置選項(xiàng)。