前段时间，我学习了AJAX的相关基础内容，虽然其中还有许多未明白的地方，但是已经可以进行最基本的使用的了，所以写下这篇文章作为复习；
一、什么是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接口指定措施来监控文件上传的进度 |
