1. 發(fā)送Ajax請求

發(fā)送Ajax請求的方法有多種，其中最常見的方式是使用XMLHttpRequest對象。下面是一個(gè)發(fā)送GET請求的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send();

在上述代碼中，XMLHttpRequest對象的open方法指定了請求方法('GET')和請求URL('https://api.example.com/data')。通過設(shè)置onreadystatechange事件監(jiān)聽器，可以在請求狀態(tài)發(fā)生改變時(shí)執(zhí)行相應(yīng)的操作。當(dāng)請求狀態(tài)為4（表示請求已完成）且響應(yīng)狀態(tài)為200（表示請求成功）時(shí)，我們可以通過xhr.responseText獲取到服務(wù)器返回的響應(yīng)數(shù)據(jù)，并使用JSON.parse方法進(jìn)行解析。

2. 添加請求頭

在Ajax請求中，可以通過設(shè)置請求頭來傳遞附加信息。例如，通過設(shè)置Content-Type請求頭為'application/json'，可以告訴服務(wù)器請求數(shù)據(jù)的格式為Json。下面是一個(gè)示例：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send(JSON.stringify({ key: 'value' }));

在上述代碼中，我們通過setRequestHeader方法設(shè)置了Content-Type請求頭為'application/json'，告訴服務(wù)器請求數(shù)據(jù)的格式為Json。在發(fā)送POST請求時(shí)，需要通過xhr.send方法傳遞請求數(shù)據(jù)。我們使用JSON.stringify方法將請求數(shù)據(jù)轉(zhuǎn)換為Json字符串。

3. 解析Json響應(yīng)

在前面的示例中，我們通過JSON.parse方法將服務(wù)器返回的響應(yīng)數(shù)據(jù)解析成了JavaScript對象。然后可以根據(jù)需要對數(shù)據(jù)進(jìn)行處理和展示。下面是一個(gè)示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var html = '';
response.forEach(function(item) {
html += '
' + item.name + '
';
});
document.getElementById('data-container').innerHTML = html;
}
};
xhr.send();

在上述代碼中，我們通過forEach方法遍歷服務(wù)器返回的數(shù)據(jù)數(shù)組，并通過字符串拼接的方式生成一個(gè)包含數(shù)據(jù)名稱的HTML代碼片段。最后，我們將生成的HTML代碼插入到id為'data-container'的元素中，從而在頁面中展示數(shù)據(jù)的名稱。

結(jié)論

通過使用Ajax發(fā)送請求并在請求頭中添加Json類型，我們可以實(shí)現(xiàn)與服務(wù)器的異步通信以及高效的數(shù)據(jù)傳輸。這種方法在很多場景下都非常有用，例如在實(shí)時(shí)搜索、無需刷新頁面的表單提交和加載動(dòng)態(tài)內(nèi)容等情況下。掌握Ajax和Json的使用，將幫助我們更好地開發(fā)現(xiàn)代化的Web應(yīng)用程序。