Ajax如何解析JSON對象

Ajax是一種使用JavaScript和XML（最早的Ajax技術）或JSON（最常用的Ajax技術）來構建Web應用程序的方法。它可以實現在不刷新整個網頁的情況下，更新部分頁面內容。在Ajax中，JSON是一種常用的數據交換格式。通過使用Ajax解析JSON對象，我們可以輕松獲取和處理服務器返回的數據。

下面是一個例子，我們假設有一個服務器端的API，它返回了一個JSON對象，包含了一些學生的信息：

{
"students": [
{
"name": "張三",
"age": 20,
"major": "計算機科學"
},
{
"name": "李四",
"age": 22,
"major": "文學"
},
{
"name": "王五",
"age": 21,
"major": "經濟學"
}
]
}

現在，我們要使用Ajax來解析這個JSON對象，并在頁面上顯示出來。

首先，我們需要創建一個XMLHttpRequest對象，用于與服務器進行通信。然后，我們使用該對象的open()方法指定HTTP請求的類型和URL，以及使用的異步還是同步模式。接著，我們使用send()方法發送請求到服務器。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/students', true);
xhr.send();

上面的代碼表示我們向'http://api.example.com/students'發送了一個GET請求。

一旦服務器返回了響應，我們可以通過XMLHttpRequest對象的readyState和status屬性來確定請求的狀態。當readyState為4，并且status為200時，表示請求成功。接下來，我們可以使用responseText屬性來獲取服務器返回的數據。

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let response = xhr.responseText;
let data = JSON.parse(response);
// 在這里處理數據
}
};

在上面的代碼中，我們使用JSON.parse()方法將服務器返回的JSON字符串解析為JavaScript對象。解析后，我們就可以使用JavaScript的語法來訪問JSON對象的屬性和值。

接下來，我們可以使用JavaScript來遍歷JSON對象，并將數據顯示在頁面上：

let students = data.students;
let output = '';
for (let i = 0; i< students.length; i++) {
output += '
姓名：' + students[i].name + '
';
output += '
年齡：' + students[i].age + '
';
output += '
專業：' + students[i].major + '
';
}
document.getElementById('student-list').innerHTML = output;

在上面的代碼中，我們首先獲取了JSON對象中的學生數組。然后，我們使用一個循環來遍歷學生數組，并將每個學生的姓名、年齡和專業信息拼接成HTML字符串。最后，將拼接好的HTML字符串設置為id為'student-list'的元素的innerHTML。

通過這種方式，我們可以將服務器返回的JSON數據解析為JavaScript對象，并在頁面上動態顯示出來。

總結

Ajax可以使用JSON來傳輸數據，而且JSON解析起來更加簡單和高效。通過創建XMLHttpRequest對象，發送請求，解析返回的JSON數據，然后使用JavaScript訪問JSON對象的屬性和值，我們可以輕松地處理服務器返回的JSON數據，并動態顯示在頁面上。