本文將介紹如何使用Ajax發(fā)送請(qǐng)求到PHP并獲取返回?cái)?shù)據(jù)。Ajax（Asynchronous JavaScript and XML）是一種在不重新加載整個(gè)頁面的情況下與服務(wù)器交換數(shù)據(jù)的技術(shù)，它可以使網(wǎng)頁實(shí)現(xiàn)異步更新，帶來更好的用戶體驗(yàn)。而PHP是一種用于開發(fā)動(dòng)態(tài)網(wǎng)站的腳本語言，可以與數(shù)據(jù)庫交互、接收和處理請(qǐng)求等。通過結(jié)合Ajax和PHP，我們可以實(shí)現(xiàn)實(shí)時(shí)的數(shù)據(jù)交互、動(dòng)態(tài)內(nèi)容更新等功能。

假設(shè)我們有一個(gè)簡(jiǎn)單的網(wǎng)頁，其中包含一個(gè)按鈕和一個(gè)用于展示服務(wù)器返回?cái)?shù)據(jù)的div元素。當(dāng)用戶點(diǎn)擊按鈕時(shí)，我們希望通過Ajax向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器會(huì)返回一些數(shù)據(jù)，并將這些數(shù)據(jù)顯示在div元素上。我們可以通過以下步驟實(shí)現(xiàn)：

// HTML代碼
<button id="btn">點(diǎn)擊獲取數(shù)據(jù)</button>
<div id="result"></div>
// JavaScript代碼
const button = document.getElementById("btn");
const resultDiv = document.getElementById("result");
button.addEventListener("click", function() {
// 創(chuàng)建一個(gè)XMLHttpRequest對(duì)象
const xhr = new XMLHttpRequest();
// 配置請(qǐng)求方法、URL和是否異步
xhr.open("GET", "getdata.php", true);
// 注冊(cè)readystatechange事件，處理服務(wù)器返回?cái)?shù)據(jù)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 將服務(wù)器返回的數(shù)據(jù)顯示在div元素上
resultDiv.innerText = xhr.responseText;
}
};
// 發(fā)送請(qǐng)求
xhr.send();
});

在上述代碼中，我們首先獲取到按鈕和用于展示數(shù)據(jù)的div元素，然后為按鈕注冊(cè)一個(gè)點(diǎn)擊事件。當(dāng)用戶點(diǎn)擊按鈕時(shí)，會(huì)執(zhí)行事件處理函數(shù)。在事件處理函數(shù)中，我們創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，該對(duì)象用于發(fā)送請(qǐng)求和接收服務(wù)器返回的數(shù)據(jù)。

接下來，我們通過調(diào)用xhr.open方法配置請(qǐng)求方法、URL和是否異步。在本例中，我們使用GET方法發(fā)送請(qǐng)求，請(qǐng)求的URL為getdata.php，異步設(shè)置為true，表示發(fā)送這個(gè)請(qǐng)求時(shí)頁面不會(huì)刷新。

然后，我們通過注冊(cè)xhr.onreadystatechange事件來處理服務(wù)器返回的數(shù)據(jù)。該事件在readyState屬性值發(fā)生變化時(shí)觸發(fā)，常用的readyState屬性值有：

1. 0：請(qǐng)求未初始化（尚未調(diào)用open方法）
2. 1：請(qǐng)求已經(jīng)建立（已經(jīng)調(diào)用open方法，并且已經(jīng)傳入了URL）
3. 2：請(qǐng)求已經(jīng)發(fā)送（已經(jīng)調(diào)用send方法）
4. 3：正在接收服務(wù)器返回的數(shù)據(jù)
5. 4：請(qǐng)求已完成，且服務(wù)器返回?cái)?shù)據(jù)成功

在readystatechange事件處理函數(shù)中，我們首先判斷readyState的值是否為4，表示請(qǐng)求已完成。接著，我們還判斷status屬性的值是否為200，這表示服務(wù)器成功返回?cái)?shù)據(jù)。如果二者都滿足，則將服務(wù)器返回的數(shù)據(jù)顯示在div元素上。

最后，我們通過xhr.send方法發(fā)送請(qǐng)求。這樣，當(dāng)用戶點(diǎn)擊按鈕時(shí)，就會(huì)觸發(fā)發(fā)送請(qǐng)求的操作，服務(wù)器返回的數(shù)據(jù)會(huì)被顯示在div元素上。

除了GET方法之外，我們還可以使用POST方法發(fā)送請(qǐng)求。POST請(qǐng)求可以攜帶更大數(shù)據(jù)量，且不會(huì)被URL長(zhǎng)度限制。下面是一個(gè)使用POST方法的例子：

const xhr = new XMLHttpRequest();
xhr.open("POST", "submitdata.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
const data = "name=John&age=20";
xhr.send(data);

在這個(gè)例子中，我們通過調(diào)用xhr.setRequestHeader方法設(shè)置了請(qǐng)求頭，用來告訴服務(wù)器發(fā)送的數(shù)據(jù)類型為表單形式。然后，我們將參數(shù)拼接成字符串形式，并通過xhr.send方法發(fā)送POST請(qǐng)求，服務(wù)器返回的數(shù)據(jù)會(huì)在控制臺(tái)上打印出來。

通過這些示例，我們可以看到如何使用Ajax發(fā)送請(qǐng)求到PHP并獲取返回?cái)?shù)據(jù)。通過結(jié)合Ajax和PHP，我們可以實(shí)現(xiàn)更加交互性和動(dòng)態(tài)的網(wǎng)頁應(yīng)用。