在现代 Web 开发中，Ajax 是一种经常使用的技术，用于通过异步进行数据传输和更新页面。但是在实时应用程序中，Ajax 并不是一个理想的选择，因为它需要频繁的请求和响应，浪费了大量的带宽和资源。这时，Server-Sent Events（SSE）成为了更好的选择。
Ajax
Ajax 是一种通过 JavaScript 和 XMLHttpRequest 对象的异步通信技术，它允许客户端与服务器之间交换数据，而不需要重新加载整个页面。在传统 Web 开发中，当用户需要更新页面时，服务器通常会生成完整的新页面并发送给客户端。
例如，当用户点击一个按钮时，当请求页面时，服务器会处理它，并将完整的 HTML 文档以响应返回。这样，在网速较慢或者服务器负载较高的情况下，这个过程会比较缓慢，用户体验较差。但是利用 Ajax 技术，只需要更新部分页面，不需要完成页面的刷新，提高了用户体验。
Server-Sent Events
Server-Sent Events 是一种基于 HTTP 的网络技术，它与 Ajax 不同，可以实现基于服务器向客户端的推送通知。因此，在实时应用中，相比于 Ajax 技术需要不断的请求和响应，SSE 技术则将推送通知发送到客户端，避免了许多请求和响应开销。
SSE 消息格式一般为纯文本，一条消息对应一个事件，事件由一个相应的名称（event）标识；事件内容由属性和值（如 id: 101, data: "message"）组成。客户端通过监听服务器推送的事件来接收数据。另外，SSE 支持自定义事件类型和自定义数据类型，可以灵活地适应不同的应用需求。
Server-Sent Events 与 Ajax 的比较
在实时应用中，SSE 技术与 Ajax 技术可以实现相似的功能，但它们的实现方式和表现效果有所不同。以下是它们的比较：
性能
Ajax 技术需要不断的发送请求和接收响应，因此会占用微小的网络带宽和增加服务器的负担。而 SSE 技术可以实现服务器向客户端的实时推送通知，避免了不必要的网络请求和响应开销。
兼容性
Ajax 技术广泛应用于各种浏览器，同时还有许多 JavaScript 库和框架提供了 Ajax 的支持。而 SSE 技术需要浏览器支持 EventSource API 和服务端支持 SSE 协议，因此其兼容性在某些方面存在局限性。
实时性
Ajax 技术可以实现实时通讯，但需要客户端不断地发送请求。而 SSE 技术实现了服务器向客户端的实时推送通知，由于没有请求和响应的开销，因此 SSE 技术在实时通讯方面更具有优势。
实例代码
以下是 SSE 技术的用例代码：
------------------------ -
--- ------ - --- ----------------------------
---------------- - --------------- -
--------------------- --- -------- -- ------------
--
-------------- - --------------- -
-------------------------- ------ -- -------
--
- ---- -
--------------------- ---- ------- ---- --- ------- ----------- ----------
-服务端代码：
----- --- - ---------------------
----- ------ - ----------------------------------
----- --- - ---------------
----------------------- ------------- ---- -
------------------------------ ------------
----------------------------- ---------------------
-------------------------------------------- -----
-------------------
----- ---------- - --- ------------------- -----
---------------------- --------------- -
---------------------
---
------------------------ ---------- -
---------------------- -
------------------ ------ --------- ----- - -------- ------- - ---
-- ------
---
---
--------------------代码中，我们通过 EventSource API 创建了一个 SSE 对象，并监听浏览器发送的 SSE 数据。服务端采用了 SSE 库，设置了 SSE 协议的响应头，并通过 setInterval 不断向客户端发送 SSE 消息。
结论
Server-Sent Events（SSE）和 Ajax 技术各有优劣，应该根据实际应用情况进行选择。如果需要实现实时通讯功能，应该优先选择 SSE 技术，它可以消除不必要的网络请求和响应，并提供更流畅的用户体验。反之，如果需要发送请求并获取响应，可以选择 Ajax 技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6731dcee0bc820c5823adb5b