阅读量:0
XMLHttpRequest 是一个用于创建异步 HTTP 请求的 JavaScript 对象。通过使用 XMLHttpRequest，你可以实现客户端与服务器之间的实时通信。以下是一个简单的示例，展示了如何使用 XMLHttpRequest 实现实时通信：
- 创建一个 HTML 文件，如
index.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>XMLHttpRequest Real-time Communication</title> </head> <body> <h1>XMLHttpRequest Real-time Communication</h1> <button id="sendRequest">Send Request</button> <ul id="responseList"></ul> <script src="main.js"></script> </body> </html> - 创建一个 JavaScript 文件，如
main.js：
document.getElementById('sendRequest').addEventListener('click', sendRequest); function sendRequest() { const xhr = new XMLHttpRequest(); const url = 'server.php'; // 你的服务器端脚本地址 // 设置请求类型和服务器地址 xhr.open('GET', url, true); // 设置请求完成时的回调函数 xhr.onload = function () { if (xhr.status === 200) { const response = JSON.parse(xhr.responseText); addResponseToList(response); sendRequest(); // 递归调用以实现实时通信 } else { console.error('Error:', xhr.statusText); } }; // 发送请求 xhr.send(); } function addResponseToList(response) { const responseList = document.getElementById('responseList'); const listItem = document.createElement('li'); listItem.textContent = response.message; responseList.appendChild(listItem); } - 创建一个服务器端脚本（这里使用 PHP 作为示例）：
<?php header('Content-Type: application/json'); // 这里可以连接数据库或执行其他操作来获取实时数据 $message = 'Hello from server!'; // 发送 JSON 格式的响应 echo json_encode(['message' => $message]); - 将
server.php部署到一个支持 PHP 的 Web 服务器上，并确保index.html和main.js文件位于同一目录下。
现在，当你在浏览器中打开 index.html 并点击 “Send Request” 按钮时，客户端将通过 XMLHttpRequest 向服务器发送请求，服务器将返回一个 JSON 格式的响应。客户端接收到响应后，将其添加到列表中，并再次发送请求以实现实时通信。
