在前端开发中，我们常需要实现实时更新页面的功能，例如实时聊天、实时评论、实时通知等。为了实现这些功能，我们通常会使用轮询或者 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，表示不缓存数据。最后，我们需要按照一定的格式返回数据，例如：
-------- --- -- ------------- ----------------- -------------- -------- ----- ------ ----------
上面的响应表示返回了一个名为 "message" 的事件，它的数据为 "Hello, world!"。
在实际应用中，我们通常会使用一些框架或者库来实现 SSE。例如，在 Node.js 中，我们可以使用 express 和 sse 中间件来实现 SSE。具体实现方法如下：
----- ------- - -------------------
----- --- - ---------------
----- --- - ----------
------------------ ----- ---- -- -
----- ------ - --- ---------
-------------- -- -
-------------
------ ----------
----- ------- --------
---
-- ------
---
---------------- -- -- -
------------------- ------- -- ------------------------
---上面的代码中，我们使用了 sse 中间件来实现 SSE，每隔一秒钟向客户端发送一个名为 "message" 的事件，数据为 "Hello, world!"。
客户端实现
在客户端实现 SSE，我们需要使用 EventSource 对象来监听服务器发送的事件流。EventSource 对象有一个 onmessage 事件，当服务器发送事件时，会触发这个事件。我们可以在这个事件中获取到服务器发送的数据，并更新页面。例如：
----- ------ - --- -----------------------
---------------- - ----- -- -
----- ---- - -----------------------
-- ----------- --- ---------- -
----- ------- - ------------------------------
------------------- - ----------
-----------------------------------
-
--上面的代码中，我们使用 EventSource 对象来监听名为 "/events" 的事件流，当服务器发送名为 "message" 的事件时，会在页面上添加一个包含事件数据的 div 元素。
Ajax
除了 SSE，我们还可以使用 Ajax 技术来实现实时更新页面的功能。在这种方法中，我们通过定时向服务器发送 Ajax 请求来获取最新的数据，然后更新页面。虽然这种方法比较简单易用，但是需要频繁地向服务器发送请求，可能会对服务器造成一定的压力。
客户端实现
在客户端实现 Ajax，我们需要使用 XMLHttpRequest 对象来向服务器发送请求，并在请求完成后更新页面。例如：
-------- -------- -
----- --- - --- -----------------
--------------- ---------
---------- - -- -- -
----- ---- - -----------------------------
----- ------- - ------------------------------
------------------- - -------------
-----------------------------------
--
-----------
-
------------------- ------上面的代码中，我们定义了一个 update 函数，它每隔一秒钟向服务器发送一个 GET 请求，获取最新的数据，并在页面上添加一个包含数据的 div 元素。
总结
本文介绍了如何使用 Server-Sent Events 和 Ajax 实现实时更新页面的功能。虽然两种方法都可以实现这个功能，但是它们各有优缺点，需要根据具体情况选择使用。SSE 比较简单易用，而且可以使用标准的 HTTP 协议进行通信；而 Ajax 需要频繁地向服务器发送请求，可能会对服务器造成一定的压力，但是可以在不支持 SSE 的浏览器中使用。在实际应用中，我们可以根据具体需求选择使用 SSE 或者 Ajax。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65640588d2f5e1655dd6e292