前后端实现通信的方式

前后端实现通信的方式

1、AJAX & XMLHttpRequest

AJAX（Asynchronous JavaScript And XML ）是一种使用XMLHttpRequest 技术构建更复杂，动态的网页的编程实践。

AJAX允许只更新一个 HTML页面的部分DOM，而无须重新加载整个页面。AJAX还允许异步工作，这意味着当网页的一部分正试图重新加载时，您的代码可以继续运行。

通过交互式网站和现代 Web 标准，AJAX正在逐渐被 JavaScript 框架中的函数和官方的 Fetch API标准取代。

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。XMLHttpRequest 在AJAX 编程中被大量使用。

1.1、构造函数

通过构造函数初始化一个 XMLHttpRequest 实例对象

const xhr = new XMLHttpRequest()

1.2、属性

• readyState：
  • 0：UNSENT 创建代理后，调用open方法前，请求未初始化；new XMLHttpRequest()
  • 1： OPENED 调用open方法后，服务器连接已建立；xhr.open('GET', '/api', true)
  • 2：HEADERS_RECEIVED 已调用send方法，响应头和状态已经可获得；xhr.send(null)
  • 3：LOADING 下载中，responseText响应体已包含部分数据；xhr.onprogress
  • 4：DONE 下载操作完成，响应已就绪。 xhr.onload
• status：将状态返回为数字（例如，“Not Found”为404，“OK”为200）；
• statusText：以字符串形式返回状态（例如，“Not Found”或“OK”）；
• responseText：以文本形式返回响应；
• responseXML：获得 XML 形式的响应数据。
• response：返回响应的正文。返回的类型可为：ArrayBuffer、Blob、Document、 JavaScript Object或 DOMString，取决于responseType属性。
  • 如果请求尚未完成或未成功，则取值是 null 。
  • 读取文本数据时如果将 responseType 的值设置成"text"或""且当readyState为 LOADING 时，response 包含到目前为止该请求已经取得的内容。
  • readyState=4&&status=200时，表示全部数据。
• responseURL：返回响应的序列化URL；
  • 如果URL为空则返回空字符串；
  • 有锚点，则位于URL # 后面的内容会被删除。
  • 如果URL有重定向， responseURL 的值会是经过多次重定向后的最终 URL 。
• responseType：枚举字符串值，用于指定响应中包含的数据类型。
  • 要在调用 open() 初始化请求之后调用，并且要在调用 send() 发送请求到服务器之前调用；XMLHttpRequest.responseType
  • arraybuffer、blob、document、json、text/""、ms-stream(仅IE支持)。
• timeout：超时时间，代表请求自动终止前所消耗毫秒数；默认值为 0，意味着没有超时。
  • 在调用 open() 方法之后且在调用 send() 方法之前设置。
• upload：返回一个 XMLHttpRequestUpload对象，用来表示上传的进度，可以通过对其绑定事件来追踪它的进度。
  • 支持绑定的事件除onreadystatechange外，与xhr一致
• withCredentials：跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)，boolean；
  • 当值为 true时，后端必须增加响应头信息Access-Control-Allow-Origin，且必须指定域名，不能为*。
  • 如果在同域下配置xhr.withCredentials，无论配置true还是false，效果都会相同，且会一直提供凭据信息。

1.3、方法

• open(method,url,async)：初始化一个请求；

  • 参数：
    • method：请求的类型、
    • URL 、
    • async：是否异步处理请求true/false；默认为true，为false时，表示同步，代码直接放在send方法之后即可。
    • user：可选的用户名用于认证用途；默认为null。
    • password：可选的密码用于认证用途，默认为null。

• overrideMimeType：指定一个MIME类型用于替代服务器指定的类型，必须在send前调用。

  • 参数：mimeType 默认为 "text/xml"；
  • 返回值：undefined；

• setRequestHeader：设置HTTP请求头部；必须在open方法和send之间调用。

  • 参数：header 属性的名称。value 属性的值。
  • 多次对同一个请求头赋值，只会生成一个合并了多个值的请求头

• send：发送 HTTP 请求；

  • 参数：body 要发送的数据体，默认值为 null，GET或者HEAD应设置为 null；
  • 返回值：undefined；

• abort：终止请求，readyState被置为0，status置为0；

  • 参数：无；
  • 返回值：undefined；

