使用原生JS的AJAX读取json全过程
首先ajax（async JavaScript and xml）是用于前端与后端文件比如xml或者json之间的交互。他是一种异步加载技术，意味着你点击某个加载事件是再也不用刷新整个页面，而是发送局部请求，局部回应。由于AJAX不是完全前端，需要用到服务器，所以在做实验的时候必须把html文件和xml或json放到服务器部署的目录之中，在这里我使用的是TOMCAT 7X。
首先编辑一个简单的JSON文件，并命名为json.json，如下：
[{ "key":"value" } ]
- function showJson(){
- var test;
- if(window.XMLHttpRequest){
- test = new XMLHttpRequest();
- }else if(window.ActiveXObject){
- test = new window.ActiveXObject();
- }else{
- alert("请升级至最新版本的浏览器");
- }
- if(test !=null){
- test.open("GET","json.json",true);
- test.send(null);
- test.onreadystatechange=function(){
- if(test.readyState==4&&test.status==200){
- var obj = JSON.parse(test.responseText);
- for (var name in obj){
- alert(obj[name].key);
- }
- }
- };
- }
- }
- window.onload=function(){
- showJson();
- };span>
function showJson(){
var test;
if(window.XMLHttpRequest){
test = new XMLHttpRequest();
}else if(window.ActiveXObject){
test = new window.ActiveXObject();
}else{
alert("请升级至最新版本的浏览器");
}
if(test !=null){
test.open("GET","json.json",true);
test.send(null);
test.onreadystatechange=function(){
if(test.readyState==4&&test.status==200){
var obj = JSON.parse(test.responseText);
for (var name in obj){
alert(obj[name].key);
}
}
};
}
}
window.οnlοad=function(){
showJson();
};1、使用AJAX，我们必须new一个XMLHttpRequest()的实例，在IE低版本浏览器中是ActiveXObject()。使用if语句判断即可。
2、通过判断readyState的交互状态以及status的交互状态来触发onreadystatechange事件。
这里展开介绍一下readyState的4种取值情况：
（1）值为0：请求还没有初始化，意思是还没有开始open();
（2）值为1：请求已经初始化了但是还没有发送，意思是还没有send()；
（3）值为2：请求已经发送了，后台正在处理。
（4）值为3：请求还在处理，但是部分数据可以用了，具体什么意思我现在也不是很明白。
（5）值为4：后台服务器相应完毕，也就是你现在随时可以取得请求的数据。
但是当readyState==4时我们只能知道服务器响应完毕，但还不知道服务器有没有找到我们请求的那个文件，这时就要引用status了。
这里展开介绍一下status的几种常见取值情况：
（1）200：找到了请求的文件。
（2）404：找不到请求的文件。
（3）500：服务器出错。
在同时满足了readySate==4以及status==200时我们就可以得到我们想要的value了。
3、服务器返回的值是存在responseText对象里面的。这时我们可以使用JSON.parse()来取得里面的数据。
4、我们现在把JSON文件里的一整块数据都取了出来，但如果想取到其中的某一个块值比如说：value，就必须用到遍历，比如说for循环。这里的for循环我使用了另一种形式for(var name in obj)，这里的意思是取得对象的值，存放在变量name里面。因为JSON文件的结构就是由很多对象组成的。
5、如果是使用“GET”，则send()里面的值为null。如果是POST,则需要传具体的参数比如:send(name);
最后写给刚接触AJAX的同学。如何运行这段代码（配置AJAX环境）。
（1）首先你需要下载一个服务器，我建议是TOMCAT。
（2）然后把包含有你html和json文件部署（黏贴）到Tomcat根目录下的webapps文件夹里。
（3）回到Tomcat根目录，打开bin文件夹，找到startup.bat。双击打开Tomcat服务器。
（4）打开浏览器，输入http://localhost:8080/检查Tomcat是否打开，如果出现404，有可能是8080端口被占用了，这时候回到Tomcat根目录下打开conf文件夹找到server.xml文件，找到这段代码：Connector port="8080" ，把8080修改成8081或者8082，重新在浏览器中输入http://localhost:8081/看看打开了Tomcat了没。
（5）浏览器中输入你的html文件路径，比如：http://localhost:8080/test/index.html 即可。
个人备注：
1. 原生ajax的四个过程，readyState和status。
new，open，send, onreadystatechange。
var xhr=new XMLHttpRequest(); //实例化
xhr.open(“post”,”php/do.php”,true);//第一个参数是请求类型，第二个参数是请求的路径，第三个参数是是否使用异步机制
xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);//如果是post请求，需要设置RequestHeader
xhr.send(“name=”+ encodeURIComponent(“wqq”)+”&age=18”);//()内是请求头内容，如果是get请求，没有报文头，写xhr.send(null)
xhr.onreadystatechange = function(){
if(xhr.readystate == 4){
if(xhr.status ==200){
biaoti.innerHTML = xhr.responseText;
}
}
}
Ajax：readyState（状态值）和status（状态码）的区别
readyState，是指运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤。
是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。使用“ajax.readyState”获得。
readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义
| 0 （未初始化） |
对象已建立，但是尚未初始化（尚未调用open方法） |
| 1 （初始化） |
已调用send()方法，正在发送请求 |
| 2 （发送数据） |
send方法调用完成，但是当前的状态及http头未知 |
| 3 （数据传送中） |
已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， |
| 4 （完成） |
数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据 |
status，是指无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码。
使用“ajax.status”获得。
总体理解：可以简单的理解为state代表一个整体的状态。而status是这个大的state下面具体的小的状态。
通过哪个属性得到data？
答：xhr的responseText和responseXML。后者是XML解析了的。
jquery里是success回调里面的形参。
为什么传统的网页需要整个页面刷新？
Ajax以前都是java,php开发网站，服务器端渲染，后面js在客户端越来越厉害，才有浏览器端渲染。ajax 改造之后，页面不再由服务器来产生了，而是前端绑定的。服务器只管输出非常精简的（比如说） json 数据。（实际上我们才用 websocket，而不用 http 方式来通讯）这个时候页面就会瞬间就出现内容，页面内容改变的时候看上去也是瞬间改变。
异步刷新实现原理：
当xmlHttpRequest对象的readyState更新时，就会自动执行onreadystatechange绑定的js事件（体现异步），在该事件中操作DOM更新html页面（体现局部刷新）。