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学习笔记 】