在 Web 开发中，前端与后端的数据通讯是一个非常重要的环节。为了实现数据的实时推送和异步加载，现在常用的两种方式是 SSE(Server-Sent Events) 和 JSONP(JSON with Padding)。它们都有自己的优点和缺点，在实际项目中需要根据具体情况进行选择。本文将对两者进行详细的比较和分析。
SSE
SSE 是 HTML5 的一项新特性，它是基于 HTTP 协议的一种服务器推送技术，支持单向数据流，即只能由服务器端向客户端推送数据，而客户端不能向服务器发送数据。SSE 协议中，浏览器通过发送“GET”请求，向服务器建立一个持久连接，服务器持续不断地发送数据，浏览器通过监听“message”事件，可以获取服务器端实时推送过来的数据。在使用 SSE 时，需要服务器端支持 SSE 协议。
优点
- 实时性好：SSE 支持服务器主动推送数据，实时性很高。
- 开发使用方便：SSE 是 HTML5 原生支持，不需要引入额外的库或框架。
- 可以发送任意格式数据：SSE 支持发送文本、JSON、XML、HTML 等数据格式。
缺点
- 兼容性不好：SSE 是 HTML5 的新特性，不兼容部分浏览器。
- 单向数据流：SSE 只支持服务器端向客户端推送数据，客户端不能向服务器发送数据。
- 长连接不稳定：长时间连接会占用一定的资源和带宽，容易出现连接断开的问题。需要应对服务器端主动关闭连接等问题。
示例代码
-- -------------------- ---- -------
-- -----------
-- -- --- --
--- ----------- - --- -----------------------
-- -- ------- --
--------------------------------------- -------- ------- -
------------------------
-- -------
-- ---------
----- ---- - ----------------
----------------------------------- ----------
----------------------- -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- -----------
-----------------------
-------------------------- ------------
-- ------
----------------以上代码实现了一个简单的服务器推送示例。在 client.html 中创建 SSE 对象，并监听“message”事件，在 server.js 中创建 HTTP 服务器对象，在处理请求时，设置响应头信息，建立长连接，然后通过 setInterval 不断向客户端推送数据。
JSONP
JSONP 是一种跨域请求数据的方法，它可以解决跨域限制的问题。在使用 JSONP 时，浏览器通过动态创建<script>标签，向服务器请求数据，服务器返回一段 JS 代码，浏览器接收到响应后自动执行这段 JS 代码。通常情况下，服务器返回的是一段 JSON 格式的数据，这也是 JSONP 的名字的由来。在返回数据的同时，可以执行一些回调函数，实现异步加载数据。</p> <h3>优点</h3> <ol> <li>跨域请求数据：JSONP 可以跨域请求数据，解决跨域限制的问题。</li> <li>兼容性好：JSONP 支持性很好，几乎所有浏览器都支持。</li> <li>可以返回任意格式数据：JSONP 可以将任意格式的数据格式化成 JSON 格式返回。</li> </ol> <h3>缺点</h3> <ol> <li>只支持 GET 请求：JSONP 只支持 GET 请求，不支持 POST 请求。</li> <li>安全性差：JSONP 请求时，需要手动构造请求 URL，容易受到恶意第三方的攻击。</li> <li>不支持错误处理：JSONP 请求无法捕获到请求失败的错误信息，不利于调试和错误处理。</li> </ol> <h3>示例代码</h3> <pre class="prettyprint ">-- -------------------- ---- ------- -- ----------- -- -- ----- -- -------- --------------- ------------- - ------ --- ---------------- --------- ------- - --- ------ - --------------------------------- ---------- - --- - ------------ - ------------- ---------------------------------- -------------------- - -------- ------ - ------ --------------------- ---------------------------------- -- ------ - -------------- - ---- - --------- - -- --- - -- -- ----- -- ---------------------------------------- ------------------------------ ------ - ------------------ ----------------- -- - --------------------- --- -- ---------- -- -- ----- ---- ------------- - ------------------ ----- - -------------------- ---------- ------------------ ---- -----------------------------------------</pre><p>以上代码实现了一个最简单的 JSONP 示例。在 client.html 中定义 fetchJsonp 函数，该函数通过动态创建<script>标签，向服务器请求数据，在成功获取数据后，执行回调函数来获取数据。在 server.php 中，接收请求后，返回一段 JS 代码，其中包含回调函数名以及 JSON 格式的数据。</p> <h2>总结</h2> <p>SSE 和 JSONP 都是常用的前端与后端数据通讯方式，各自有自己适用的场景和优缺点。需要在实际项目中深入理解并根据具体情况选择使用哪种方式。如果需要实现实时推送数据，可以选择 SSE；如果需要解决跨域限制的问题，可以选择 JSONP。但开发中需要注意，SSE 在兼容性和稳定性方面有一定的问题，而 JSONP 则存在安全性和 GET 请求限制的问题。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/64f86a13f6b2d6eab3078f9a">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/64f86a13f6b2d6eab3078f9a">https://www.javascriptcn.com/post/64f86a13f6b2d6eab3078f9a</a></p> </blockquote>