在前端开发中，我们常需要实现实时更新页面的功能，例如实时聊天、实时评论、实时通知等。为了实现这些功能，我们通常会使用轮询或者 WebSocket 技术来更新页面，但是这些方法都有一些缺点，例如轮询需要频繁地向服务器发送请求，而 WebSocket 的实现比较复杂。在本文中，我们将介绍如何使用 Server-Sent Events 和 Ajax 实现实时更新页面的功能。
Server-Sent Events
Server-Sent Events（SSE）是一种基于 HTTP 的实时通信技术，它允许服务器向浏览器发送事件流（Event Stream），并且浏览器可以通过监听这些事件流来实现实时更新页面的功能。与 WebSocket 相比，SSE 更加简单易用，而且可以使用标准的 HTTP 协议进行通信。
服务器端实现
在服务器端实现 SSE，我们需要使用一些特殊的 HTTP 头信息和响应格式。例如，我们需要设置 Content-Type 头信息为 text/event-stream，表示返回的数据是一个事件流。我们还需要设置 Cache-Control 头信息为 no-cache，表示不缓存数据。最后，我们需要按照一定的格式返回数据，例如：
HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache data: Hello, world!\n\n
上面的响应表示返回了一个名为 "message" 的事件，它的数据为 "Hello, world!"。
在实际应用中，我们通常会使用一些框架或者库来实现 SSE。例如，在 Node.js 中，我们可以使用 express 和 sse 中间件来实现 SSE。具体实现方法如下：
// javascriptcn.com 代码示例
const express = require('express');
const sse = require('sse');
const app = express();
app.get('/events', (req, res) => {
const client = new sse(res);
setInterval(() => {
client.send({
event: 'message',
data: 'Hello, world!',
});
}, 1000);
});
app.listen(3000, () => {
console.log('Server started on http://localhost:3000');
});上面的代码中，我们使用了 sse 中间件来实现 SSE，每隔一秒钟向客户端发送一个名为 "message" 的事件，数据为 "Hello, world!"。
客户端实现
在客户端实现 SSE，我们需要使用 EventSource 对象来监听服务器发送的事件流。EventSource 对象有一个 onmessage 事件，当服务器发送事件时，会触发这个事件。我们可以在这个事件中获取到服务器发送的数据，并更新页面。例如：
// javascriptcn.com 代码示例
const source = new EventSource('/events');
source.onmessage = event => {
const data = JSON.parse(event.data);
if (data.event === 'message') {
const message = document.createElement('div');
message.textContent = data.data;
document.body.appendChild(message);
}
};上面的代码中，我们使用 EventSource 对象来监听名为 "/events" 的事件流，当服务器发送名为 "message" 的事件时，会在页面上添加一个包含事件数据的 div 元素。
Ajax
除了 SSE，我们还可以使用 Ajax 技术来实现实时更新页面的功能。在这种方法中，我们通过定时向服务器发送 Ajax 请求来获取最新的数据，然后更新页面。虽然这种方法比较简单易用，但是需要频繁地向服务器发送请求，可能会对服务器造成一定的压力。
客户端实现
在客户端实现 Ajax，我们需要使用 XMLHttpRequest 对象来向服务器发送请求，并在请求完成后更新页面。例如：
// javascriptcn.com 代码示例
function update() {
const xhr = new XMLHttpRequest();
xhr.open('GET', '/data');
xhr.onload = () => {
const data = JSON.parse(xhr.responseText);
const message = document.createElement('div');
message.textContent = data.message;
document.body.appendChild(message);
};
xhr.send();
}
setInterval(update, 1000);上面的代码中，我们定义了一个 update 函数，它每隔一秒钟向服务器发送一个 GET 请求，获取最新的数据，并在页面上添加一个包含数据的 div 元素。
总结
本文介绍了如何使用 Server-Sent Events 和 Ajax 实现实时更新页面的功能。虽然两种方法都可以实现这个功能，但是它们各有优缺点，需要根据具体情况选择使用。SSE 比较简单易用，而且可以使用标准的 HTTP 协议进行通信；而 Ajax 需要频繁地向服务器发送请求，可能会对服务器造成一定的压力，但是可以在不支持 SSE 的浏览器中使用。在实际应用中，我们可以根据具体需求选择使用 SSE 或者 Ajax。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65640588d2f5e1655dd6e292