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 接口,由可以接收事件并且可以创建侦听器的对象实现。Elementdocumentwindow是最常见的 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(){
        //...
    })
    
posted @ 2020-09-02 23:49  sanhuamao  阅读(1413)  评论(0编辑  收藏  举报