javascript解析ajax返回的xml和json格式数据实例详解


Posted in Javascript onJanuary 05, 2017

本文实例讲述了javascript解析ajax返回的xml和json格式数据。分享给大家供大家参考,具体如下:

写个例子,以备后用

一、JavaScript 解析返回的xml格式的数据:

1、javascript版本的ajax发送请求

(1)、创建XMLHttpRequest对象,这个对象就是ajax请求的核心,是ajax请求和响应的信息载体,单是不同浏览器创建方式不同
(2)、请求路径
(3)、使用open方法绑定发送请求
(4)、使用send() 方法发送请求
(5)、获取服务器返回的字符串   xmlhttpRequest.responseText;
(6)、获取服务端返回的值,以xml对象的形式存储  xmlhttpRequest.responseXML;
(7)、使用W3C DOM节点树方法和属性对该XML文档对象进行检查和解析。

2、 实例:

(1)、发送ajax请求,以及解析返回的数据

<script type="text/javascript">
/* js版本发送ajax请求 */
function tellxml(){
 // 创建对象,适合于firefox 和safari
 var xmlhttpRequest= new XMLHttpRequest();
 // 创建对象,适合于ie
 // var xmlhttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
 // 请求发送路径 url
 var url="http://localhost:18080/servlet/Servlet1?aa=10";
 // Open方法绑定一个发送过程,但不发送数据。Open方法最后一个参数为true时表示异步,否则同步
 xmlhttpRequest.open("POST",url,true);
 // Send方法就是发送请求数据
 xmlhttpRequest.send(url);
 // readstate 就是一个xmlhttprequest 对象的一个属性,来记录服务器返回的状态
 var readstate =xmlhttpRequest.readyState;
 alert("状态:"+readstate);
 // status 就是发送请求的状态,如果是200 则说明请求响应成功
 var status=xmlhttpRequest.status;
 alert("请求发送结果"+status);
 // "responseText”是xmlhttpRequest的一个属性,来以字符串形式存储HTTP响应值;“responseXML”属性是以XML形式来记录HTTP响应的值。
 var text= xmlhttpRequest.responseText;
 alert(text);
 // “responseXML”是xmlhttpRequest的一个属性,是以XML文档的对象来存储服务器端返回的值,可以使用W3C DOM节点树方法和属性对该XML文档对象进行检查和解析。
 var xml= xmlhttpRequest.responseXML;
 var values=xml.getElementsByTagName("info");
 alert("值"+values);
 alert("长度"+values.length);
 // 解析获取内容
 for(var i=0;i<values.length;i++){
 var name1=values[i].getElementsByTagName("name")[0].firstChild.data;
 alert(name1);
 }
};
</script>

(2)、servlet 接受ajax 请求:

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 // TODO Auto-generated method stub
 String aaa= request.getParameter("aa");
 System.out.print("ajax 数据:"+aaa);
 // 向客户端响应信息
 response.setCharacterEncoding("GBK");
 response.setContentType("text/xml");
 PrintWriter out= response.getWriter();
 out.print("<?xml version=\"1.0\" encoding=\"GBK\"?>");
 out.println("<infos>");
 out.println("<info>");
 out.println("<name>"+"name1"+"</name>");
 out.println("<age>"+12+"</age>");
 out.println("<name>"+"name2"+"</name>");
 out.println("<age>"+22+"</age>");
 out.println("</info>");
 out.println("<info>");
 out.println("<name>"+"name11"+"</name>");
 out.println("<age>"+112+"</age>");
 out.println("<name>"+"name22"+"</name>");
 out.println("<age>"+222+"</age>");
 out.println("</info>");
 out.println("</infos>");
}

二、JavaScript 解析返回的json格式的数据:注意这里获取的是responseText 而不是responseXML也就是字符串而不是xml对象,因为返回的是json

1、发送请求,并解析返回的json格式的数据(这里返回的是json 对象的格式)

<script type="text/javascript">
/* js 解析返回的格式为 json */
function telljson(){
 // 创建 xmlhttpRequest 对象
 var xmlhttpRequest= new XMLHttpRequest();
 //请求URL
 var url="http://localhost:18080/servlet/Servlet3?aa=10";
 // 将请求过程绑定到 open 方法
 xmlhttpRequest.open("POST",url,true);
 // 发送请求
 xmlhttpRequest.send(url);
 // readstate 就是一个xmlhttprequest 对象的一个属性用来记录服务端响应的状态
 var readstate =xmlhttpRequest.readyState;
 alert("请求准备状态:"+readstate);
 // status 服务器执行的状态
 var status=xmlhttpRequest.status;
 alert("请求发送结果"+status);
 // responseText 对象为xmlhttpRequest 对象的一个属性,用来以字符串的方式存储服务器端返回的值。
 var text= xmlhttpRequest.responseText;
 alert("json text: "+text);
 // 获取json 返回值
 // 那边传的是json对象的格式的一个字符串,在前台首先将字符串转化为一个json格式的js对象
 var json= eval("("+text+")");
 // 通过eval() 方法将json格式的字符串转化为js对象,并进行解析获取内容
 alert("age:"+json.age+"age1:"+json.age1);
};
</script>

2、servlet 接受请求,并返回数据

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 // 向ajax 返回json格式的数据
  String aaa= request.getParameter("aa");
  System.out.print("ajax 数据:"+aaa);
  // 向客户端响应信息
  response.setCharacterEncoding("GBK");
  response.setContentType("text/json");
  PrintWriter out= response.getWriter();
  // 这里组装json对象的格式,并转化为json格式的字符串返回。
  String stu="{age:12,age1:23,age2:33}";
  out.print(stu);
  out.flush();
  out.close();
}

三、JavaScript 解析返回的json数组格式的数据:

1、发送ajax请求