• getAllResponseHeaders：返回所有的响应头，以 CRLF 分割的字符串，或者 null 如果没有收到任何响应。

  • 参数：无；

  • 返回值：原始header头，例如：

    date: Fri, 08 Dec 2017 21:04:30 GMT\r\n
    content-encoding: gzip\r\n
    

• getResponseHeader：返回包含指定响应头文本的字符串。有多个一样的，则用逗号和空格将值分隔。

  • 参数：name 要返回的报文项名称，不区分大小写；
  • 返回值：报文项值，如果连接未完成，响应中不存在报文项，或者被W3C限制，则返回null。

1.4、事件

• abort：当一个请求终止时；
• error：当请求遇到错误时；
• load：请求完成的时候会触发；
• loadend：在一个资源的加载进度停止之后被触发 (例如，在已经触发“error”，“abort”或“load”事件之后)；
• loadstart：当程序开始加载时；
• progress：在请求接收到数据的时候被周期性触发；
  • 下载的progress事件属于XMLHttpRequest对象，可获取已下载的数据长度，及总长度；
  • 上传的progress事件属于XMLHttpRequest.upload对象。可获取已上传的数据长度，及总长度；
• readstatechange：每当readyState的属性改变时，就会调用该函数；
• timeout：当进度由于预定时间到期而终止时；

2、Fetch API

基于 Promise，提供了一个获取资源的JavaScript接口（包括跨域请求），用于访问和操纵 HTTP 管道的一些具体部分，核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。

相较于 XMLHttpRequest，它更高效和具有扩展性，可以很容易地被其他技术使用。

2.1、fetch()方法

• 参数（同Request对象的参数）：
  • input
  • init
• 返回值：无论请求成功与否，它都返回一个 Promise 对象；
  • resolve 对应请求的 Response，4xx/5xx等也会在此，200-299状态码对应res.ok为true；
  • reject：网络错误，或者使用AbortController终止请求，或含有用户名密码的url；

2.2、Headers

对http请求和响应标头执行各种操作；可直接在for…of…中使用；

• 构造器：new Headers(init);
• 参数：init：对象字面量，一个名称-值对数组；或现有 Headers对象。
• 方法：
  • append(name, value)：将新值附加到对象内的现有标头上，若存在附加到值集的末尾；
  • delete(name)：删除一个标头；
  • get(name)：返回指定名称对应的所有值字符串，不存在则为null；
  • has(name)：是否包含指定标头
  • entries()、keys()、values()：遍历此对象中包含的所有键/值对；

2.3、Request

表示资源请求（实验中浏览器尚未完全支持），

• 构造器：new Request(input[, init]);
  • 参数：
    • input：要获取资源的 URL，或者一个Request对象；
    • init：一个配置项对象，包括所有对请求的设置，可选参数详细见【属性】中的值；
• 属性：
  • method：请求方法
  • url：请求的url
  • headers：请求相关的Headers对象；
  • context：请求的上下文，例如audio、image、iframe等；
  • referrer：请求来源；例如client、on-referrer、或url；
  • referrerPolicy：请求来源的策略；例如no-referrer；
  • priority：请求相对于其他请求的提示优先级；
    • high、low、auto（默认，由浏览器决定优先级）；
  • mode：请求模式，例如：
    • cors：允许跨域请求；
    • no-cors：指向另一个源不会返回错误也不会返回response；
    • same-origin：确保始终向您的来源发出请求；若指向另一个源则会错误；
    • navigate：一种支持导航的模式；
    • websocket：仅在建立WebSocket连接时使用的特殊模式。
  • credentials：在跨域请求的情况下，用户代理是否应该从其他域发送 cookie；
    • omit：永远不要发送或接收cookies。
    • same-origin：默认值，如果 URL 与调用脚本位于同一来源，则发送用户凭据；
    • include：始终发送用户凭据。
  • redirect：如何处理重定向的模式；默认：follow，error，manual；
  • integrity：请求的子资源的完整性值，未制定则返回空字符串；
  • cache：请求的缓存模式（缓存必须由服务端开启，请求中的此属性仅用于限制是否读取缓存）；
    • default：浏览器读取缓存，如果有效则返回，否则请求到服务器，指示资源是否改变，否则读取缓存，是则下载资源更新缓存。
    • no-store：不读取缓存，且下载后不更新缓存；
    • reload：不读取缓存，下载后更新缓存；
    • no-cache：读取缓存，只要存在不管是否在有效期均请求到服务器，指示资源是否改变，否则读取缓存。其他情况均下载后更新缓存；
    • force-cache：读取缓存，不管否在有效期均返回缓存内容，否则下载后更新缓存；
    • only-if-cached：读取缓存，不管否在有效期均返回缓存内容，否则浏览器响应504网关超时；
  • Body：请求体，值为一个ReadableStream或者null；
    • Body.body：曝光ReadableStream主体的getter
    • Body.bodyUsed：主体是否已经被用于一个响应中已经被读取；
