JavaScript学习笔记(十六) XMLHttpRequest

正文

1、介绍

（1）AJAX（Asynchronous JavaScript and XML）

AJAX 原来是指通过异步 JavaScript 从服务器 XML 文档获取数据，然后更新部分网页，避免刷新整个网页

后来，这个词语慢慢成为在浏览器通过脚本与服务器进行通信的代名词，它在原来的含义上有了更多的拓展

也就是说，只要通过脚本向服务器发送请求获取数据，这个请求都被称为 AJAX 请求

（2）XMLHttpRequest

XMLHttpRequest 是浏览器内置对象，通过这个对象，我们能向服务器发送请求和接收响应，实现数据交换

很多 AJAX 底层都是通过 XMLHttpRequest 对象实现

2、使用

可以通过构造函数 XMLHttpRequest() 创建一个 XMLHttpRequest 对象

XMLHttpRequest 对象常用的属性如下：

readyState：只读属性，表示请求的当前状态

若为 0，表示已经生成请求实例，但未调用 open() 方法

若为 1，表示已经调用 open() 方法，但未调用 send() 方法

若为 2，表示已经调用 send() 方法，且已收到服务器返回的头信息

若为 3，表示正在接收服务器返回的数据体

若为 4，表示服务器返回的数据已全部接收完毕，或者发生错误

response：只读属性，表示服务器返回的数据，其类型由 responseType 的值决定

responseType：定义返回数据的类型，它的值是一个字符串

若为 'text' 或 ''，表示服务器返回文本数据

若为 'json'，表示服务器返回 Json 对象

若为 'blob'，表示服务器返回 Blob 对象

若为 'arraybuffer'，表示服务器返回 ArrayBuffer 对象

若为 'document'，表示服务器返回 Document 对象

responseText：只读属性，表示服务器返回的文本数据，如果请求失败则为 null

responseXML：只读属性，表示服务器返回的 Document 对象，如果请求失败则为 null

responseURL：只读属性，表示返回数据的服务器的网址

status：只读属性，表示 HTTP 状态代码

statusText：只读属性，表示 HTTP 状态信息

timeout：定义请求的超时时间，若请求超过该时间，则自动结束此请求

withCredentials：一个布尔类型的值，表示在跨域请求时是否带有授权信息

XMLHttpRequest 对象常用的方法如下：

open()：初始化请求，它接收以下五个参数

参数 method 是一个字符串，表示将要使用的请求方法

参数 url 是一个字符串，表示发送请求的目标地址

参数 async 是一个布尔值，表示请求是否需要异步进行，默认为 true

参数 user 是一个字符串，表示用于认证的用户，默认为空字符串

参数 password 是一个字符串，表示用于认证的密码，默认为空字符串

setRequestHeader()：设置请求头，必须在 open() 之后 send() 之前调用

overrideMimeType()：将服务器返回的数据解析成指定类型，必须在 open() 之后 send() 之前调用

send()：发送请求，可以在参数中带上请求体

请求体的类型可以是 null、String、Blob、ArrayBuffer、Document、FormData

abort()：中止请求

getAllResponseHeaders()：获取所有响应头

getResponseHeader()：获取指定响应头

XMLHttpRequest 对象常用的事件如下：

readystatechange：readyState 发生变化时触发

loadstart：当请求开始时触发（发出 HTTP 请求）

loadend：当请求结束时触发（请求成功或者失败）

load：当请求成功时触发

error：当请求错误时触发

abort：当请求中止时触发

timeout：当请求超时时触发

progress：监听上传和下载进度，该事件对应的事件处理函数带有一个事件对象，该事件对象有三个属性

• 属性 loaded 表示已经传输的数据量，属性 total 表示总数据量
• 属性 lengthComputable 表示加载进度是否可以计算，是一个布尔类型的值
• 
  

这里要注意，下载触发的是 xhr 对象的 progress 事件，上传触发的是 xhr.upload 对象的 progress 事件

3、实例

（1）发送 GET 请求

var xhr = new XMLHttpRequest()
xhr.responseType = 'text'
xhr.open('GET', 'http://www.httpbin.org/get')
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText)
        } else {
            console.error(xhr.statusText)
        }
    }
}
xhr.onerror = function() {
    console.log('error')
}
xhr.send()

（2）发送 POST 请求

var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.httpbin.org/post')
xhr.onload = function() {
    console.log(xhr.response)
}
xhr.onerror = function() {
    console.log('error')
}
var data = new FormData()
data.append('username', 'admin')
data.append('password', '12345')
xhr.send(data)

（3）接收图片

var xhr = new XMLHttpRequest()
xhr.open('GET', '/path/to/image.png')
xhr.onloadstart = function() {
    xhr.responseType = 'blob'
}
xhr.onload = function() {
    if (this.status === 200) {
      var blob = xhr.response
        var img = document.createElement('img')
        img.onload = function() { window.URL.revokeObjectURL(img.src) }
        img.src = window.URL.createObjectURL(blob)
        document.getElementById('container').appendChild(img)
    }
}
xhr.send()

（4）监听进度

var xhr = new XMLHttpRequest()
xhr.open('GET', '/download/or/upload')
// 用于监听下载进度
xhr.onprogress = progressHandler
// 用于监听上传进度
xhr.upload.onprogress = progressHandler
function progressHandler(e) {
    if (e.lengthComputable) {
        console.log(e.loaded / e.total)
    } else {
        console.log('无法获取进度')
    }
}
xhr.send()