构造函数_XMLHttpRequest

XMLHttpRequest构造函数

• 作用：初始化XMLHttpRequest实例对象；

• const xhr = new XMLHttpRequest()
  1

XMLHttpRequest对象

• 作用：用户信息交互，可以在不刷新页面的情况下请求特定url，获取数据；

属性

responseType

• 作用：指定响应的数据类型；
• 属性值：
  • text:返回值为文本；
  • json:返回值为JSON对象；
  • blob:返回值为包含二进制数据的blob对象；
  • document:返回值为HTML；

readyState

• 作用：返回xhr代理所处的状态
• 属性值
  • 0：代理被创建，但是还未初始化(未调用open方法)；
  • 1：已初始化，但是还未发送请求(未调用send方法)；
  • 2：请求已经发送，并已获取响应头与响应状态；
  • 3：获取响应体的部分数据；
  • 4：数据获取完成(数据传输已经彻底完成或失败);

status\statusText

• status:服务器返回的状态码；
• statusText:服务器返回的状态文本；

response\responseText

• response: 响应数据；
• responseText:响应文本；

timeout

• 设置请求的等待时间，超过该时间则停止该请求；
• 默认值：0(没有超时)
• 单位：毫秒

方法

open

• 作用：初始化一个请求；

• 语法

  • const xhr = new XMLHttpRequest()
    xhr.open(method,url,async)
    1
    2

  • method：请求方法；

  • url:请求路径；

  • async:是否以异步模式获取数据；

    • 默认异步-true
    • 同步-false(多浏览器已弃用)

send

• 作用：发送http请求；

• 语法

  • const xhr = new XMLHttpRequest()
    xhr.send(body)
    1
    2

  • body:请求主体信息

    • get请求与head请求的 请求主体信息 为null;
    • 值可为 document(dom树)、blob、formData、URLSearchParams对象

setRequestHeader

• 作用：设置 HTTP 请求头部

• 语法

  • const xhr = new XMLHttpRequest()
    xhr.setRequestHeader(header, value)
    1
    2

  • header: 请求头部属性名；eg:content-type

  • value:属性名；

• 注意点：

  • 仅能在open方法之后send方法之前设置!

事件

load

• 触发时机：当xhr请求完成时会触发load事件！

error

• 触发时机：当xhr请求遇到错误时将会触发error事件！

readystatechange

• 触发时机：当readyState属性值改变时会触发readyStateChange事件！

timeout

• 触发时机：当请求的等待时间超过timeout值时会超触发；

实例

[1]获取blob格式的二进制文件

需求描述：后端返回二进制流，我们想要获取的为blob格式的二进制文件；

const xhr = new XMLHttpRequest()
xhr.open('POST', 'http://test2.clipworks.com:8666/api/thirdSite/downloadTemplate')
xhr.responseType = 'blob'
xhr.send()
xhr.onload = function(){
  console.log(xhr.response,'结果', xhr.responseType) // Blob对象 “结果”, 'blob'
}
1
2
3
4
5
6
7