一、什么是AJAX？以及AJAX诞生缘由

什么是AJAX？

AJAX全称是异步JS和XML（Asynchronous JavaScript And XML），它由几种技术构成：包括XML，DOM等；
通常的使用是利用JS向服务器发送HTTP请求，获取到数据后（一般为json或者text格式），再利用DOM将数据填充进html标签中；

AJAX诞生缘由

AJAX历史（摘抄至阮一峰AJAX教程）
1999年，微软公司发布IE浏览器5.0版，第一次引入新功能：允许JavaScript脚本向服务器发起HTTP请求。这个功能当时并没有引起注意，直到2004年Gmail发布和2005年Google Map发布，才引起广泛重视。2005年2月，AJAX这个词第一次正式提出，指围绕这个功能进行开发的一整套做法。从此，AJAX成为脚本发起HTTP通信的代名词，W3C也在2006年发布了它的国际标准。

AJAX为何诞生？

在web发展的最初期，经常使用的表单提交会默认将页面卸载（刷新），但当时页面功能不多，所以并没有很大的影响。但是随着web不断地发展，页面功能越来越多，越来越强大，不只是用来浏览信息，更多了许多与用户进行交互的地方，并且开始有用户对原始表单提交会卸载页面产生不满，试想如下例子：
用户注册一个账号，输入了用户名密码之类的一大堆资料，然后点击提交，页面刷新，因网速原因等待一分钟后，提示账号已经存在，请从新输入，然后资料又要从新填写；
假设当时的页面有点赞功能，点一个赞刷新整个页面一次，点一个按钮又刷新一次；上述情况确实会让人感到非常恼火；于是，AJAX技术经过一段时间的发展成熟后大规模的引用到页面上，推动了web行业的发展；

二、XMLHttpRequest对象

什么是XMLHttpRequest？

XMLHttpRequest是原生JS的一个内置对象，用以通过浏览器向服务器发送HTTP请求进行数据交互，XMLHttpRequest是AJAX技术的核心，学习AJAX实质上就是在学习XMLHttpRequest；

创建XMLHttpRequest对象

一般使用new关键字进行创建，然后赋值给一个变量，如下：

var xhr = new XMLHttpRequest();

三、XMLHttpRequest对象的属性

XMLHttpRequest对象的属性有哪些？有些什么用？

readyState
作用:

只读属性，用于表示XMLHttpRequest请求的当前状态，有五个数字(0,1,2,3,4);
0：表示已经创建了XMLHttpRequest对象，但是open方法还未被调用；
1：表示已调用open方法，但还未调用send方法（请求还未被发送出去），此时可以对请求的header进行设定（setRequestHeader方法）；
2：send方法已调用，数据已发送，并且服务器接收到了请求；
3：表示服务器正在传输数据；
4：数据传输完成；
该方法一般在onreadystatechange事件中进行查看

status
作用:

只读属性，表示本次请求的状态，只返回一个数字，常用的有如下几个状态码：
200：OK（正常访问）；
301：Moved Permanently（永久移动）；
302：Moved temporarily（暂时移动）；
304：Not Modified（未修改）；
307：Temporary Redirect（暂时重定向）；
401：Unauthorized （未授权）；
403：Forbidden（禁止访问）；
404：Not Found（未找到该网址）；500：Internal Server Error （找到网址但服务器发生错误）；

statusText
作用:

与status属性类似，返回本次请求的状态，不同点在于，status只返回一个数字，而该属性返回数字和状态解析

responseType
作用:

可通过对该属性赋值来指定接收的数据类型，默认为字符串，有如下几种数据类型：
text：以字符串形式接收数据；
json：以json对象形式接收数据；
blob：blob对象；
ArrayBuffer：ArrayBuffer对象；

response
responseText
responseXML
作用:

三者都是服务器返回的数据，如果数据不完整或者获取失败，它们的值就为null；
不同点：
response返回的是数据的主体部分，可以为任何类型(数组，json，XML，字符串等)；
responseText返回从服务器接收到的字符串；
responseXML返回从服务器接收到的Document对象，若返回的数据不能解析为XML或者HTML格式，那该属性的值为null，该值返回的数据会被直接解析DOM；

timeout
作用:

该属性用以设置发送请求后多少毫秒后未接到回应就自动终止请求，0为无时间限制，默认值为0，可通过在open方法后send方法前对其进行赋值来制定

withCredentials
作用:

该属性制定跨域请求时，个人的cookie信息是否附带进请求herder中，默认为false（不携带cookie），可通过对其进行赋值来制定

四、XMLHttpRequest对象的方法

open

作用:

类比：拨打电话时的拨号行为，确定拨打（连接）的目标
open方法用以设置请求的参数，常用的有三个参数：
第一个参数：请求的类型（常用get或者post）；
第二个参数是接口名和：这里要分两种情况：
get请求时：接口名+请求参数（键值对形式）；
post请求时：只需要接口名；
第三个参数：一个布尔值，指定是否异步（true为异步，false为同步，通常为true，默认为true）；
第四和第五个参数：填写用于认证的用户名和密码；

send

作用:

类比：拨打电话时，填写好电话号码后按拨打键（发送请求）；
send方法用以发送HTTP请求，需要在open方法调用后调用；
参数分两种形式：
get：get请求时无参数；
post：post请求时参数为请求参数（键值对形式）

setRequestHeader

作用:

类比：填好电话号码后，想好是用人工接听还是机器人接听，再拨打电话（这个比喻不是很恰当）；
setRequestHeader方法用以设置请求的header部分，用以指定数据发送的格式，调用必须在open方法后，send方法前；
常用实例：setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

abort

作用:

类比：拨打电话后把电话给挂了；
abort方法用以中断已经发出的AJAX请求；
可以用这个方法来防止用户重复点击造成的发送重复请求的问题；

getResponseHeader和getAllResponseHeaders

作用:

类比：打印我的通话清单（getResponseHeader为通话清单的指定信息，getAllResponseHeaders为通话清单的所有信息）；
getResponseHeader和getAllResponseHeaders之间的不同点：getResponseHeader接收一个参数，该参数为需要返回的回应头部信息；
getAllResponseHeader无需参数，返回所有的回应头信息；

overrideMimeType

作用:

用以将从服务器转换回来的二进制信息转换为文本信息，该方法已被responseText属性代替

五、XMLHttpRequest对象的事件以及对应的事件监听接口

事件名	接口名	作用
readyStateChange（请求状态改变事件）	onreadystatechange	当readyState属性的值发生变化时，就会触发readyStateChange，可以对onreadystatechange指定函数来监控readyState的值；注：通常来说，一次交互中，readyState的值会发生五次变化，也就是说会触发五次readyStateChange事件
abort（请求被中断事件）	onabort	通过onabort事件接口，可指定当请求被中断时的具体措施
error（请求发生错误事件）	onerror	通过onerror事件接口，可指定当请求出错时的具体措施
load（请求完成，数据传输完毕事件）	onload	通过onload事件接口，可指定当数据传输完毕的具体措施
loadend（请求已完成事件）	onloaded	abort、error和load这三个事件的触发都会另外触发loadend事件，表示请求已完成，但成功与否未知
对应属性timeout	ontimeout	可通过ontimeout接口指定当用户请求超时的措施
progress（文件上传事件）	onprogress	可通过对onprogress接口指定措施来监控文件上传的进度