• 方法：
  • arrayBuffer()：作为一个ArrayBuffer读取请求正文；
  • blob：作为一个Blob读取请求正文；
  • clone：创建当前请求对象的副本；
  • formData：作为一个FormData读取请求正文；
  • json：作为一个JSON读取请求正文；
  • text：作为一个String读取请求正文；

2.4、Response

对请求的响应；

• 构造函数new Response(body, init);
• 参数：
  • body：响应定义主体的对象。这可以是null（这是默认值）；
    • 类型可为Blob，BufferSource、FormData、ReadableStream、URLSearchParams、USVString；
  • init：响应的自定义设置；
    • status：状态码；statusText：与状态码相关联的信息；headers：Headers对象；
• 属性：
  • body：ReadableStream或null；通过getReader()方法创建读取器读取；
  • bodyUsed：主体是否已经被读取；
  • headers：响应相关的Headers对象；
  • ok：说明响应是否成功（状态在 200-299 范围内）
  • redirected：是否是您发出的重定向请求的结果；
  • status：状态码；
  • statusText：状态码描述信息；
  • type：响应的类型；
    • basic：正常的，相同的来源响应；
    • cors：从有效的跨域请求中收到响应；
    • error： 网络错误。没有描述错误的有用信息可用。响应的状态为 0，标头为空且不可变。
    • opaque：对跨域资源的“no-cors”请求的响应。
    • opaqueredirect: 获取请求是用redirect: "manual". Response 的状态为 0，headers 为空，body 为 null，trailer 为空。
  • url：响应的 URL。该url属性的值将是任何重定向后获得的最终 URL。
• 方法：
  • 与Request一致；
  • error：返回一个Response与网络错误关联的新对象（尚未在任何地方支持）；
  • redirect(url[, status])：返回Response一个重定向到指定 URL 的结果

2.5、ReadableStream

代表一个可读的字节数据流；

• 构造器：new ReadableStream([underlyingSource, queuingStrategy]);
  • underlyingSource：包含方法和属性的对象，这些方法和属性定义了构造的流实例的行为方式；
    • start(controller)：在构造对象时立即调用；
    • pull(controller)：当流的内部块队列未满时，将被重复调用，直到它达到它的高水位线。
    • cancel(reason)：如果应用程序发出要取消流的信号，会调用此方法。
    • type：此属性控制正在处理的可读流的类型。
    • autoAllocateChunkSize：
  • queueingStrategy：定义流的排队策略的对象
    • highWaterMark：一个非负整数——这定义了在应用背压之前可以包含在内部队列中的块的总数。
    • size(chunk)：这表示每个块使用的大小，以字节为单位。
• 属性：
  • locked：返回可读流是否锁定，被锁定时，在释放此读取器之前无法获取其他读取器。
• 方法：
  • cancel()：调用取消后该数据丢失，并且流不再可读。
  • getReader({mode})：创建一个读取器并将流锁定，返回一个ReadableStreamDefaultReader实例：
    • 属性：closed：当流关闭时返回 a Promise，或者如果流抛出错误或读取器的锁被释放则拒绝。
    • 方法：
      • cancel()：取消流并返回Promise；
      • read()：返回一个Promise接收内部队列中下一个块的流；
      • releaseLock()：释放读者对流的锁定。
  • pipeThrough()：提供了一种可链接的方式，通过转换流或任何其他可写/可读对来传输当前流。
  • pipeTo()：传递给给定的值，并在管道过程成功完成时返回一个WritableStream；
  • Tee()：返回一个包含两个结果分支的二元素数组作为新实例。

