与jQuery不同，原生js的ajax的实现相比来说复杂一些，因为jquery中的$.ajax()方法已经把js的实现封装起来，使用起来更加方便。但是，原生js的实现过程，对于理解ajax，好像更清晰一些。
之前写过的jQuery的ajax实现：jQuery的Ajax实例（附完整代码）
这次使用原生js实现
实现过程（文末有完整代码）
以此实例为例：
1.创建XMLHttpRequest对象
这里的 XMLHttpRequest 是针对非IE浏览器而言的，对于IE浏览器，需要创建 ActiveXObject 对象
因此
//第一步：创建XMLHttpRequest对象var xmlHttp;if (window.XMLHttpRequest) { //非IExmlHttp = new XMLHttpRequest();console.log('创建了XMLHttpRequest对象');} else if (window.ActiveXObject) { //IExmlHttp = new ActiveXObject("Microsoft.XMLHTTP");console.log('创建了ActiveXObject对象');}
2.设置请求方式和url，即open()
async一般设置为异步方式，即true
//第二步：设置请求方式var url = "http://hebutgo.com:8080/maps/getMapsList";xmlHttp.open("GET", url, true);console.log('执行open()');
3.设置发送请求的内容，即send()
与$.ajax()中的data相似，不过send的内容是字符串形式，即把data中的json数组转化为一个字符串。
例如：
data：{
name：zhangsan
age：18
}
应拼接成为：(键值对之间用&连接)
data = 'name=zhangsan&age=18'
然后
//第三步：设置发送请求的内容xmlHttp.send(data);
本例中无需请求内容，，就直接
xmlHttp.send();
4.回调函数
回调函数通过监听 readystate 和 status 值的变化，得到返回值，执行回调
与$.ajax()的success回调不同，js的ajax从请求初始化到发送请求，再到请求结束，readystate 和 status的值时钟在发生着变化，当 readystate=4 并且 status=200时，标志着请求成功，可以执行回调内容，其余情况均为发生错误
可以理解为： readystate=4 && status=200 等价于 jquery中的 success 回调
对于返回值
包含 responseText 和 responseXML 两种
这个的选择要看服务器预先设定的返回值是什么类型的
前者拿到的是字符串；后者是XML
1.如果是字符串，处理后可以赋值给html中的标签，或者构造节点，显示到界面
2.如果是XML，则需要根据具体内容，添加到相应的html标签中
//第四步：回调函数xmlHttp.onreadystatechange = function() {//console.log('执行了回调函数,此时readystate为'+xmlHttp.readyState+' status为'+xmlHttp.status);if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {var obj = document.getElementById('getData');//console.log(xmlHttp.responseText);//console.log('拿到了返回数据');//console.log(JSON.parse(xmlHttp.responseText));var res = JSON.parse(xmlHttp.responseText).result;for(var i=0;i<res.length;i++){var node = document.createElement('tr');node.innerHTML = '<td>'+res[i]['申请人省份']+'</td><td>'+res[i]['counts']+'</td>'obj.appendChild(node); } } else {alert("AJAX服务器返回错误！");}}本例中拿到的是responseText，为字符串，但是通过打印可以看出，结构是json数组转成的一个大字符串。
如下：
{“result”:[{“申请人省份”:“0”,“counts”:1553},…,{“申请人省份”:“黑龙江省”,“counts”:215}],“reason”:"",“status”:“success”}
通过
JSON.parse(xmlHttp.responseText)
转成
之后通过js添加节点，连接在 < table > 标签中
状态值和状态码
状态值：readystate
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用
状态码：status
1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败
具体取值：（常见）
200——交易成功
400——错误请求，如语法错误
403——请求不允许
404——没有发现文件、查询或URl
500——服务器产生内部错误
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本
测试：
我在代码中加入了console打印，可以看出二者的状态变化
虽然说onreadystatechange可以随时监听readystate的变化，但是实际能打印出来的仅有2、3、4三个状态。
如果调整代码顺序
把onreadystatechange放在open()和send()执行之前，结果如下
结果与理论上的状态值定义不太相同，这里还没搞太明白。。
实例完整代码
<!DOCTYPE html>
<html>
<head><title>ajax_js</title><style type="text/css">#getData th{width: 100px;}#getData td{text-align: center;}</style>
</head>
<body><div class="main"><div><button onclick="request()">Request</button></div><table id="getData"><tr><th>申请人省份</th><th>人数</th></tr></table></div><script type="text/javascript">function request(){//第一步：创建XMLHttpRequest对象var xmlHttp;if (window.XMLHttpRequest) { //非IExmlHttp = new XMLHttpRequest();console.log('创建了XMLHttpRequest对象');} else if (window.ActiveXObject) { //IExmlHttp = new ActiveXObject("Microsoft.XMLHTTP");console.log('IE');console.log('创建了ActiveXObject对象');}//第二步：设置请求方式var url = "http://hebutgo.com:8080/maps/getMapsList";xmlHttp.open("GET", url, true);console.log('执行了open()');//第三步：设置发送请求的内容xmlHttp.send();console.log('调用了send()');//第四步：回调函数xmlHttp.onreadystatechange = function() {console.log('执行了回调函数,此时readystate为'+xmlHttp.readyState+' status为'+xmlHttp.status);if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {var obj = document.getElementById('getData');console.log('拿到了返回数据');console.log(JSON.parse(xmlHttp.responseText));var res = JSON.parse(xmlHttp.responseText).result;for(var i=0;i<res.length;i++){var node = document.createElement('tr');node.innerHTML = '<td>'+res[i]['申请人省份']+'</td><td>'+res[i]['counts']+'</td>'obj.appendChild(node); }} else {alert("AJAX服务器返回错误！");}}}}</script>
</body>
</html>
对于responseXML，以及onreadystatechange监听的问题，还不够清晰，有待之后学习补充。
参考 总结 - Ajax工作原理和实现步骤
