ajax 是一種在網(wǎng)頁(yè)中實(shí)現(xiàn)異步通信的技術(shù)，它可以在不刷新整個(gè)頁(yè)面的情況下，通過(guò)與服務(wù)器交換數(shù)據(jù)，實(shí)現(xiàn)動(dòng)態(tài)更新頁(yè)面內(nèi)容的效果。當(dāng)ajax 請(qǐng)求成功后，在前端可以接收到后端返回的數(shù)據(jù)，并根據(jù)需要對(duì)頁(yè)面進(jìn)行相應(yīng)的處理。本文將討論如何通過(guò)ajax 發(fā)送請(qǐng)求到數(shù)據(jù)庫(kù)，并成功接收數(shù)據(jù)庫(kù)返回的數(shù)據(jù)。 假設(shè)有一個(gè)網(wǎng)頁(yè)上顯示了一個(gè)留言板，用戶可以在留言框中輸入自己的留言，并點(diǎn)擊提交按鈕進(jìn)行提交。我們希望通過(guò)ajax 的方式將用戶的留言保存到數(shù)據(jù)庫(kù)中，并在留言板上實(shí)時(shí)展示最新的留言。 首先，在前端的HTML 文件中，我們需要添加一個(gè)留言框和一個(gè)提交按鈕。留言框用于用戶輸入留言內(nèi)容，提交按鈕用于發(fā)送請(qǐng)求到后端。 ```html

請(qǐng)輸入留言內(nèi)容：

提交``` 接下來(lái)，在JavaScript 中定義一個(gè)函數(shù)sendMessage()，當(dāng)用戶點(diǎn)擊提交按鈕時(shí)，該函數(shù)會(huì)被調(diào)用。函數(shù)中首先獲取用戶輸入的留言內(nèi)容，并使用ajax 發(fā)送請(qǐng)求到后端。 ```javascript function sendMessage() { var message = document.getElementById("message").value; var xhr = new XMLHttpRequest(); // 創(chuàng)建ajax 對(duì)象 xhr.open("POST", "saveMessage.php", true); // 設(shè)置請(qǐng)求方法和URL // 設(shè)置請(qǐng)求頭 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 發(fā)送請(qǐng)求 xhr.send("message=" + message); } ``` 在上述代碼中，我們通過(guò)XMLHttpRequest() 構(gòu)造函數(shù)創(chuàng)建了一個(gè)ajax 對(duì)象，并使用open() 方法設(shè)置了請(qǐng)求的方法和URL。其中，"POST" 表示該請(qǐng)求是一個(gè)POST 請(qǐng)求，"saveMessage.php" 是后端處理該請(qǐng)求的URL。 接著，我們使用setRequestHeader() 方法設(shè)置了請(qǐng)求頭，告訴后端發(fā)送的數(shù)據(jù)是以表單形式編碼的。在這里，我們指定了"Content-type" 為"application/x-www-form-urlencoded"，表示發(fā)送的數(shù)據(jù)以鍵值對(duì)的形式進(jìn)行編碼。 最后，我們使用send() 方法發(fā)送請(qǐng)求。在send() 方法中，我們將留言內(nèi)容作為參數(shù)傳遞給后端，以便后端能夠獲取到用戶的留言內(nèi)容。 在后端的saveMessage.php 文件中，我們可以獲取到前端發(fā)送過(guò)來(lái)的留言內(nèi)容，并將其保存到數(shù)據(jù)庫(kù)中。 ```php``` 當(dāng)后端成功將留言保存到數(shù)據(jù)庫(kù)中后，我們需要將最新的留言信息返回給前端，并進(jìn)行相應(yīng)的展示。為了方便展示，我們可以在前端的HTML 文件中添加一個(gè)留言列表的區(qū)域，用于展示最新的留言。 ```html``` 在JavaScript 中，我們可以通過(guò)ajax 請(qǐng)求獲取到后端返回的留言數(shù)據(jù)，并將其展示在留言列表區(qū)域中。 ```javascript function sendMessage() { // ... xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 請(qǐng)求完成且成功 var response = JSON.parse(xhr.responseText); // 解析后端返回的數(shù)據(jù) var messageList = document.getElementById("messageList"); // 清空留言列表 messageList.innerHTML = ""; // 遍歷留言數(shù)據(jù)，生成留言項(xiàng) for (var i = 0; i< response.length; i++) { var messageItem = document.createElement("p"); messageItem.textContent = response[i].message; messageList.appendChild(messageItem); } } }; // ... } ``` 在上述代碼中，我們首先通過(guò)onreadystatechange 事件監(jiān)聽(tīng)ajax 請(qǐng)求的狀態(tài)變化。當(dāng)請(qǐng)求狀態(tài)變?yōu)?（請(qǐng)求完成）且狀態(tài)碼為200（請(qǐng)求成功）時(shí)，代表請(qǐng)求成功。此時(shí)，我們可以通過(guò)responseText 屬性獲取到后端返回的數(shù)據(jù)。由于后端返回的是一個(gè)JSON 字符串，我們使用JSON.parse() 方法將其解析成一個(gè)JSON 對(duì)象。 接著，我們獲取到留言列表的DOM 元素，并使用innerHTML 屬性清空留言列表。然后，我們遍歷后端返回的留言數(shù)據(jù)，依次生成留言項(xiàng)，并添加到留言列表中。 綜上所述，通過(guò)ajax 發(fā)送請(qǐng)求到數(shù)據(jù)庫(kù)，并成功接收數(shù)據(jù)庫(kù)的數(shù)據(jù)，我們可以實(shí)現(xiàn)實(shí)時(shí)更新頁(yè)面內(nèi)容的效果。只要后端將最新的數(shù)據(jù)返回給前端，前端便能夠根據(jù)需要對(duì)頁(yè)面進(jìn)行相應(yīng)的展示。