使用原生JS的AJAX读取json全过程
2016-10-26 10:23
267 查看
首先ajax(async javascript and xml)是用于前端与后端文件比如xml或者json之间的交互。他是一种异步加载技术,意味着你点击某个加载事件是再也不用刷新整个页面,而是发送局部请求,局部回应。由于AJAX不是完全前端,需要用到服务器,所以在做实验的时候必须把html文件和xml或json放到服务器部署的目录之中,在这里我使用的是TOMCAT 7X。
首先编辑一个简单的JSON文件,并命名为json.json,如下:
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 即可。
首先编辑一个简单的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全过程
- Ajax、json,原生JS和JQ使用Ajax
- 使用js的ajax方法读取txt文本里面的JSON数据并追加到Html元素节点上
- 【2012年最新原创AJAX案例,重磅推出】1、使用ajax+js+json+dom+php+mysql实现超强 Web聊天室V2.0
- JST+JSON+AJAX——使用客户端js模版代替服务端数据绑定
- js原生Ajax的封装与使用
- js读取csv文件并使用json显示出来
- 从php获取json数据使用js读取显示到网页笔记
- 使用Ajax传递 json数据,并在一般处理页面进行接收全过程
- JST+JSON+AJAX——使用客户端js模版代替服务端数据绑定
- AJAX学习笔记之原生JS使用方法
- 如何使用ajax读取Json中的数据
- 使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
- MVC中用View.bag保存json字符串。在js中使用,不用ajax请求。。。。
- JST+JSON+AJAX——使用客户端js模版代替服务端数据绑定
- JST+JSON+AJAX——使用客户端js模版代替服务端数据绑定
- js读取csv文件并使用json显示出来
- 使用原生ajax异步返回json数据
- js 表单内容使用ajax以json格式混合提交