XMLHttpRequest 是一個用于創建異步 HTTP 請求的 JavaScript 對象。通過使用 XMLHttpRequest，你可以實現客戶端與服務器之間的實時通信。以下是一個簡單的示例，展示了如何使用 XMLHttpRequest 實現實時通信：
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>
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
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 格式的響應。客戶端接收到響應后，將其添加到列表中，并再次發送請求以實現實時通信。