<script type="text/javascript">
/* js 解析返回的格式为 json */
function telljson(){
 // 创建xmlhttpRequest对象
 var xmlhttpRequest= new XMLHttpRequest();
 //请求url
 var url="http://localhost:18080/servlet/Servlet3?aa=10";
 // open 方法绑定请求路径
 xmlhttpRequest.open("POST",url,true);
 // 发送ajax请求
 xmlhttpRequest.send(url);
 // readstate 就是一个xmlhttprequest 对象的一个属性用来记录服务器返回的状态信息
 var readstate =xmlhttpRequest.readyState;
 alert("请求准备状态:"+readstate);
 // status 属性用来记录服务器返回的执行状态信息
 var status=xmlhttpRequest.status;
 alert("请求发送结果"+status);
 // responseText属性用来以字符串方式存储服务器端返回的数据
 var text= xmlhttpRequest.responseText;
 alert("json text: "+text);
 // 那边传的是json数组的格式,通过js的eval() 方法将json数组格式的字符串转化为js数组
 var json= eval("("+text+")");
 // 解析这个js数组,获取数值
 var age=json[0].age;
 var age1=json[0].age1;
 var age2=json[0].age2;
 alert("age:"+age+"age1"+age1+"age2"+age2);
};
</script>

四、ajax  XMLHttpRequest 对象的三个属性以及open 和send方法:

(1)onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置:

xmlHttp.onreadystatechange=function()
{
// 我们需要在这里写一些代码
}

(2)readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。

这是 readyState 属性可能的值:

状态 描述
0 请求未初始化(在调用 open() 之前)
1 请求已提出(调用 send() 之前)
2 请求已发送(这里通常可以从响应得到内容头部)
3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
4 请求已完成(可以访问服务器响应并使用它)
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
 {
 // 从服务器的response获得数据
 }
}

(3)responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。

在我们的代码中,我们将把时间文本框的值设置为等于 responseText:

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
 {
 document.myForm.time.value=xmlHttp.responseText;
 }
}

另外:

AJAX - 向服务器发送一个请求

要想把请求发送到服务器,我们就需要使用 open() 方法和 send() 方法。

open() 方法需要三个参数:

第一个参数定义发送请求所使用的方法(GET 还是 POST)。

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

① 无法使用缓存文件(更新服务器上的文件或数据库)
② 向服务器发送大量数据(POST 没有数据量限制)
③ 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

第二个参数规定服务器端脚本的 URL(该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务))。

第三个参数规定应当对请求进行异步地处理(true(异步)或 false(同步))。

send() 方法可将请求送往服务器。如果我们假设 HTML 文件和 ASP 文件位于相同的目录,那么代码是这样的:

xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);

五、之前的实例都没有使用 XMLHttpRequest 对象的onreadystatechange 这个属性,下面看看这个属性的实例:

1、onreadystatechange  这个属性在前面也说了,就是在XMLHttpRequest 这个对象的 readyState  这个值改变的时候会执行。

2、发送ajax请求并解析

<script type="text/javascript">
/* js 解析返回的格式为 json */
function telljson(){
 // 创建对象,适合于firefox 和safari
 var xmlhttpRequest= new XMLHttpRequest();
 //请求发送路径 url
 var url="http://localhost:18080/servlet/Servlet3?aa=10";
 // Open方法绑定一个发送过程,但不发送数据。Open方法最后一个参数为true时表示异步,否则同步
 xmlhttpRequest.open("POST",url,true);
 // Send方法就是发送请求数据
 xmlhttpRequest.send(url);
 //onreadystatechange 属性存有处理服务器响应的函数
 xmlhttpRequest.onreadystatechange =function(){
 //readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。
  alert("状态改变了:"+xmlhttpRequest.readyState);
  // 如果是4 请求已完成(可以访问服务器响应并使用它)
  if(xmlhttpRequest.readyState==4){
  var readstate =xmlhttpRequest.readyState;
  alert("请求准备状态:"+readstate);
  var status=xmlhttpRequest.status;
  alert("请求发送结果"+status);
  // "responseText”是xmlhttpRequest的一个属性,来以字符串形式存储HTTP响应值;“responseXML”属性是以XML形式来记录HTTP响应的值。
  var text= xmlhttpRequest.responseText;
  alert("json text: "+text);
  // 获取json 返回值
  // 那边传的是json数组的格式,这边解析后就是一个json数组
  var json= eval("("+text+")");
  var age=json[0].age;
  var age1=json[0].age1;
  var age2=json[0].age2;
  alert("age:"+age+"age1"+age1+"age2"+age2);
  }
 }
};
</script>

3、servlet返回的数据

protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
 // 向ajax 返回json格式的数据
 String aaa = request.getParameter("aa");
 System.out.print("ajax 数据:" + aaa);
 // 向客户端响应信息
 response.setCharacterEncoding("GBK");
 response.setContentType("text/json");
 PrintWriter out = response.getWriter();
 // 这里使用 json 数组的格式
 String stu = "[{age:12,age1:23,age2:33}]";
 out.print(stu);
 out.flush();
 out.close();
}
Javascript 相关文章推荐
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 #Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 #Javascript
JS实现给对象动态添加属性的方法
Jan 05 #Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 #Javascript
JavaScript实现数组降维详解
Jan 05 #Javascript
jQuery解析返回的xml和json方法详解
Jan 05 #Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 #Javascript
You might like
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
使用jquery操作session方法分享
2015/01/22 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
layui table 参数设置方法
2018/08/14 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
python解析基于xml格式的日志文件
2017/02/25 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Python补齐字符串长度的实例
2018/11/15 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
Pytorch之parameters的使用
2019/12/31 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
班级寄语大全
2014/04/10 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
党员检讨书范文
2014/12/27 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers