AJAX（Asynchronous JavaScript and XML）是一種用于創(chuàng)建異步 Web 應(yīng)用程序的技術(shù)。它允許我們在頁面不刷新的情況下與服務(wù)器進行數(shù)據(jù)交換，實現(xiàn)動態(tài)更新頁面內(nèi)容的效果。

AJAX的一個常見用途是通過使用XMLHttpRequest對象從服務(wù)器獲取數(shù)據(jù)。在這篇文章中，我們將討論如何使用AJAX從后端的Model中獲取值，并在前端進行展示。

前提假設(shè)我們有一個Web應(yīng)用程序，該應(yīng)用程序使用PHP作為后端語言，并使用MVC（Model-View-Controller）架構(gòu)。在該應(yīng)用程序中，我們有一個名為User的Model，它包含用戶的姓名和年齡兩個屬性。

class User {
private $name;
private $age;
public function __construct($name, $age) {
$this->name = $name;
$this->age = $age;
}
public function getName() {
return $this->name;
}
public function getAge() {
return $this->age;
}
}

我們的目標(biāo)是通過AJAX從服務(wù)器獲取一個User對象的值，并將其展示在前端頁面上。

首先，我們需要創(chuàng)建一個JavaScript函數(shù)，用于發(fā)送AJAX請求并處理響應(yīng)：

function getUser() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var user = JSON.parse(xhr.responseText);
// 在這里處理User對象的值
var name = user.name;
var age = user.age;
// 展示User對象的值
document.getElementById("name").innerHTML = name;
document.getElementById("age").innerHTML = age;
}
};
xhr.open("GET", "get_user.php", true);
xhr.send();
}

上述代碼中，我們首先創(chuàng)建了一個XMLHttpRequest對象xhr，并設(shè)置了它的onreadystatechange事件處理程序。當(dāng)服務(wù)器返回響應(yīng)時，我們首先判斷ReadyState是否為4（表示請求已完成），以及狀態(tài)碼是否為200（表示請求成功）。如果滿足條件，我們使用JSON.parse()函數(shù)將從服務(wù)器接收到的文本解析為一個JavaScript對象。

接下來，我們從User對象中提取name和age，并將它們展示在id為"name"和"age"的HTML元素中。

接下來，我們需要創(chuàng)建一個后端用于返回User對象的PHP文件，即get_user.php：

<?php
$user = new User("John Doe", 25);
echo json_encode($user);
?>

在上述PHP文件中，我們首先創(chuàng)建一個新的User對象，然后使用json_encode()函數(shù)將其轉(zhuǎn)換為JSON格式，并將結(jié)果輸出給前端。

最后，我們需要在前端HTML頁面中調(diào)用getUser()函數(shù)來觸發(fā)AJAX請求：

<button onclick="getUser()">獲取用戶信息</button>
<div>
<p>姓名：<span id="name"></span></p>
<p>年齡：<span id="age"></span></p>
</div>

當(dāng)我們點擊"獲取用戶信息"按鈕時，將會調(diào)用getUser()函數(shù)，該函數(shù)將發(fā)送AJAX請求到get_user.php文件，并以JSON格式返回User對象的值。然后，獲取到的值將會展示在id為"name"和"age"的HTML元素中。

通過這樣的方式，我們可以使用AJAX從后端的Model中獲取值，并在前端進行展示。當(dāng)我們需要動態(tài)地更新網(wǎng)頁內(nèi)容時，這種方法尤其有用。