AJAX是一種在不刷新整個頁面的情況下向服務器發送請求和接收響應的技術。其中，使用JSON（JavaScript Object Notation）進行數據交換是非常常見的一種方式。本文將介紹如何使用AJAX發送JSON請求，并通過舉例說明其用法。通過使用AJAX和JSON，我們可以實現更好的用戶體驗和響應速度。

使用AJAX發送JSON請求非常簡單。首先，我們需要創建一個XMLHttpRequest對象，并指定要發送請求的URL。然后，我們可以使用open()方法指定請求的類型（GET或POST）以及URL。接下來，我們可以使用setRequestHeader()方法設置請求頭，告訴服務器我們要發送JSON數據。最后，我們可以使用send()方法將請求發送到服務器，并等待服務器響應。

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 指定要發送請求的URL
var url = "http://example.com/api/data";
// 使用open()方法指定請求類型和URL
xhr.open("GET", url, true);
// 設置請求頭，告訴服務器我們要發送JSON數據
xhr.setRequestHeader("Content-Type", "application/json");
// 發送請求
xhr.send();

當服務器響應時，我們可以在onreadystatechange事件中檢查響應狀態和響應內容。

// 監聽onreadystatechange事件
xhr.onreadystatechange = function() {
// 響應已完成且狀態碼為200表示請求成功
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析服務器響應的JSON數據
var response = JSON.parse(xhr.responseText);
// 使用響應數據更新頁面
document.getElementById("data").innerHTML = response.data;
}
};

下面我們來通過一個實際的例子來說明如何使用AJAX和JSON進行請求和響應。

假設我們正在開發一個簡單的待辦事項應用程序。我們需要使用AJAX從服務器獲取待辦事項列表，并將其顯示在頁面上。我們可以向服務器發送一個GET請求，并指定待辦事項的URL。服務器將返回一個包含待辦事項的JSON對象。我們可以使用JSON.parse()方法將JSON字符串解析為JavaScript對象，并通過遍歷對象來生成待辦事項列表。

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 指定要發送請求的URL
var url = "http://example.com/api/todos";
// 使用open()方法指定請求類型和URL
xhr.open("GET", url, true);
// 設置請求頭，告訴服務器我們要發送JSON數據
xhr.setRequestHeader("Content-Type", "application/json");
// 發送請求
xhr.send();
// 監聽onreadystatechange事件
xhr.onreadystatechange = function() {
// 響應已完成且狀態碼為200表示請求成功
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析服務器響應的JSON數據
var response = JSON.parse(xhr.responseText);
// 遍歷響應對象，生成待辦事項列表
var todoList = "";
for (var i = 0; i< response.length; i++) {
todoList += "
" + response[i].title + "
";
}
// 更新頁面上的待辦事項列表
document.getElementById("todo-list").innerHTML = todoList;
}
};

通過上述例子，我們可以看到如何使用AJAX發送JSON請求以及處理服務器的響應。使用AJAX和JSON，我們可以在不刷新整個頁面的情況下更新頁面內容，并實現更好的用戶體驗和響應速度。

總之，AJAX和JSON是開發Web應用程序的重要工具。它們提供了一種便捷的方式來發送請求和處理響應，使我們能夠創建出更加動態和高效的應用程序。通過掌握AJAX和JSON的使用，我們可以提升我們的開發能力，并為用戶提供更好的體驗。