xhr的一些细节

1. 基本使用

const xhr = new XMLHttpRequest()
xhr.open("get", "http://localhost:8080/common/list")
xhr.send()

2. 属性详解

2.1 xhr.onreadystatechange 、 xhr.readystate

• 最重要的属性之一，每次readystate变化的时候都会调用这个处理函数
• 标准属性，所有浏览器都支持
• readystate 总共有5种状态，我们最常用的就是当它为4的时候，此时拿到了响应结果（无论成功还是失败）

const xhr = new XMLHttpRequest()
let n = 1
xhr.onreadystatechange = () => {
  console.log("调用了" + n++ + "次")
}

xhr.open("get", "http://localhost:8080/common/list")

//xhr.onreadystatechange = () => {
//  console.log("调用了" + n++ + "次")
//}
xhr.send()

• 可以看到 onreadystatechange在open前后，调用的次数不一样，具体可以查看readystate
• 放在前面调用 4 次 ，后面 3 次

2.2 xhr.response 、 xhr.responseText 、xhr.responseType

• 两者都是只读的
• response : 返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType的值。
• responseText 返回一个 DOMString（就是字符串），该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null
• responseType 默认是text ,所以不指定的话，这两个属性返回的一样，设置成非text或者""，则读取responseText会报错，因为他只能接受返回类型是文本类型的

const xhr = new XMLHttpRequest()
xhr.responseType = "blob"
xhr.onreadystatechange = () => {
  console.log(xhr.response) //Blob对象
}
xhr.open("POST", "http://localhost:9527/common/list")
xhr.send()

2.3 xhr.status 、 xhr.statusText

• status 返回状态码，statusText返回状态码和对应的http文本
• 成功：status 为200(数字) ，statusText为"200 ok"

2.4 xhr.responseXML（了解）

• 返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或是不能被解析为 XML 或 HTML，则返回 null
• 如果响应类型确实解析不成该类型，则返回null

const xhr = new XMLHttpRequest()
xhr.responseType = "document"
// overrideMimeType() 用来强制解析 response 为 XML
xhr.overrideMimeType('text/xml')
xhr.onreadystatechange = () => {
  console.log(xhr.responseXML)
}
xhr.open("POST", "http://localhost:9527/common/list")
xhr.send()

2.5 xhr.timeout 、 xhr.ontimeout

• timeout 最大请求时间（毫秒），超出该时间，请求会自动终止；ontimeout请求终止触发的回调(该url是能访问的，如果访问的是不存在的url，则立刻返回404，该回调也不会执行)

  • 经过测试，当把超时时间设置成非常短时，大3ms 左右，访问不存在的url，该回调也是会执行的

const xhr = new XMLHttpRequest()
xhr.timeout = 3
xhr.ontimeout = (e) => { 
  console.log("超时回调")
 }
xhr.open("POST", "http://localhost:9527/common/not-exist")
xhr.send()

2.6 xhr.upload

• 返回一个 XMLHttpRequestUpload对象，有后文提及的一些事件 , 如 onprogress，onload等
• 用来表示上传的进度，这个对象绑定的一些事件是拿不到响应结果的

2.7 xhr.withCredentials

• boolean值，指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头

3. 方法详解

3.1 xhr.abort() 、 xhr.onabort

• 请求发出，则终止请求 ， 触发 onabort 事件

3.2 xhr.getAllResponseHeaders() 、 xhr.getResponseHeader(name)

• 前者获取或有的请求头，结果是字符串，只要自己做转换
• 后者获取指定请求头

3.3 xhr.setRequestHeader(name,value)

• 设置请求头,必须在open之后，send之前

3.4 xhr.open() 、 xhr.send([body])

• 前者初始化请求，后者真实发送请求

3.5 xhr.overrideMimeType()

• 覆写由服务器返回的 MIME 类型

4.事件

4.1 loadstart、load、loadend

• loadstart ： 在请求刚开始发出去就触发
• 其他两个在请求完成时（无论成功失败）触发，load 在 loadend之前触发

4.2 progress

• 在请求过程中，间歇性触发

4.3 abort

• 调用 abort() 方法触发

4.4 error

• 请求错误时触发（服务端返回500不算错误）
• 经过测试发现，当服务器返回小于200的状态码时，会触发该事件

 const xhr = new XMLHttpRequest()
const handleEvent = (e) => { 
  console.log(e)
 }
xhr.addEventListener('loadstart', handleEvent);
xhr.addEventListener('load', handleEvent);
xhr.addEventListener('loadend', handleEvent);
xhr.addEventListener('progress', handleEvent);
xhr.addEventListener('error', handleEvent);
xhr.addEventListener('abort', handleEvent //不触发
xhr.open("post", "http://localhost:9527/common/list")
xhr.send()