xhr |XMLHttpRequest是什么?
XMLHttpRequest
XMLHttpRequest
(XHR)是一个用于与服务器交互的对象,在AJAX编程中被大量使用。
它有如下特点:
- 可在不刷新页面的情况下请求特定 URL获取数据
- 可以用于获取任何类型的数据
- 支持 HTTP 以外的协议(包括 file:// 和 FTP)
如果您的通信流程需要从服务器端接收事件或消息数据,请考虑通过
EventSource
接口使用 server-sent events。对于全双工的通信, WebSocket 可能是更好的选择
简单示例
let xhr = new XMLHttpRequest(); //1. 创建xml对象
xhr.open('GET', 'https://www.easy-mock.com/mock/5f5089e9eb182d5f62995f1c/xml/getNum');//2. 初始化请求
xhr.send();//3. 发送请求
xhr.onload = function() {//4. onload表示当请求正确并成功返回数据时调用
console.log(JSON.parse(this.response))
let num=JSON.parse(this.response).data.number
document.body.innerHTML=num
};
构造函数
XMLHttpRequest()
——用于初始化一个 XMLHttpRequest 实例对象。在调用其他方法之前,必须先调用该构造函数或通过其他方式得到一个实例对象
const xhr = new XMLHttpRequest();
属性
readyState
——只读| 返回一个 XMLHttpRequest 当前所处的状态var xhr = new XMLHttpRequest(); // readyState 为 0 xhr.open('GET', '/api', true); // readyState 为 1 xhr.send(); // readyState 为 2 xhr.onprogress = function () {...} // readyState 为 3 xhr.onload = function () {...} // readyState 为 4
readysatte 状态描述 说明 0 UNSENT 代理(XHR)被创建,但尚未调用 open()
1 OPENED open()
已经被调用,建立了连接2 HEADERS_ RECEIVED send()
已经被调用,并且已经可以获取状态行和响应头3 LOADING 响应体下载中, responseText
属性可能以及包含部分内容4 DONE 响应体下载,可以直接使用 responseText
onreadystatechange
——当readyState
属性发生变化时调用var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.send() xhr.onreadystatechange = function () {...}
其他只读属性:
var xhr =new XMLHttpRequest() xhr.open('GET','url') xhr.send() xhr.onload=function(){ console.log(this.response) //获取响应的正文 console.log(this.responseText) //获取文本格式的响应体 console.log(this.responseXML) //XML格式的响应体 console.log(this.status) //获取响应状态码 console.log(this.statusText) //获取响应状态描述 }
方法
var xhr =new XMLHttpRequest()
xhr.open('GET','url') //初始化一个请求
xhr.send() //发送请求
xhr.abort() //终止请求
xhr.setRequestHeader("Accept","text/plain") //设置请求头
xhr.onload=function(){
console.log(this.getAllResponseHeaders()) //获取全部响应头
console.log(this.getResponseHeader("Content-Type")) //获取指定响应头
}
事件
var xhr =new XMLHttpRequest()
xhr.onabort = function () {...};//请求中断时调用,接受 `abort` 对象作为参数
xhr.onerror = function () {...};//请求发生错误时调用,接受 `error` 对象作为参数
xhr.onload = function () {...};//当请求正确加载出内容并返回时调用,接受 `load` 对象作为参数
xhr.onloadstart = function () {...};//当请求开始加载数据时调用,接受 loadstart 对象作为参数
xhr.onprogress = function () {...};//获取请求过程中的信息,接受 `progress` 对象作为参数
EventTarget
什么是EventTarget?
EventTarget是一个 DOM 接口,由可以接收事件并且可以创建侦听器的对象实现。Element
,document
,window
是最常见的 EventTarget ; XMLHttpRequest
等对象也可以作为EventTarget。EventTarget有如下方法。换言之,XMLHttpRequest对象可以使用如下方法:
addEventListener()
——注册特定事件类型的事件处理程序//语法: target.addEventListener(type, listener, options); target.addEventListener(type, listener, useCapture); //参数: 1.type:表示监听类型的字符串 2.listener:监听的事件类型触发是调用,可以是函数 3.options:指定有关 listener 属性的可选参数对象。(可选) -capture:布尔值,表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。 -once:布尔值,表示 listener 在添加之后最多只调用一次。为true时会在其被调用之后自动移除 -passive:布尔值,设置为true时表示 listener 永远不会调用 preventDefault() 4.useCapture 布尔值,为true时表示启动捕获事件
removeEventListener()
——删除事件侦听器//语法: target.removeEventListener(type, listener[, options]); target.removeEventListener(type, listener[, useCapture]);
dispatchEvent()
——将事件分派到此EventTarget一个例子
var xhr=new XMLHttpRequest() xhr.open('GET',"url") xhr.send() xhr.addEventListener('readystatechange',function(){ //... })