前端学了有一段时间了，在项目中我通常使用的都是jQuery封装好的Ajax函数($.ajax、$.get、$.post)，使用非常的简单方便，但为了更清楚的了解Ajax，需要学习原生xhr对象。
先来明确什么是Ajax，Ajax：“Asynchronous JavaScript and XML”，翻译过来就是异步JavaScript和XML。
method：请求的类型（GET/POST）
url：文件在服务器上的位置
async：布尔值，true表示异步，false表示同步（可选，默认为true）
readyState：存有XMLHttpRequest的状态。XHR对象会经历5种不同的状态
@H_502_62@
0：请求未初始化（new完后）；
1：服务器连接已建立（对象已创建并初始化，尚未调用send方法）；
2：请求已接收；
3：请求处理中；
4：请求已完成，响应就绪；
status：（HTTP状态码很多，请自行了解，举例常见的）
@H_502_62@
200：请求成功
404：未找到页面
onreadystatechange：存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
原文链接：https://www.f2er.com/ajax/161511.html
创建Ajax：
要创建Ajax，主角是XMLHttpRequest（下简称XHR）对象。
第一步：创建XHR对象
var xhr = new XMLHttpRequest();
第二步：向服务器发送请求
方法：open(method,url,async) 和 send(string)
open()方法传入三参数
@H_502_62@
send()方法将请求发送到服务器，有一个可选的参数string，仅用于POST类型的请求。
这里主要讨论一下async参数，XMLHttpRequest对象如果要用于AJAX的话，其open()方法的async参数必须设置为true。那如果参数设置为false会有什么样的后果呢？同步请求的后果是：JavaScript会等到服务器响应就绪才继续执行。如果是比较大型的请求或者服务器处于繁忙状态，应用程序会挂起或停止。简单点说就是页面会一直卡到响应内容回来才继续运行。
在发送GET请求的时候，可能得到缓存的信息（IE中），导致我们发送的异步请求不能正确的返回我们想要的最新的数据。
1 xhr.open("GET","demo.asp?t=" + Math.random(),true); 2 xhr.send();
这种方式可以避免拿到缓存中的旧消息，但它的每次请求仍然会被浏览器缓存起来，占用浏览器资源。
1 xhr.open("GET","demo.asp",true); 2 xhr.setRequestHeader("If-Modified-Since","0"); //设置浏览器不使用缓存 3 xhr.send();
GET中的url可以拼接字符串从而达到传参，而传送数据一般用POST。
如果我们用POST方法向服务器发送数据，应该这样设置http头。
1 xhr.open("POST","postdemo.asp",true); 2 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //否则数据无法被正常接收 3 xhr.send("name=amie"); //send里写要发送的数据
第三步：服务器响应
XMLHttpRequest对象的responseText和responseXML属性分别获得字符串形式的响应数据和XML形式的响应数据
可以在控制台里输出响应
console.log(xhr.responseText);
还有三个关于响应状态的属性也经常用到：
@H_502_62@
因此上面那行代码可以改为：
1 xhr.onreadystatechange = function () { 2 if (xhr.readyState == 4 && xhr.status == 200) { 3 console.log(xhr.responseText); 4 };
关于setRequestHeader
Ps:
1.响应头包含了许多信息，有兴趣的小伙伴可以去了解一下。（HTTP涉及了许多计算机网络的知识）。
2.查看http请求头可以到开发者工具里的Network里查看。
(写在结尾：前端新人一枚~欢迎大家指出错误，谢谢阅览~)
