文章目录
前后端实现通信的方式
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
- 0:UNSENT 创建代理后,调用open方法前,请求未初始化;
- 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:枚举字符串值,用于指定响应中包含的数据类型。
- timeout:超时时间,代表请求自动终止前所消耗毫秒数;默认值为 0,意味着没有超时。
- upload:返回一个
XMLHttpRequestUpload
对象,用来表示上传的进度,可以通过对其绑定事件来追踪它的进度。- 支持绑定的事件除onreadystatechange外,与xhr一致
- withCredentials:跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等),boolean;
- 当值为 true时,后端必须增加响应头信息Access-Control-Allow-Origin,且必须指定域名,不能为*。
- 如果在同域下配置xhr.withCredentials,无论配置true还是false,效果都会相同,且会一直提供凭据信息。
</