AJAX（Asynchronous JavaScript and XML）是一種用于實現異步數據交互的技術，可以實現頁面無需刷新就能更新數據。JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，常用于在客戶端和服務端之間傳輸數據。在這篇文章中，我們將探討如何使用AJAX和JSON集合來讀取和展示數據。
假設我們有一個電影數據庫，其中包含電影的名稱、導演和評分等信息。我們希望能夠通過AJAX獲取該數據庫中的電影列表，并在網頁上展示出來。
``` html<button id="loadMoviesButton">加載電影列表</button>
<div id="moviesList"></div>
<script>
document.getElementById('loadMoviesButton').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'movies.json', true);
xhr.onload = function() {
if (xhr.status === 200) {
var movies = JSON.parse(xhr.responseText);
var moviesList = document.getElementById('moviesList');
// 清空電影列表
moviesList.innerHTML = '';
// 遍歷電影列表并添加到HTML
movies.forEach(function(movie) {
var movieItem = document.createElement('div');
movieItem.innerHTML = '' + movie.title + '
' +
'導演：' + movie.director + '
' +
'評分：' + movie.rating + '
';
moviesList.appendChild(movieItem);
});
}
};
xhr.send();
});
</script>```上面的代碼首先創建了一個按鈕，當用戶點擊該按鈕時，會發起AJAX請求來獲取電影列表。在成功獲取到電影列表后，代碼會使用JSON.parse()方法將響應體中的JSON字符串轉換為JavaScript對象。然后，我們通過遍歷電影列表，并將電影信息添加到HTML中，從而動態地展示電影列表。
在這個例子中，我們使用了XMLHttpRequest對象來發起AJAX請求。在請求成功后，我們使用了JSON.parse()方法將獲取到的JSON字符串轉換為JavaScript對象。然后我們可以通過JavaScript操作DOM，將電影信息動態地添加到HTML中。這使得我們能夠在不刷新整個頁面的情況下，更新電影列表。
總結來說，使用AJAX和JSON集合可以幫助我們實現在網頁中動態展示數據的功能。無論是電影列表、產品目錄還是用戶評論，使用AJAX和JSON集合可以讓我們以更流暢的方式與用戶進行交互，提升用戶體驗。