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 相关文章推荐
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
js对象简介与基本用法示例
Mar 13 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
神族 PROTOSS 概述
2020/03/14 星际争霸
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
PHP批量生成缩略图的代码
2008/07/19 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
js简单时间比较的方法
2016/08/02 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
学校食品安全实施方案
2014/06/14 职场文书
工作所在部门证明
2014/09/21 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
护理专业自我评价
2015/03/11 职场文书
开除通知书范本
2015/04/25 职场文书
化妆品促销活动总结
2015/05/07 职场文书
Redis 哨兵机制及配置实现
2022/03/25 Redis