AJAX是一種用于在網頁上異步獲取數據的技術，它能夠提升用戶體驗，減少頁面的刷新和加載時間。其中一種常見的數據格式是JSON（JavaScript Object Notation），它使用鍵值對的方式來組織數據。本文將介紹如何使用AJAX來獲取JSON數據并進行格式化處理，來提升網頁的交互性和可讀性。

假設我們正在開發一個簡單的網站，其中有一個頁面用來顯示最新的文章列表。在這個例子中，我們通過AJAX請求服務器獲取JSON格式的文章數據，然后通過前端代碼將數據格式化顯示在網頁上。首先，我們需要編寫前端代碼來發送AJAX請求，如下所示：

<script>
// 發送AJAX請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 格式化JSON數據并顯示在網頁上
for (var i = 0; i < response.length; i++) {
document.getElementById('article-list').innerHTML += '<li>' + response[i].title + '</li>';
}
}
};
xhr.open('GET', 'https://example.com/api/articles', true);
xhr.send();
</script>

上面的代碼首先創建了一個XMLHttpRequest對象，然后定義了一個回調函數，該函數在請求返回時被調用。在回調函數中，我們首先通過JSON.parse()方法將服務器返回的JSON字符串解析為JavaScript對象。

接下來，我們遍歷解析后的對象，并將每篇文章的標題添加到一個列表中。在這個例子中，我們將文章的標題顯示在一個HTML的未排序列表<ul>中的每個<li>元素中。最后，我們使用innerHTML屬性將格式化后的數據插入到網頁上。

當我們訪問這個頁面時，AJAX請求將被發送到指定的URL（如上例中的'https://example.com/api/articles'），然后在請求返回時，數據將被獲取和格式化，最終在頁面中顯示出來。

除了簡單地添加到列表中，我們還可以對獲取的JSON數據進行更復雜的處理。下面是一個例子，我們假設每篇文章還包含一個作者字段，并且我們想要將每篇文章顯示在一個表格中，同時包括文章的標題和作者：

<script>
// 發送AJAX請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 格式化JSON數據并顯示在網頁上
var table = '<table><tr><th>標題</th><th>作者</th></tr>';
for (var i = 0; i < response.length; i++) {
table += '<tr><td>' + response[i].title + '</td><td>' + response[i].author + '</td></tr>';
}
table += '</table>';
document.getElementById('article-table').innerHTML = table;
}
};
xhr.open('GET', 'https://example.com/api/articles', true);
xhr.send();
</script>

在上面的代碼中，我們使用一個字符串變量table來保存格式化后的HTML代碼。首先，我們創建了一個包含標題和作者的表頭行。然后，我們使用一個循環來遍歷每篇文章，并將它們的標題和作者添加到表的行中。最后，我們將table變量的值賦給網頁上一個具有指定id的元素，從而顯示表格。

總結而言，使用AJAX獲取JSON數據并將其格式化顯示在網頁上，能夠提升網頁的交互性和可讀性。通過發送AJAX請求，我們可以異步地獲取數據，減少頁面刷新和加載時間。然后，通過解析和處理服務器返回的JSON數據，我們可以將其顯示在網頁上，并進行格式化來滿足特定的需求。