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

前端之家收集整理的这篇文章主要介绍了javascript解析ajax返回的xml和json格式数据实例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了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请求,以及解析返回的数据

方法绑定一个发送过程,但不发送数据。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

(2)、servlet 接受ajax 请求:

"); out.println(""); out.println(""); out.println(""+"name1"+""); out.println(""+12+""); out.println(""+"name2"+""); out.println(""+22+""); out.println(""); out.println(""); out.println(""+"name11"+""); out.println(""+112+""); out.println(""+"name22"+""); out.println(""+222+""); out.println(""); out.println(""); }

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

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

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

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

1、发送ajax请求

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

(1)onreadystatechange 属性

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

(2)readyState 属性

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

这是 readyState 属性可能的值:

状态

(3)responseText 属性

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

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

另外:

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

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

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

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

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

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

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

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

2、发送ajax请求并解析

3、servlet返回的数据

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

在线XML/JSON互相转换工具:

在线格式化XML/在线压缩XML:

XML

在线压缩/格式化工具:

在线JSON代码检验、检验、美化、格式化工具:

JSON

在线格式化工具:

在线json压缩/转义工具:

更多关于JavaScript相关内容可查看本站专题:《》、《》、《》、《》及《

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

猜你在找的Ajax相关文章