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()
【 阅读更多 JavaScript 系列文章，请看 JavaScript学习笔记 】
