AJAX 和 JSON 是現(xiàn)代 Web 開(kāi)發(fā)中常用的兩種技術(shù)。AJAX（Asynchronous JavaScript and XML）是一種使用 JavaScript 編寫(xiě)的客戶(hù)端-服務(wù)器通信技術(shù)，通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，更新部分網(wǎng)頁(yè)，而不是刷新整個(gè)頁(yè)面。

JSON（JavaScript Object Notation）是一種輕量級(jí)的數(shù)據(jù)交換格式，易于閱讀和編寫(xiě)。它基于 JavaScript 語(yǔ)法的子集，但是能夠獨(dú)立于編程語(yǔ)言使用。AJAX 和 JSON 在 Web 開(kāi)發(fā)中經(jīng)常一起使用，讓我們一起看看如何使用它們。

首先，讓我們來(lái)看一個(gè)簡(jiǎn)單的例子。假設(shè)我們有一個(gè)網(wǎng)站，其中有一個(gè)輸入框和一個(gè)按鈕。當(dāng)用戶(hù)輸入任意內(nèi)容并點(diǎn)擊按鈕時(shí)，我們希望通過(guò) AJAX 請(qǐng)求向服務(wù)器發(fā)送這個(gè)輸入的內(nèi)容，并收到服務(wù)器返回的數(shù)據(jù)。然后，我們將使用 JSON 格式來(lái)處理返回的數(shù)據(jù)。

HTML 代碼:
<input id="inputText" type="text" placeholder="輸入內(nèi)容" />
<button onclick="sendRequest()">發(fā)送請(qǐng)求</button>
<div id="output"></div>
JavaScript 代碼:
function sendRequest() {
var request = new XMLHttpRequest();
var input = document.getElementById("inputText").value;
var url = "http://example.com/api/data?input=" + input;
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
var response = JSON.parse(request.responseText);
document.getElementById("output").innerHTML = response.data;
}
};
request.open("GET", url, true);
request.send();
}

上面的例子演示了一個(gè)簡(jiǎn)單的 AJAX 請(qǐng)求，并使用 JSON 格式處理返回的數(shù)據(jù)。當(dāng)用戶(hù)在輸入框中輸入內(nèi)容并點(diǎn)擊按鈕時(shí)，JavaScript 函數(shù) `sendRequest()` 會(huì)被調(diào)用。該函數(shù)創(chuàng)建了一個(gè) XMLHttpRequest 對(duì)象，并指定了要發(fā)送的請(qǐng)求 URL。然后，我們定義了 `onreadystatechange` 事件處理程序，用于接收并處理從服務(wù)器返回的數(shù)據(jù)。

當(dāng)服務(wù)器返回的數(shù)據(jù)接收完成時(shí)（`request.readyState === 4`），我們使用 `JSON.parse()` 方法解析 JSON 格式的響應(yīng)文本并轉(zhuǎn)換為 JavaScript 對(duì)象。然后，我們將解析后的數(shù)據(jù)賦值給具有 id "output" 的 div 元素的 innerHTML 屬性，以在網(wǎng)頁(yè)上顯示出來(lái)。

除了 GET 請(qǐng)求外，我們還可以使用 AJAX 進(jìn)行 POST 請(qǐng)求，并將數(shù)據(jù)以 JSON 格式發(fā)送到服務(wù)器。讓我們來(lái)看一個(gè)新的例子。假設(shè)我們有一個(gè)注冊(cè)頁(yè)面，用戶(hù)在填寫(xiě)表單后點(diǎn)擊注冊(cè)按鈕。我們希望通過(guò) AJAX 將表單數(shù)據(jù)以 JSON 格式發(fā)送到服務(wù)器。

HTML 代碼:
<form id="registrationForm">
<input type="text" name="username" placeholder="用戶(hù)名" />
<input type="password" name="password" placeholder="密碼" />
<button onclick="register()">注冊(cè)</button>
</form>
JavaScript 代碼:
function register() {
var form = document.getElementById("registrationForm");
var formData = new FormData(form);
var url = "http://example.com/api/register";
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
var response = JSON.parse(request.responseText);
alert(response.message);
}
};
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/json");
request.send(JSON.stringify(formData));
}

上面的例子展示了如何使用 AJAX 發(fā)送一個(gè) POST 請(qǐng)求，并使用 JSON 格式將表單數(shù)據(jù)發(fā)送到服務(wù)器。當(dāng)用戶(hù)在表單中填寫(xiě)完數(shù)據(jù)并點(diǎn)擊注冊(cè)按鈕時(shí)，JavaScript 函數(shù) `register()` 會(huì)被調(diào)用。該函數(shù)首先通過(guò)表單的 id 獲取表單對(duì)象，然后創(chuàng)建一個(gè) FormData 對(duì)象，并將表單數(shù)據(jù)添加到其中。

接下來(lái)，我們創(chuàng)建一個(gè) XMLHttpRequest 對(duì)象，并定義 `onreadystatechange` 事件處理程序。當(dāng)服務(wù)器返回的數(shù)據(jù)接收完成時(shí)，我們使用 `JSON.parse()` 方法解析 JSON 格式的響應(yīng)文本，并以彈出框的形式顯示返回的消息。

最后，我們使用 `open()` 方法設(shè)置請(qǐng)求方法和 URL，使用 `setRequestHeader()` 方法設(shè)置請(qǐng)求頭，將請(qǐng)求發(fā)送到服務(wù)器。數(shù)據(jù)發(fā)送前，我們使用 `JSON.stringify()` 方法將 FormData 對(duì)象轉(zhuǎn)換為 JSON 格式的字符串。這樣，服務(wù)器就能夠正確解析發(fā)送的數(shù)據(jù)。

通過(guò)以上的示例，我們可以看到 AJAX 和 JSON 是強(qiáng)大的工具，可以實(shí)現(xiàn) Web 開(kāi)發(fā)中很多有用的功能。它們可以幫助我們與服務(wù)器進(jìn)行快速、異步的數(shù)據(jù)交換，并對(duì)從服務(wù)器返回的 JSON 數(shù)據(jù)進(jìn)行處理。