Ajax是一種在Web開發中廣泛使用的技術，它使得在不刷新整個頁面的情況下，能夠異步地從服務器獲取數據并更新頁面的部分內容。其中，JSON（JavaScript Object Notation）是一種常用的數據格式，經常用于在不同的系統或平臺之間交換數據。通過原生的Ajax代碼和JSON數據格式，我們可以實現高效的數據傳輸和處理。本文將詳細介紹Ajax原生代碼和JSON的相關知識和用法，并通過舉例說明，以幫助讀者更好地理解和應用這兩項技術。 舉例來說，假設我們正在開發一個在線商城的網站，我們需要實現一個功能：當用戶在搜索框中輸入關鍵詞時，能夠動態地根據關鍵詞從服務器獲取匹配的商品列表，并在頁面上展示結果，而不需要刷新整個頁面。這時，我們可以使用Ajax和JSON來實現。 使用Ajax進行異步請求的第一步是創建一個XMLHttpRequest對象。在原生的JavaScript中，可以通過`new XMLHttpRequest()`來創建一個XMLHttpRequest對象。然后，我們可以通過該對象的`open`方法指定請求的方式（GET或POST）以及請求的URL。例如，以下是一個使用GET方式請求的示例代碼： ```javascript let xhr = new XMLHttpRequest(); xhr.open("GET", "https://example.com/search?keyword=apple", true); ``` 通過`open`方法指定請求的方式和URL之后，我們還需要注冊一個回調函數，以便在接收到服務器的響應時進行處理。在原生的Ajax中，可以使用`onreadystatechange`屬性來指定回調函數。下面是一個獲取響應結果并解析的示例代碼： ```javascript xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { let response = JSON.parse(xhr.responseText); // 在這里處理響應結果 } }; ``` 在回調函數中，我們首先需要檢查`readyState`屬性的值是否為`XMLHttpRequest.DONE`，并且`status`屬性的值是否為200，以確保請求已經完成并且響應成功。然后，我們可以通過`responseText`屬性獲取服務器返回的響應內容。由于我們預期服務器返回的數據是JSON格式的，我們可以使用`JSON.parse`方法將響應內容解析成JavaScript對象，以便進一步處理。 接下來，我們可以根據需要處理服務器返回的數據，并更新頁面的相應部分。例如，在搜索功能的示例中，我們可以將服務器返回的商品列表數據插入到頁面的結果區域中。以下是一個簡化的示例代碼： ```javascript let resultArea = document.getElementById("resultArea"); resultArea.innerHTML = ""; response.forEach(function(product) { let item = document.createElement("div"); item.textContent = product.name; resultArea.appendChild(item); }); ``` 在這個示例中，我們首先通過`document.getElementById`方法獲取到頁面上的結果區域元素。然后，我們使用`innerHTML`屬性清空該元素的內容。接著，我們遍歷服務器返回的商品列表數據，在每次迭代中，創建一個新的`div`元素，并將商品的名稱作為其文本內容，然后將該元素添加到結果區域中。 通過以上代碼，我們可以實現一個基本的搜索功能，當用戶在搜索框中輸入關鍵詞時，網頁會自動向服務器發送請求，根據返回的商品列表數據更新頁面的結果區域，而不需要刷新整個頁面。這樣，用戶體驗更佳且效率更高。 總結來說，Ajax的原生代碼與JSON數據格式結合使用，可以使我們更靈活地處理數據，提高頁面的響應速度和用戶體驗。我們可以通過創建XMLHttpRequest對象、發送異步請求、解析響應結果，以及動態更新頁面的部分內容，來實現豐富多樣的功能。希望通過本文的介紹和示例，讀者對Ajax原生代碼和JSON的使用有更深入的理解，并能夠應用到自己的項目中。