Ajax（Asynchronous JavaScript and XML）是一種用于前端與后端之間交換數(shù)據(jù)的技術(shù)，它能夠在不刷新整個(gè)頁(yè)面的情況下，實(shí)現(xiàn)對(duì)服務(wù)器的請(qǐng)求和響應(yīng)。在使用Ajax過(guò)程中，我們經(jīng)常需要獲取PHP返回的數(shù)據(jù)。本文將詳細(xì)介紹如何使用Ajax獲取PHP返回的數(shù)據(jù)，并給出一些實(shí)際的示例。

如果我們需要在網(wǎng)頁(yè)上根據(jù)用戶的某種操作來(lái)獲取服務(wù)器的數(shù)據(jù)，比如根據(jù)用戶的輸入實(shí)時(shí)搜索相關(guān)內(nèi)容，或者根據(jù)用戶點(diǎn)擊的標(biāo)簽動(dòng)態(tài)加載新的內(nèi)容等，就可以使用Ajax來(lái)進(jìn)行后臺(tái)數(shù)據(jù)的獲取和更新。通過(guò)Ajax，我們可以發(fā)送HTTP請(qǐng)求到服務(wù)器的PHP文件，并以異步的方式獲取響應(yīng)結(jié)果。這樣可以使網(wǎng)頁(yè)更具有交互性和實(shí)時(shí)性。

假設(shè)我們有一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，其中包含一個(gè)輸入框和一個(gè)按鈕。當(dāng)用戶在輸入框中輸入關(guān)鍵詞，并點(diǎn)擊按鈕時(shí)，網(wǎng)頁(yè)需要實(shí)時(shí)顯示與關(guān)鍵詞匹配的內(nèi)容。為了實(shí)現(xiàn)這個(gè)功能，我們首先需要編寫(xiě)一個(gè)PHP文件，用于處理用戶輸入的關(guān)鍵詞，并返回匹配的結(jié)果。下面是一個(gè)示例的PHP文件：

<?php
// 接收用戶輸入的關(guān)鍵詞
$keyword = $_GET['keyword'];
// 模擬數(shù)據(jù)庫(kù)查詢匹配的結(jié)果
$results = [];
// 假設(shè)數(shù)據(jù)庫(kù)中有以下內(nèi)容
$data = [
'apple',
'banana',
'orange',
'pear',
'pineapple'
];
// 遍歷數(shù)據(jù)庫(kù)中的內(nèi)容，找到與關(guān)鍵詞匹配的項(xiàng)
foreach ($data as $item) {
if (strpos($item, $keyword) !== false) {
$results[] = $item;
}
}
// 將匹配結(jié)果以JSON格式返回給前端
echo json_encode($results);
?>

在上面的PHP文件中，我們首先獲取用戶輸入的關(guān)鍵詞，并定義一個(gè)空數(shù)組$results用于存儲(chǔ)匹配的結(jié)果。然后，我們假設(shè)數(shù)據(jù)庫(kù)中有一些數(shù)據(jù)，遍歷這些數(shù)據(jù)并找到與關(guān)鍵詞匹配的項(xiàng)，將其添加到$results中。最后，我們將$results以JSON格式返回給前端。接下來(lái)我們需要在網(wǎng)頁(yè)的前端使用Ajax來(lái)獲取這些數(shù)據(jù)，并進(jìn)行相應(yīng)的處理。

在前端中實(shí)現(xiàn)Ajax獲取PHP返回的數(shù)據(jù)非常簡(jiǎn)單。我們可以使用JavaScript中內(nèi)置的XMLHttpRequest對(duì)象，通過(guò)它來(lái)發(fā)送HTTP請(qǐng)求并接收響應(yīng)。下面是一個(gè)示例的JavaScript代碼：

var xhr = new XMLHttpRequest();
var keyword = document.getElementById('keyword').value;
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var results = JSON.parse(xhr.responseText);
// 在網(wǎng)頁(yè)中顯示匹配結(jié)果
var resultDiv = document.getElementById('results');
resultDiv.innerHTML = '';
for (var i = 0; i < results.length; i++) {
var p = document.createElement('p');
p.innerHTML = results[i];
resultDiv.appendChild(p);
}
}
};
xhr.open('GET', 'search.php?keyword=' + keyword, true);
xhr.send();

在上述的JavaScript代碼中，我們創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象xhr，并通過(guò)它發(fā)送了一個(gè)GET請(qǐng)求到search.php文件，同時(shí)將用戶輸入的關(guān)鍵詞作為參數(shù)傳遞。通過(guò)xhr.onreadystatechange事件的監(jiān)聽(tīng)，我們可以在接收到響應(yīng)后進(jìn)行相應(yīng)的處理。當(dāng)xhr.readyState屬性為4（表示請(qǐng)求已完成）且xhr.status為200（表示成功）時(shí)，我們可以獲取到服務(wù)器返回的數(shù)據(jù)，然后將其顯示在網(wǎng)頁(yè)上。

上述代碼中，我們首先使用JSON.parse()方法將服務(wù)器返回的JSON格式的結(jié)果轉(zhuǎn)化為JavaScript對(duì)象。然后，我們通過(guò)遍歷這個(gè)對(duì)象，創(chuàng)建一個(gè)新的

<p>

元素，并將每個(gè)匹配結(jié)果分別添加到resultDiv元素中。這樣，用戶輸入關(guān)鍵詞后，即可在網(wǎng)頁(yè)上實(shí)時(shí)顯示與關(guān)鍵詞匹配的結(jié)果。

通過(guò)上述的示例，我們可以看出，使用Ajax獲取PHP返回的數(shù)據(jù)非常簡(jiǎn)單。我們只需要編寫(xiě)好相應(yīng)的PHP文件，接收并處理相關(guān)的請(qǐng)求參數(shù)，并將處理結(jié)果以JSON格式返回給前端。在前端，我們使用XMLHttpRequest對(duì)象發(fā)送請(qǐng)求，并通過(guò)xhr.onreadystatechange事件的監(jiān)聽(tīng)來(lái)處理結(jié)果。這樣，我們就可以實(shí)現(xiàn)與服務(wù)器的實(shí)時(shí)交互，從而提升網(wǎng)頁(yè)的用戶體驗(yàn)。