AJAX（Asynchronous JavaScript and XML）是一種用于創(chuàng)建交互式網頁的技術，它可以在不重新加載整個頁面的情況下，通過與服務器進行異步通信，實現數據的傳輸和更新。JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，常用于存儲和傳輸結構化數據。結合使用AJAX和JSON，可以實現動態(tài)地讀取和更新網頁上的數據，為用戶提供更好的交互體驗。

舉例來說，假設我們正在開發(fā)一個在線圖書商城的網頁，我們需要展示最新上架的圖書列表，并提供搜索功能。如果我們使用傳統(tǒng)的網頁開發(fā)方式，用戶每次搜索或者刷新頁面時，都需要重新加載整個圖書列表，這將導致頁面響應速度較慢，用戶體驗較差。而使用AJAX和JSON，我們可以實現在用戶輸入搜索關鍵字后，只更新圖書列表中符合條件的圖書信息，而不需要刷新整個頁面。

為了實現使用AJAX和JSON讀取數據，我們首先需要編寫一個用于處理數據的服務器端代碼。假設我們使用PHP語言，我們可以通過以下代碼獲取圖書列表的JSON數據：

在上述代碼中，我們首先從數據庫中獲取最新上架的圖書列表，并將其存儲在一個數組變量中。然后，通過使用PHP的json_encode()函數，將該數組轉換為JSON格式的數據。最后，通過設置HTTP響應頭的Content-Type為application/json，以確保接收到該數據的瀏覽器能夠正確解析它。通過使用PHP的echo函數，將JSON數據發(fā)送給客戶端。

在客戶端的JavaScript代碼中，我們可以使用AJAX來讀取服務器返回的JSON數據，并根據需要更新網頁上的內容。以下是一個使用原生JavaScript進行AJAX請求的例子：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var books = JSON.parse(xhr.responseText);
// 根據返回的JSON數據更新圖書列表
// ...
}
};
xhr.open('GET', 'books.php', true);
xhr.send();

在該例子中，我們首先創(chuàng)建了一個XMLHttpRequest對象，然后通過設置onreadystatechange事件處理函數，來監(jiān)聽AJAX請求的狀態(tài)變化。當請求狀態(tài)變?yōu)?（請求完成）并且請求狀態(tài)碼為200（表示成功），我們通過JSON.parse()函數將服務器返回的JSON數據解析為JavaScript對象或數組，可以將其直接傳遞給其他JavaScript代碼進行處理。在這里，我們可以根據返回的JSON數據，在網頁上更新圖書列表的內容。

通過結合使用AJAX和JSON，我們可以輕松實現動態(tài)讀取和更新網頁上的數據，提供更好的用戶體驗。例如，在圖書商城的例子中，用戶只需要輸入搜索關鍵字，就能夠實時獲取符合條件的圖書列表，而不需要刷新頁面。這為用戶提供了更快速和便捷的搜索體驗，提高了用戶滿意度。