AJAX (Asynchronous JavaScript and XML) 是一種在 Web 應(yīng)用程序中以異步方式進(jìn)行數(shù)據(jù)交換的技術(shù)。JSON（JavaScript 對(duì)象表示法）是一種用于數(shù)據(jù)交換的輕量級(jí)數(shù)據(jù)格式。AJAX 結(jié)合 JSON 可以創(chuàng)建動(dòng)態(tài) Web 頁(yè)面，實(shí)現(xiàn)無(wú)刷新加載數(shù)據(jù)的效果。

使用 AJAX 和 JSON 可以讓我們?cè)诓恢匦录虞d整個(gè)頁(yè)面的情況下，從服務(wù)器異步獲取數(shù)據(jù)并將其渲染到頁(yè)面上。下面讓我們以一個(gè)實(shí)際的例子來(lái)說(shuō)明。

// HTML 文件
<div id="result"></div>
// JavaScript 文件
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("result").innerHTML = response.message;
}
};
xhr.open("GET", "data.json", true);
xhr.send();
// data.json 文件
{
"message": "Hello, AJAX and JSON!"
}

在上面的例子中，我們創(chuàng)建了一個(gè) XMLHttpRequest 對(duì)象，該對(duì)象可以向服務(wù)器發(fā)送請(qǐng)求并從服務(wù)器異步獲取數(shù)據(jù)。當(dāng) readyState 的值變?yōu)?4 且 status 的值為 200 時(shí)，表示服務(wù)器響應(yīng)成功，我們可以通過(guò) JSON.parse() 方法將服務(wù)器返回的 JSON 字符串轉(zhuǎn)換成 JavaScript 對(duì)象。最后，我們將服務(wù)器返回的 message 屬性的值渲染到 id 為 "result" 的 div 元素中。

AJAX 和 JSON 模板經(jīng)常被用于實(shí)現(xiàn)實(shí)時(shí)搜索功能。例如，一個(gè)在線(xiàn)商店的搜索框中，當(dāng)用戶(hù)輸入關(guān)鍵字時(shí)，可以通過(guò) AJAX 請(qǐng)求異步獲取匹配搜索關(guān)鍵字的商品，并使用 JSON 格式返回給前端。下面是一個(gè)簡(jiǎn)化的例子。

// HTML 文件
<input type="text" id="search" placeholder="搜索商品">
<ul id="result"></ul>
// JavaScript 文件
var input = document.getElementById("search");
var result = document.getElementById("result");
input.addEventListener("input", function() {
var keyword = input.value;
if (keyword.length >0) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
result.innerHTML = "";
response.forEach(function(item) {
var li = document.createElement("li");
li.textContent = item.name;
result.appendChild(li);
});
}
};
xhr.open("GET", "search.php?keyword=" + encodeURIComponent(keyword), true);
xhr.send();
} else {
result.innerHTML = "";
}
});
// search.php 文件
$keyword = $_GET["keyword"];
$results = array();
// 查詢(xún)匹配關(guān)鍵字的商品，將結(jié)果存入 $results 中
header("Content-Type: application/json");
echo json_encode($results);

在上面的例子中，我們通過(guò)監(jiān)聽(tīng)搜索框的輸入事件，當(dāng)用戶(hù)輸入關(guān)鍵字時(shí)，就發(fā)送 AJAX 請(qǐng)求到后端的 search.php 文件。我們將用戶(hù)輸入的關(guān)鍵字作為參數(shù)傳遞給服務(wù)器。服務(wù)器根據(jù)關(guān)鍵字查詢(xún)匹配的商品，并將結(jié)果存儲(chǔ)在一個(gè)數(shù)組中。最后，服務(wù)器將這個(gè)數(shù)組轉(zhuǎn)換為 JSON 格式，并將其返回給前端。前端通過(guò)遍歷 JSON 數(shù)組，將匹配的商品名稱(chēng)渲染到無(wú)序列表中。

AJAX 和 JSON 模板在現(xiàn)代 Web 開(kāi)發(fā)中扮演著重要的角色。通過(guò)異步加載數(shù)據(jù)和使用輕量級(jí)的 JSON 數(shù)據(jù)格式，我們能夠?qū)崿F(xiàn)更好的用戶(hù)體驗(yàn)和更高的性能。