3、EventSource

即SSE（Server-Sent Events服务端推送）技术，从HTTP演变而来，使用HTTP传输，单向实时通信。

SSE的简单模型是：一个客户端发起一个GET请求，去从服务器端订阅一条“流”，客户端不会关闭连接。之后服务端可以发送消息给客户端直到服务端或者客户端关闭该“流”，所以eventsource也叫作"server-sent-event"。

SSE在设计的时候就有一些websocket没有的特性,比如自动重连接,event IDs,以及发送随机事件的能力，更加轻量。相对于轮询，可以减少http请求。

不能处理客户端请求流，用于传输UTF-8数据的，所以对于传输二进制流是低效率的，即使你转为base64的话，反而增加带宽的负载。

3.1、构造器

返回一个EventSource实例，new EventSource(url, configuration);

• 参数：
  • url：事件/消息提供服务的远程资源的位置。
  • configuration：提供配置新连接的选项。
    • withCredentials：默认false，指示是否将CORS设置为include；
• 属性
  • readyState：连接状态，0-连接中；1-已打开；2-已关闭；
  • url
  • withCredentials
• 方法
  • close()：关闭连接
• 事件
  • error：连接无法打开时；
  • message：当通过事件源接收到数据时；event属性包含：
    • data：发送的数据；
    • origin：数据的来源；
    • lastEventId：事件唯一ID；
    • source：消息的MessageEventSource；
    • ports：发送消息的通道相关联的端口对象数组；
  • open：连接打开时；

4、WebSocket

是 HTML5 提供的一种在单个 TCP 连接上进行全双向通讯的网络协议，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的长连接，并进行双向数据传输。弥补了 HTTP 协议只能由客户端向服务器发起请求的缺陷。

没有 http 的同源限制，可以任意与服务器通信。对于全双工的通信， WebSocket 可能是更好的选择。

引入ws和wss分别代表明文和密文的websocket协议，且默认端口使用80或443，几乎与http一致。

采用了二进制帧结构，语法、语义与 HTTP 完全不兼容，相比http/2，WebSocket更侧重于“实时通信”，而HTTP/2 更侧重于提高传输效率，所以两者的帧结构也有很大的区别

• 较少的控制开销：数据包头部协议较小
• 相对于发起请求才能响应，延迟明显更少，更强的实时性
• 保持长连接状态
• 更好的二进制支持：定义了二进制帧，更好处理二进制内容
• 支持扩展：用户可以扩展websocket协议、实现部分自定义的子协议
• 更好的压缩效果：Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率

4.1、构造器

返回一个WebSocket实例，new WebSocket(url, protocols)

• 参数：
  • url
  • protocols：指示子协议，以便单个服务器可以实现多个 WebSocket 子协议；默认为：[]；
• 属性：
  • binaryType：可用于设置通过 WebSocket 连接接收的二进制数据的类型；
    • blob：默认值；
    • arraybuffer
  • bufferedAmount：已使用调用排队send()但尚未传输到网络 的数据字节数，全部发送后重置为0，但当连接关闭时，不会重置，且继续send，值继续增加。
  • extensions：返回服务器选择的扩展 。
  • protocol：返回服务器选择的子协议的名称 ；
  • readyState：返回连接的当前 状态；
    • 0 CONNECTING 套接字已创建。连接尚未打开。
    • 1 OPEN 连接已打开并准备好进行通信。
    • 2 CLOSING 连接正在关闭中。
    • 3 CLOSED 连接已关闭或无法打开。
  • url：构造函数解析 的绝对 URL。
• 方法：
  • close(code, reason)：1000为正常关闭，否则为标准值1001-1015指示连接关闭的实际原因；
  • send(data)：要发送到服务器的数据；USVString、ArrayBuffer、Blob、ArrayBufferView
• 事件：
  • close：当连接关闭时，code, reason,wasClean（连接是否完全关闭）；
  • error：由于错误（例如无法发送某些数据）而关闭时，将触发该事件。
  • message：当通过事件源接收到数据时；event属性包含：
    • data：发送的数据；
    • origin：数据的来源；
    • lastEventId：事件唯一ID；
    • source：消息的MessageEventSource；
    • ports：发送消息的通道相关联的端口对象数组；
  • open：连接打开时；