随着 Web 技术的不断发展，前端与后端之间的数据交互越来越复杂，即时通讯、实时数据更新等需求越来越普遍。为了实现这些功能，前端开发中使用的主要有两种方式：SSE 和 AJAX。而如何选择合适的方式，并如何联动它们，对于前端开发工程师而言，是必须掌握的技能。
SSE：服务器发送事件
SSE 是一种在 Web 中单向实时通讯的技术，它能够在浏览器和服务器之间建立持久性连接，从而实现服务器即时向浏览器发送数据的目的。相比于传统的轮询机制和长轮询机制，SSE 更加高效、实时。
SSE 的基本使用
使用 SSE 的核心是新建一个 EventSource 对象，该对象支持三种事件：
- open：连接建立成功后触发；
- message：接收到服务器发来的数据时触发；
- error：连接异常时触发。
-- -------------------- ---- ------- ----- ------ - --- ------------------- ------------- - -------- ------- - -------------------- - ---------------- - -------- ------- - --------------------------- ----------- - -------------- - -------- ------- - -------------------- ------ -
在服务器端，需要使用特定的消息格式发送数据，格式为：
event: <event name>\n data: <event data>\n\n
其中，event name 为事件名称，可以与前端事件名称匹配；event data 为数据内容。
SSE 的优缺点
SSE 相比于传统的轮询和长轮询方式，具有以下优点：
- 可以避免 HTTP 到 TCP 层的反复建立和断开连接，减轻了服务器负担。
- 可以实时更新数据，时间延迟低，用户体验好。
- 可以自定义事件格式，充分符合实际需求。
但是 SSE 也存在一些缺点：
- 兼容性问题，IE 浏览器不支持 SSE。
- 转发器数量有限制，SSE 服务端连接数量有一定限制。
AJAX：异步 JavaScript 和 XML
AJAX（Asynchronous JavaScript and XML）是一种异步的前端与后端数据交互方式，在不刷新整个页面的基础上，可以局部更新页面数据。它使用 XMLHttpRequest 对象与服务器进行数据交互，并支持异步加载，提升了用户体验。
AJAX 的基本使用
使用 AJAX 最常用的方式是通过 XMLHttpRequest 对象发送请求和接收响应数据。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'url', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log('接收到服务器发来的数据：', xhr.responseText);
}
};
xhr.send();AJAX 的优缺点
AJAX 相比于传统的同步方式，具有以下优点：
- 可以异步响应，不会阻塞页面的操作。
- 可以大大提高用户体验，避免整个页面的刷新。
但 AJAX 也存在一些缺点：
- 可能会导致浏览器缓存过多，占用过多内存。
- 当请求频繁时，可能会引起较大的服务器压力。
SSE 和 AJAX 的选择
SSE 和 AJAX 的选择，主要看业务需求和浏览器兼容性。如果需要即时数据更新，并且用户的浏览器支持 SSE，那么使用 SSE 更加合适；如果需要异步局部刷新数据，并且需要兼容所有浏览器，那么使用 AJAX 更加适合。
更好的一种方案是将两者结合起来，即先使用 SSE 与服务器建立连接，实现即时数据更新，然后使用 AJAX 定期更新数据，实现长时间数据的自动加载。
对于实现该方案的 JavaScript 代码，可以使用下面的示例代码：
-- -------------------- ---- -------
----- ------ - --- ----------------------
----- ------ - ----------------------------------
---------------- - -------- ------- -
--------------------------- ------------
---------------- - -----------
-
-----------------------
----- --- - --- -----------------
--------------- ---------- ------
---------------------- - ---------- -
-- --------------- -- - -- ---------- -- ---- -
--------------------------- ------------------
-
--
-----------
-- -----总结
SSE 和 AJAX 联动可以实现实时监听和定期更新结合的功能，可以大大提高用户体验。不同的业务场景，应该选择不同的方式，灵活运用。同时，需要根据实际情况进行优化，如缓存策略、请求频率等，以提高性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647a1cde968c7c53b05f6e9e