AJAX 是一種在前端和后端之間進行數據交互的技術，它能夠實現異步傳輸和更新網頁的內容，而不會導致頁面的重新加載。使用 AJAX 可以通過向服務器發送請求并獲取服務器返回的數據，然后將數據更新到網頁中，從而實現網頁的動態更新。在本文中，我們將討論如何通過 AJAX 發送請求來獲取本地的 JSON 文件，并將獲取到的數據在網頁中展示出來。
首先，我們需要創建一個本地的 JSON 文件，該文件將包含我們要展示在網頁上的數據。假設我們要創建一個學生列表的 JSON 文件，其中包含每個學生的姓名和年齡。我們創建一個名為 "students.json" 的文件，并在其中添加以下內容：
[
{
"name": "小明",
"age": 18
},
{
"name": "小紅",
"age": 17
},
{
"name": "小李",
"age": 19
}
]接下來，我們需要在網頁中創建一個用于展示學生列表的區域。我們可以使用 `
<div id="student-list"></div>
現在我們來編寫 JavaScript 代碼來實現通過 AJAX 發送請求并獲取本地 JSON 文件的數據。首先，我們需要創建一個 XMLHttpRequest 對象，該對象用于發送 HTTP 請求。然后，我們使用該對象的 `open()` 方法來指定請求的類型和 URL。在本例中，由于我們要獲取本地的 JSON 文件，URL 可以指定為該文件的路徑。
var xhr = new XMLHttpRequest();
xhr.open('GET', 'students.json', true);接下來，我們需要設置當請求完成后的回調函數，該函數將在請求完成時被自動調用。我們可以使用 `xhr.onload` 屬性來設置回調函數，并在回調函數中處理服務器返回的數據。在本例中，我們將使用 `JSON.parse()` 方法將服務器返回的 JSON 字符串轉換為 JavaScript 對象，并將該對象的數據更新到網頁中。
xhr.onload = function() {
if (xhr.status === 200) {
var students = JSON.parse(xhr.responseText);
var studentList = document.getElementById('student-list');
students.forEach(function(student) {
var studentDiv = document.createElement('div');
studentDiv.innerHTML = '姓名：' + student.name + '，年齡：' + student.age;
studentList.appendChild(studentDiv);
});
}
};最后，我們使用 `xhr.send()` 方法來發送請求。發送請求后，將會觸發回調函數的執行，并將服務器返回的數據更新到網頁中。
xhr.send();
通過上述的代碼實現，當我們加載網頁時，會自動發送 AJAX 請求并獲取本地 JSON 文件的數據。然后，我們將獲取到的數據依次添加到網頁中的 `
總結來說，在前端開發中，AJAX 是一個非常有用的技術，它可以通過發送請求來實現與服務器的數據交互。通過 AJAX 發送請求并獲取本地的 JSON 文件，我們可以方便地獲取到服務器返回的數據，并在網頁中進行展示和處理。這樣就可以實現網頁的動態更新，提升用戶體驗。