AJAX（Asynchronous JavaScript and XML）是一種可以在不重新加載整個頁面的情況下更新部分網頁的技術。它使用JavaScript和XML（現在常用JSON）來實現數據的異步傳輸和處理。在這篇文章中，我們將討論關于使用AJAX接收返回JSON數據格式的步驟和示例。

JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，它易于閱讀和編寫，并且可以很容易地在JavaScript中解析和生成。使用AJAX接收返回的JSON數據格式可以非常方便地處理和展示數據，這對于像實時搜索、即時消息和動態內容加載等應用非常有用。

讓我們來看一個簡單的例子，假設我們正在開發一個電影信息網站。我們想要通過AJAX異步請求服務器上的電影數據，并以JSON格式返回。然后，我們可以使用AJAX接收返回的JSON數據，并將它們動態地顯示在網頁上。以下是實現上述功能的基本步驟：

<script>
function getMovieData() {
// 創建AJAX對象
var xhr = new XMLHttpRequest();
// 指定請求方法、URL和異步標志
xhr.open('GET', 'https://example.com/api/movies', true);
// 指定響應回調函數
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var movieData = JSON.parse(xhr.responseText);
// 在網頁上展示電影數據
displayMovieData(movieData);
}
}
// 發送AJAX請求
xhr.send();
}
function displayMovieData(movieData) {
// 在網頁上動態顯示電影數據
var movieList = document.getElementById('movie-list');
for (var i = 0; i < movieData.length; i++) {
var movie = movieData[i];
var movieItem = document.createElement('li');
movieItem.textContent = movie.title;
movieList.appendChild(movieItem);
}
}
</script>

在上述代碼中，我們首先創建一個XMLHttpRequest對象，它是AJAX通信的核心。然后，我們使用open()方法指定HTTP請求的方法（GET）、URL和是否使用異步方式。接下來，我們定義了一個onreadystatechange事件處理函數來處理異步請求的響應。當readyState等于4（已經完成）且status等于200（成功）時，我們可以通過JSON.parse()方法解析響應文本，并將其賦值給變量movieData。最后，我們使用displayMovieData()函數動態地將電影數據顯示在網頁上。

除了基本的AJAX代碼，我們還需要在服務器端正確設置響應頭，以便返回的數據被正確地解析為JSON格式。以下是一個示例服務器端代碼（假設使用Node.js）：

app.get('/api/movies', function(req, res) {
var movies = [
{ title: 'Movie 1', year: 2020 },
{ title: 'Movie 2', year: 2019 },
{ title: 'Movie 3', year: 2018 }
];
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(movies));
});

在這個例子中，我們使用Node.js的Express框架創建了一個簡單的路由處理程序。當收到GET請求時，我們返回一個包含三部電影信息的JSON數組。通過設置響應頭的Content-Type為application/json，我們告訴瀏覽器返回的數據是JSON格式的。然后，我們使用JSON.stringify()方法將JavaScript對象轉換為JSON字符串，并通過res.send()將其發送回客戶端。

綜上所述，通過AJAX接收返回JSON數據格式可以提供靈活而高效的數據交互。借助這一技術，我們可以在不刷新整個頁面的情況下更新和顯示數據。這在許多應用中都非常有用，例如實時搜索、即時消息和動態內容加載。