ajax 是一种在网页中实现异步通信的技术，它可以在不刷新整个页面的情况下，通过与服务器交换数据，实现动态更新页面内容的效果。当ajax 请求成功后，在前端可以接收到后端返回的数据，并根据需要对页面进行相应的处理。本文将讨论如何通过ajax 发送请求到数据库，并成功接收数据库返回的数据。
假设有一个网页上显示了一个留言板，用户可以在留言框中输入自己的留言，并点击提交按钮进行提交。我们希望通过ajax 的方式将用户的留言保存到数据库中，并在留言板上实时展示最新的留言。
首先，在前端的HTML 文件中，我们需要添加一个留言框和一个提交按钮。留言框用于用户输入留言内容，提交按钮用于发送请求到后端。
```html
请输入留言内容：
``` 接下来，在JavaScript 中定义一个函数sendMessage()，当用户点击提交按钮时，该函数会被调用。函数中首先获取用户输入的留言内容，并使用ajax 发送请求到后端。 ```javascript function sendMessage() { var message = document.getElementById("message").value; var xhr = new XMLHttpRequest(); // 创建ajax 对象 xhr.open("POST", "saveMessage.php", true); // 设置请求方法和URL // 设置请求头 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 发送请求 xhr.send("message=" + message); } ``` 在上述代码中，我们通过XMLHttpRequest() 构造函数创建了一个ajax 对象，并使用open() 方法设置了请求的方法和URL。其中，"POST" 表示该请求是一个POST 请求，"saveMessage.php" 是后端处理该请求的URL。 接着，我们使用setRequestHeader() 方法设置了请求头，告诉后端发送的数据是以表单形式编码的。在这里，我们指定了"Content-type" 为"application/x-www-form-urlencoded"，表示发送的数据以键值对的形式进行编码。 最后，我们使用send() 方法发送请求。在send() 方法中，我们将留言内容作为参数传递给后端，以便后端能够获取到用户的留言内容。 在后端的saveMessage.php 文件中，我们可以获取到前端发送过来的留言内容，并将其保存到数据库中。 ```php``` 当后端成功将留言保存到数据库中后，我们需要将最新的留言信息返回给前端，并进行相应的展示。为了方便展示，我们可以在前端的HTML 文件中添加一个留言列表的区域，用于展示最新的留言。 ```html``` 在JavaScript 中，我们可以通过ajax 请求获取到后端返回的留言数据，并将其展示在留言列表区域中。 ```javascript function sendMessage() { // ... xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 请求完成且成功 var response = JSON.parse(xhr.responseText); // 解析后端返回的数据 var messageList = document.getElementById("messageList"); // 清空留言列表 messageList.innerHTML = ""; // 遍历留言数据，生成留言项 for (var i = 0; i< response.length; i++) { var messageItem = document.createElement("p"); messageItem.textContent = response[i].message; messageList.appendChild(messageItem); } } }; // ... } ``` 在上述代码中，我们首先通过onreadystatechange 事件监听ajax 请求的状态变化。当请求状态变为4（请求完成）且状态码为200（请求成功）时，代表请求成功。此时，我们可以通过responseText 属性获取到后端返回的数据。由于后端返回的是一个JSON 字符串，我们使用JSON.parse() 方法将其解析成一个JSON 对象。 接着，我们获取到留言列表的DOM 元素，并使用innerHTML 属性清空留言列表。然后，我们遍历后端返回的留言数据，依次生成留言项，并添加到留言列表中。 综上所述，通过ajax 发送请求到数据库，并成功接收数据库的数据，我们可以实现实时更新页面内容的效果。只要后端将最新的数据返回给前端，前端便能够根据需要对页面进行相应的展示。