前后端实现通信的方式

前后端实现通信的方式

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：枚举字符串值，用于指定响应中包含的数据类型。
  • 要在调用