xhr使用的简单总结

xhr的使用

一、方法

1.1 xhr.open()

语法：xhr.open(设置请求的方式,请求的路径, 同步/异步【布尔值true/false】)；

1.2 xhr.send()

语法：xhr.send(发送请求体) ；

//创建xhr实例对象
const xhr = new XMLHttpRequest();
//设置响应数据的类型
xhr.responseType = "json";
//请求发送的准备,设置请求方式和URL（需要填写必要参数）
xhr.open("get", "http://127.0.0.1/info");
//请求发送
xhr.send();
xhr.onload = function (){
	//输出获取服务器的响应数据
	console.log(xhr.response);
}

1.3 xhr.setRequestHeader()

语法：xhr.setRequestHeader(键名，键值)；
说明：键值对是成对出现，可在请求时设置请求头。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

1.4 xhr.getResponseHeader()

语法：xhr.getResponseHeader(响应头的键名);
说明：通过键名获取响应头对应的数据

二、事件

2.1 xhr.onload

语法：xhr.onload = function(){};
说明：ajax响应数据可用时触发（同readystate === 4，数据接收完成时），会调用事件

document.getElementById('btn').onclick = function () {
    // 创建xhr对象
    let xhr = new XMLHttpRequest()
    // 调用open方法，设置请求方式和URL
    xhr.open('get', 'http://127.0.0.1:8080/info')
    // 调用send方法，发送
    xhr.send()
    // 当请求响应结束后（调用xhr.onload事件）
    //通过response属性接收服务器返回的数据
    xhr.onload = function () {
      console.log(xhr.response)
    }
  }

2.2 xhr.onerror

语法：xhr.onerror = function(err){}
说明：onerror事件，在请求服务错误时，触发事件
一个参数：err——输出err，返回一个事件进度对象，如下图所示。

// 请求服务错误时
xhr.onerror = function(err){
	console.log("onerror",err);
}

2.3 xhr.ontimeout

语法：xhr.ontimeout = function(){}
说明：同timeout属性一块使用，timeout表示设定超时时间，timeout设定的时间到达后，触发ontimeout事件，然后执行函数内的语句。

xhr.ontimeout = function(){
	console.log("请求超时之后会被触发！")
}

2.4 xhr.onabort

语法：xhr.onabort = function(){}
说明：onabort事件——主要用于取消请求。同abort()方法一同使用，当调用abort()方法时，onabort事件会被触发（仅触发一次）

// 当调用xhr.abort函数时会被触发（触发一次）
xhr.onabort = function(){
	console.log("取消请求")
	root.innerHTML = "请求被取消啦！"
}
//取消请求
xhr.abort();

2.5 xhr.onreadystatechange

语法：xhr.onreadystatechange = function(){}
说明：此事件主要配合xhr.readyState状态码使用，当状态码发生改变后会被调用
xhr.readyState状态码：
0 :初始状态
1:已经执行了open,请求还未发送。在此时可以执行setRequestHeader
2:已经可以获取响应头以及状态码信息
3:可以接收部分响应体数据
4:响应体数据接收完毕

// 当 xhr.readystate发生改变后会调用。
xhr.onreadystatechange = function(){
	if(xhr.readyState === 1){
		xhr.setRequestHeader("a",1);
		xhr.setRequestHeader("b",2);
		//group分组的意思，输出将以会以分组列表的形式输出
		console.group("****************1********************");
		console.log("status",xhr.status);
		console.log("statusText",xhr.statusText);
		console.log("getAllResponseHeaders",xhr.getAllResponseHeaders());
		console.log("response",xhr.response);
		console.groupEnd();
	}else if(xhr.readyState === 2){
		console.group("****************2********************");
		console.log("status：",xhr.status);
		console.log("statusText：",xhr.statusText);
		console.log("getAllResponseHeaders：",xhr.getAllResponseHeaders());
		console.log("response",xhr.response);
		console.groupEnd();
	}else if(xhr.readyState === 3){
		console.group("****************3********************");
		console.log("status：",xhr.status);
		console.log("statusText：",xhr.statusText);
		console.log("getAllResponseHeaders：",xhr.getAllResponseHeaders());
		console.log("response",xhr.response);
		console.groupEnd();
	}else if(xhr.readyState === 4){
		console.group("****************4********************");
		console.log("status：",xhr.status);
		console.log("statusText：",xhr.statusText);
		console.log("getAllResponseHeaders：",xhr.getAllResponseHeaders());
		console.log("response",xhr.response);
		console.groupEnd();
	}
}

三、属性

也就是指一些请求发送或完成过程中可能会被用户读取或使用到的一些值。
① readyState：xhr的状态码。
② status：http状态码。
③ statusText：http状态说明文本。
④ response：响应。（可通过xhr.response获取响应体数据）
⑤ responseType：响应类型。
⑥ responseURL：响应的URL路径。
⑦ responseText：响应的文本数据。
⑧ responseXML：响应的XML数据。