JavaScript 请求接口的方式
约 1153 字大约 4 分钟
2025-01-23
浏览器中使用 JavaScript
请求接口的原生方式,主要有两种方式:XMLHttpRequest
和 fetch
。
除了上面两种常规的方式,还有其他一些方式,如:EventSource
、WebSocket
。
XMLHttpRequest
XMLHttpRequest(XHR)是 JavaScript
中用于与服务器交换数据的 API。它允许你通过 JavaScript
发送 HTTP 请求,并处理响应。XMLHttpRequest
是一种非常灵活和强大的方式来与服务器进行通信,但它也有一些缺点,例如它是基于事件回调的,不支持 Promise,并且需要手动处理错误和超时。
XMLHttpRequest API 使网站能够使用来自服务器的数据仅更新页面的一部分,而不必导航到一个全新的页面。这种做法有时也称为 AJAX
一些三方库,如:jQuery.ajax()
、axios
,都是基于 XMLHttpRequest
的封装。
XMLHttpRequest
的具体使用,参考XMLHttpRequest 使用
Fetch
Fetch API 是 XMLHttpRequest API 的更灵活、更强大的替代品。Fetch API 使用 Promise 而不是事件来处理异步响应,与 Service Worker 很好地集成,并支持 HTTP 的高级方面,例如 CORS。由于这些原因,现代 Web 应用程序中通常使用 Fetch API 而不是 XMLHttpRequest。
fetch
是 ES2015
引入的新特性。从caniuse查询结果中看, IE
中只支持XMLHttpRequest
,不支持fetch
,其他基本都一样了。
fetch
的具体使用,参考fetch 使用
EventSource
EventSource 接口是 web 内容与服务器发送事件通信的接口。一个 EventSource 实例会和 HTTP 服务器开启一个持久化的连接,以 text/event-stream 格式发送事件,此连接会一直保持开启直到通过调用 EventSource.close() 关闭。
EventSource
的具体使用,参考EventSource 使用
WebSocket
WebSocket
是一种全双工通信协议,允许客户端和服务器之间进行实时的双向通信,并且支持POST
请求。但是值得注意的是WebSocket
只支持ws
或wss
开头的接口。WebSocket
握手时并没有提供直接设置请求头的标准方法,它的握手阶段是由浏览器自动处理的,因此你不能直接在创建 WebSocket
连接时设置请求头,但可以通过通过 URL
参数传递的方式传递信息。
WebSocket
的具体使用,参考WebSocket 使用
WebTransport
WebTransport API 提供了对 WebSockets 的现代更新,使用 HTTP/3 传输在客户端和服务器之间传输数据。WebTransport 支持多个流、单向流和无序传输。它支持通过流进行可靠传输,并通过类似 UDP 的数据报实现不可靠的传输。
WebTransport
的具体使用,参考WebTransport 使用
三方库
jQuery.ajax()
jQuery 的 ajax()
方法是一个用于发送 HTTP 请求的函数。它接受一个配置对象作为参数,该对象可以包含请求的类型、URL、数据、回调函数等信息。ajax()
方法返回一个 jqXHR
对象,该对象表示一个异步请求。
jQuery.ajax()
的具体使用,参考jQuery 请求接口
axios
Axios 是一个基于 Promise 的 HTTP 客户端,适用于 node.js 和浏览器。它是同构的( 它可以在具有相同代码库的浏览器和 nodejs 中运行)。在服务器端,它使用本机 node.js http 模块,而在客户端(浏览器)上使用 XMLHttpRequest。
Axios
的具体使用,参考Axios 使用
Socket.IO
Socket.IO 是一个库,可在客户端和服务器之间实现低延迟、双向和基于事件的通信。Socket.IO 不是 WebSocket 实现。而是多种技术的综合实现,所以尽管 Socket.IO 确实在可能的情况下使用 WebSocket 进行传输,但它会向每个数据包添加额外的元数据。这就是为什么 WebSocket 客户端将无法成功连接到 Socket.IO 服务器,并且 Socket.IO 客户端也将无法连接到普通 WebSocket 服务器。正因为底层使用了多种技术,所以具有降级功能,即如果 WebSocket 连接失败,它将尝试使用其他方法(如轮询),这使得在可靠性更新方面,Socket.IO 比 WebSocket 更好。
Socket.IO
的具体使用,参考官方文档Socket.IO