AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個網頁的情況下，通過后臺傳遞和獲取數據的技術。它通過 JSON（JavaScript Object Notation）格式來處理數據，使得數據的傳遞變得更加高效和方便。在本文中，我們將探討如何使用 AJAX 和 JSON 來請求本地數據，并展示一些實際的例子。

AJAX 請求本地數據的一個常見場景是讀取一個本地的 JSON 文件，并顯示其中的內容。假設我們有一個本地的 students.json 文件，其中包含了多個學生的信息。我們可以通過以下代碼來發送 AJAX 請求，并在成功獲取數據后，將學生的姓名和成績顯示在頁面上：

$.ajax({
url: 'students.json',
type: 'GET',
dataType: 'json',
success: function(data) {
// 數據成功獲取后的處理邏輯
data.forEach(function(student) {
$('body').append('
' + student.name + ' - ' + student.score + '
');
});
},
error: function() {
// 發生錯誤時的處理邏輯
$('body').append('
無法獲取學生信息。
');
}
});

上述代碼中，我們使用 jQuery 的 ajax() 方法來發送 GET 請求，將數據類型設置為 JSON。在成功獲得數據后，我們使用 forEach() 方法遍歷學生列表，并將每個學生的姓名和成績添加到頁面上。

除了讀取本地的 JSON 文件，我們還可以使用 AJAX 和 JSON 來模擬后端的數據接口。假設我們有一個需求，需要根據用戶輸入的關鍵字，實時查詢并顯示匹配的城市名。我們可以通過以下代碼來實現：

$('input').on('keyup', function() {
var keyword = $(this).val();
$.ajax({
url: 'https://api.example.com/cities',
type: 'GET',
dataType: 'json',
data: { keyword: keyword },
success: function(data) {
// 數據成功獲取后的處理邏輯
$('ul').empty();
data.forEach(function(city) {
$('ul').append('
' + city.name + '
');
});
},
error: function() {
// 發生錯誤時的處理邏輯
alert('無法獲取城市列表。');
}
});
});

在上面的例子中，我們通過監聽輸入框的鍵盤事件來獲取用戶輸入的關鍵字，然后發送 AJAX 請求到后端的城市數據接口。在服務器返回數據后，我們清空現有的城市列表，并將符合關鍵字的城市名添加到頁面上的一個無序列表中。

綜上所述，使用 AJAX 和 JSON 請求本地數據可以大大提高網頁的響應速度和用戶體驗。無論是讀取本地的 JSON 文件，還是模擬后端的數據接口，我們都可以通過簡潔的代碼和高效的數據傳遞方式，實現功能豐富的前端應用。