Ajax（Asynchronous JavaScript and XML）是一種在網(wǎng)頁(yè)中實(shí)現(xiàn)無(wú)刷新數(shù)據(jù)交互的技術(shù)，它能夠通過異步請(qǐng)求從服務(wù)器獲取數(shù)據(jù)并動(dòng)態(tài)更新網(wǎng)頁(yè)的內(nèi)容。在Ajax中，JSON（JavaScript Object Notation）是一種常用的數(shù)據(jù)格式，用于傳輸和存儲(chǔ)數(shù)據(jù)。通過使用Ajax發(fā)送JSON請(qǐng)求，可以方便地將服務(wù)器返回的數(shù)據(jù)格式化為前端所需的方式，并將其展現(xiàn)在網(wǎng)頁(yè)上。本文將詳細(xì)介紹如何使用Ajax發(fā)送JSON請(qǐng)求，并將返回的數(shù)據(jù)格式化展示。

首先，我們需要使用JavaScript創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，然后通過該對(duì)象發(fā)送JSON請(qǐng)求到服務(wù)器。下面是一個(gè)簡(jiǎn)單的示例，該示例通過Ajax發(fā)送JSON請(qǐng)求，然后將返回的JSON數(shù)據(jù)格式化為HTML，并將其展示在網(wǎng)頁(yè)上：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.com/data.json', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var formattedData = formatData(response);
document.getElementById('data-container').innerHTML = formattedData;
}
};
xhr.send();

在上面的示例中，我們首先創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，并使用open方法指定了請(qǐng)求的URL和請(qǐng)求的方法（這里使用的是GET方法）。然后，我們使用setRequestHeader方法設(shè)置請(qǐng)求頭的Content-Type為application/json，表示我們要發(fā)送的數(shù)據(jù)是JSON格式。接下來(lái)，我們使用onreadystatechange事件監(jiān)聽請(qǐng)求的狀態(tài)變化，在狀態(tài)為4（即請(qǐng)求已完成）并且狀態(tài)碼為200時(shí)，表示請(qǐng)求成功。此時(shí)，我們使用JSON.parse方法將服務(wù)器返回的JSON數(shù)據(jù)解析為JavaScript對(duì)象，并將其傳遞給formatData函數(shù)進(jìn)行格式化。最后，將格式化后的數(shù)據(jù)展示在id為data-container的元素中。

接下來(lái)，我們需要定義一個(gè)formatData函數(shù)，用于將服務(wù)器返回的JSON數(shù)據(jù)格式化為HTML。示例如下：

function formatData(data) {
var formattedHTML = '';
for (var i = 0; i < data.length; i++) {
formattedHTML += '<div>';
formattedHTML += '<h3>' + data[i].title + '</h3>';
formattedHTML += '<p>' + data[i].content + '</p>';
formattedHTML += '</div>';
}
return formattedHTML;
}

在上面的示例中，我們首先定義了一個(gè)空字符串formattedHTML，用于存儲(chǔ)格式化后的HTML代碼。然后，我們使用for循環(huán)遍歷data數(shù)組（假設(shè)返回的JSON數(shù)據(jù)是一個(gè)數(shù)組），并將每個(gè)數(shù)組元素的title和content屬性加入到formattedHTML字符串中。最后，將格式化后的HTML代碼作為函數(shù)的返回值。

通過以上代碼，我們可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的通過Ajax請(qǐng)求并格式化展示JSON數(shù)據(jù)的功能。當(dāng)我們發(fā)送JSON請(qǐng)求，并在請(qǐng)求成功后將返回的數(shù)據(jù)格式化展示在網(wǎng)頁(yè)上時(shí)，可以創(chuàng)建一個(gè)更加友好和可讀性更高的界面。同時(shí)，使用JSON數(shù)據(jù)的優(yōu)勢(shì)在于其結(jié)構(gòu)簡(jiǎn)單，易于處理和解析。因此，Ajax和JSON的結(jié)合將為我們提供強(qiáng)大而靈活的數(shù)據(jù)交互方案。