在前端开发中，我们经常需要从服务器获取数据并将其呈现给用户。现在有两种主要的方式可以实现这个目标：Server-sent Events 和 Ajax。但是，这两种技术有什么不同？何时选择哪个？本文将对此进行深入探讨。
Server-sent Events
Server-sent Events（SSE）是一种基于 HTTP 的服务器推送技术。它允许服务器向客户端发送数据，而无需客户端明确地请求这些数据。这使得 SSE 成为一种非常有效的实时通信方式。
在使用 SSE 时，客户端会建立一个持久连接，以便服务器可以随时向其推送数据。当服务器有新数据时，它将该数据发送到客户端，客户端可以通过监听事件来获取这些数据。SSE 还支持自定义事件类型和重连机制。
以下是一个使用 SSE 的示例代码：
-- -------------------- ---- ------- ----- ----------- - --- -------------------- --------------------------------------- ----- -- - ------------------------ --- ------------------------------------- ----- -- - ------------------ ----------- ------- ---
在这个示例中，我们使用 EventSource 对象建立了一个 SSE 连接，并监听了 message 和 error 事件。当服务器发送新数据时，message 事件将被触发，我们可以在其中获取数据并进行处理。如果发生任何错误，error 事件将被触发。
Ajax
Ajax（Asynchronous JavaScript and XML）是一种在后台与服务器交换数据的技术，它可以使网页实现异步更新。Ajax 可以通过 XMLHttpRequest 对象来实现。
使用 Ajax 时，客户端向服务器发送 HTTP 请求，服务器将数据作为 HTTP 响应返回。客户端可以在收到响应后对数据进行处理。Ajax 还支持异步请求和跨域请求。
以下是一个使用 Ajax 的示例代码：
-- -------------------- ---- -------
----- --- - --- -----------------
---------------------- - -- -- -
-- --------------- --- -------------------- -
-- ----------- --- ---- -
------------------------------
- ---- -
------------------ ----------- ----------------
-
-
--
--------------- ---------
-----------在这个示例中，我们创建了一个 XMLHttpRequest 对象，并设置了 onreadystatechange 回调函数来处理响应。当请求状态发生改变时，回调函数将被触发。如果请求成功，我们可以通过 responseText 属性获取响应数据。如果请求失败，我们可以通过 statusText 属性获取错误信息。
何时选择哪个？
Server-sent Events 和 Ajax 都可以用于从服务器获取数据，并且它们都有自己的优缺点。那么何时选择哪个呢？
SSE 适用于需要实时更新数据的场景，例如在线聊天、股票行情等。由于 SSE 建立的是持久连接，因此它可以更快地传输数据，并且可以减少网络延迟。另外，SSE 还支持自定义事件类型和重连机制，使得它更加灵活和可靠。
Ajax 适用于需要获取静态数据或者在用户操作后更新数据的场景，例如获取文章列表、提交表单等。由于 Ajax 是通过 HTTP 请求来获取数据，因此它可以缓存数据并且可以在后台处理，不会影响用户体验。另外，Ajax 还支持异步请求和跨域请求，使得它更加灵活和强大。
综上所述，当你需要实时更新数据时，应该选择 SSE。当你需要获取静态数据或者在用户操作后更新数据时，应该选择 Ajax。
结论
Server-sent Events 和 Ajax 都是非常有用的前端技术，它们可以帮助我们从服务器获取数据并将其呈现给用户。在选择使用哪个技术时，我们需要根据具体的场景和需求来进行选择。希望本文对您有所启发，并且可以帮助您更好地使用这两种技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672721242e7021665e1c3ac4