风云阁资源网

javascript解析ajax返回的xml和json格式数据实例详解
网络编程 2024/11/17 佚名
3 1

本文实例讲述了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";
 // 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("<"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";
 // 将请求过程绑定到 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";
 // 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";
 // 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();
}

PS：这里再为大家提供几款关于xml与json操作的在线工具供大家参考使用：

在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson

在线格式化XML/在线压缩XML：
http://tools.jb51.net/code/xmlformat

XML在线压缩/格式化工具：
http://tools.jb51.net/code/xml_format_compress

在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在线格式化工具：
http://tools.jb51.net/code/jsonformat

在线json压缩/转义工具：
http://tools.jb51.net/code/json_yasuo_trans

更多关于JavaScript相关内容可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript操作XML文件技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数据结构与算法技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

风云阁资源网 Design By www.bgabc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
风云阁资源网 Design By www.bgabc.com
www.bgabc.com 风云阁资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
风云阁资源网 Design By www.bgabc.com