引言

在Web開發中，Ajax是一種通過使用JavaScript和XMLHttpRequest對象從服務器異步獲取數據的技術。通常情況下，Ajax請求的返回結果是一個字符串或XML格式的數據。然而，在某些情況下，我們希望返回一個對象數組，以便在客戶端進行更進一步的處理。本文將探討如何使用Ajax從服務器返回對象數組，并提供詳細的示例和說明。

核心原理

Ajax通過使用XMLHttpRequest對象向服務器發送異步請求，并在請求完成后，將服務器返回的數據傳遞給JavaScript回調函數進行處理。為了返回一個對象數組，我們需要在服務器端將對象數組轉換為字符串，并在客戶端將字符串轉換回對象數組。

服務器端處理

在服務器端，我們可以使用后端語言（如PHP、Java等）將對象數組轉換為JSON格式的字符串，然后將其作為響應傳回給客戶端。以下是一個簡單的PHP示例：

// 服務器端PHP代碼
$myArray = array(
array('name' => 'Alice', 'age' => 25),
array('name' => 'Bob', 'age' => 30),
array('name' => 'Charlie', 'age' => 35)
);
// 將對象數組轉換為JSON字符串
$jsonString = json_encode($myArray);
// 返回JSON字符串作為響應
echo $jsonString;

客戶端處理

在客戶端，我們可以使用JavaScript的JSON.parse()函數將服務器返回的JSON字符串轉換為對象數組。以下是一個簡單的JavaScript示例：

// 客戶端JavaScript代碼
function processData(data) {
// 將JSON字符串轉換為對象數組
var array = JSON.parse(data);
// 處理對象數組
for (var i = 0; i < array.length; i++) {
var obj = array[i];
console.log('Name: ' + obj.name + ', Age: ' + obj.age);
}
}
// 發送Ajax請求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 調用處理函數處理服務器返回的JSON字符串
processData(xhr.responseText);
}
};
xhr.send();

示例說明

假設我們有一個服務器端的數據庫，存儲了一些用戶信息。我們希望從服務器獲取所有用戶的姓名和年齡，并在客戶端進行展示。服務器端使用PHP和MySQL來實現，客戶端使用JavaScript和Ajax來異步獲取數據。

首先，我們創建一個名為"get_users.php"的服務器端腳本，用于從數據庫中獲取用戶數據并返回成對象數組。以下是"get_users.php"的代碼：

// 服務器端腳本 - get_users.php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// 創建數據庫連接
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
// 查詢數據庫中的用戶信息
$sql = "SELECT name, age FROM users";
$result = $conn->query($sql);
// 創建對象數組
$users = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$users[] = $row;
}
}
// 將對象數組轉換為JSON字符串
$jsonString = json_encode($users);
// 返回JSON字符串作為響應
echo $jsonString;
// 關閉數據庫連接
$conn->close();

然后，我們使用以下JavaScript代碼從服務器獲取對象數組并展示用戶信息：

// 客戶端JavaScript代碼
function getUsers() {
// 發送Ajax請求獲取用戶數據
var xhr = new XMLHttpRequest();
xhr.open('GET', 'get_users.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 調用處理函數處理服務器返回的JSON字符串
processData(xhr.responseText);
}
};
xhr.send();
}
function processData(data) {
// 將JSON字符串轉換為對象數組
var users = JSON.parse(data);
// 展示用戶信息
for (var i = 0; i < users.length; i++) {
var user = users[i];
console.log('Name: ' + user.name + ', Age: ' + user.age);
}
}
// 調用函數獲取用戶數據
getUsers();

通過以上代碼，我們成功從服務器獲取到用戶的姓名和年齡，并在客戶端進行展示。在示例中，我們使用了PHP和MySQL作為服務器端，但是你也可以使用其他后端語言和數據庫來實現相同功能。

結論

本文介紹了如何使用Ajax從服務器返回對象數組。通過在服務器端將對象數組轉換為JSON字符串，并在客戶端將JSON字符串轉換回對象數組，我們可以在客戶端輕松地處理和展示服務器返回的數據。通過實例的演示，我們更好地理解了這個過程。希望本文能夠幫助你在實際開發中更好地應用Ajax技術。