什么是 SSE？
SSE（Server-Sent Events）是一种服务器向客户端推送数据的技术。与 AJAX 不同之处在于 SSE 不需要客户端主动发起请求，服务器会自动将数据推送给客户端，从而实现实时更新。SSE 基于 HTTP 协议，使用简单。在浏览器兼容时，SSE 可以替代传统的轮询和长轮询技术。
什么是 AJAX？
AJAX（Asynchronous JavaScript And XML）是一种使用 JS 发送异步请求的技术。AJAX 可以在浏览器不刷新的情况下向服务器发送请求，并通过回调函数将服务器返回的数据更新到页面上，从而实现无刷新更新页面的效果。AJAX 主要用于实现异步数据获取和局部更新。
SSE 与 AJAX 的联系
SSE 和 AJAX 都是用于实现响应式技术的技术。它们都能够在不刷新页面的情况下向客户端返回数据。SSE 可以实现实时更新，而 AJAX 可以实现异步更新。在实际项目中，SSE 和 AJAX 都可以用于实现实时通知、数据推送等场景。
SSE 与 AJAX 的区别
发送方式：AJAX 是客户端主动发起请求，需要通过 JS 发送异步请求来向服务器申请数据；而 SSE 是服务器主动向客户端推送数据，客户端无需发起请求。
数据传输类型：AJAX 可以通过多种格式传输数据，包括 JSON、XML 和 HTML 等；而 SSE 只能使用纯文本格式传输数据。
数据传输效率：在需要客户端实时接收数据的场景下，SSE 能够实现更高效的数据传输，减少了客户端频繁请求服务器的 HTTP 请求，从而减轻了服务器压力。
服务器压力：AJAX 需要频繁向服务器发起请求，如果请求数量过多，会导致服务器响应速度变慢，甚至无法响应；而 SSE 的数据推送方式可以减轻服务器的压力，从而提高服务器的响应速度。
示例代码
SSE
服务器端代码：
-- -------------------- ---- -------
--- ---- - ----------------
-------------------------- ----- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
--- ---------- - -------------------- -- -
----------------- - --- ----------------------- - --------
-- ------
----------------------------------- -------- -- -
--------------------------
-- -------
----------------客户端代码：
var eventSource = new EventSource('/sse');
eventSource.addEventListener('message', function (e) {
console.log(e.data);
}, false);AJAX
客户端代码：
-- -------------------- ---- -------
--- --- - --- -----------------
---------------------- - -------- -- -
-- --------------- --- ------------------- -- ---------- --- ---- -
------------------------------
-
--
--------------- ---------
-----------服务器端代码：
-- -------------------- ---- -------
--- ---- - ----------------
-------------------------- ----- ---- -
------------------ -
--------------- -------------------
------------------------------ ----
------------------------------- -----
---
--- ---- - - ----- --- ----------------------- --
------------------------------
----------------总结
SSE 和 AJAX 都是实现响应式技术的有效工具。在具体应用时，需要根据实际情况来选择何时使用 SSE，何时使用 AJAX。如果需要实现实时性较高、对服务器压力不敏感的场景，可以考虑使用 SSE；如果需要实现异步数据获取、局部更新的场景，可以考虑使用 AJAX。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf3c1bb5eee0b5256a1b3b