首先编辑一个简单的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>
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 即可。
本文介绍了使用原生js的ajax读取json全过程，更多相关内容请关注。
相关推荐：
vue.js安装与配置
js实现浏览器打印、打印预览
js回调函数实例
以上就是原生js的ajax读取json全过程的详细内容。