前后端实现通信的方式

前后端实现通信的方式

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，效果都会相同，且会一直提供凭据信息。
</