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）、使用W3CDOM节点树方法和属性对该XML文档对象进行检查和解析。
2、实例：
（1）、发送ajax请求，以及解析返回的数据
<scripttype="text/javascript">
/*js版本发送ajax请求*/
functiontellxml(){
//创建对象,适合于firefox和safari
varxmlhttpRequest=newXMLHttpRequest();
//创建对象，适合于ie
//varxmlhttpRequest=newActiveXObject("Msxml2.XMLHTTP");
//请求发送路径url
varurl="http://localhost:18080/servlet/Servlet1?aa=10";
//Open方法绑定一个发送过程,但不发送数据。Open方法最后一个参数为true时表示异步,否则同步
xmlhttpRequest.open("POST",url,true);
//Send方法就是发送请求数据
xmlhttpRequest.send(url);
//readstate就是一个xmlhttprequest对象的一个属性，来记录服务器返回的状态
varreadstate=xmlhttpRequest.readyState;
alert("状态："+readstate);
//status就是发送请求的状态，如果是200则说明请求响应成功
varstatus=xmlhttpRequest.status;
alert("请求发送结果"+status);
//"responseText”是xmlhttpRequest的一个属性，来以字符串形式存储HTTP响应值；“responseXML”属性是以XML形式来记录HTTP响应的值。
vartext=xmlhttpRequest.responseText;
alert(text);
//“responseXML”是xmlhttpRequest的一个属性，是以XML文档的对象来存储服务器端返回的值，可以使用W3CDOM节点树方法和属性对该XML文档对象进行检查和解析。
varxml=xmlhttpRequest.responseXML;
varvalues=xml.getElementsByTagName("info");
alert("值"+values);
alert("长度"+values.length);
//解析获取内容
for(vari=0;i<values.length;i++){
varname1=values[i].getElementsByTagName("name")[0].firstChild.data;
alert(name1);
}
};
</script>
（2）、servlet接受ajax请求：
@Override
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
//TODOAuto-generatedmethodstub
Stringaaa=request.getParameter("aa");
System.out.print("ajax数据："+aaa);
//向客户端响应信息
response.setCharacterEncoding("GBK");
response.setContentType("text/xml");
PrintWriterout=response.getWriter();
out.print("<?xmlversion=\"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对象的格式）
<scripttype="text/javascript">
/*js解析返回的格式为json*/
functiontelljson(){
//创建xmlhttpRequest对象
varxmlhttpRequest=newXMLHttpRequest();
//请求URL
varurl="http://localhost:18080/servlet/Servlet3?aa=10";
//将请求过程绑定到open方法
xmlhttpRequest.open("POST",url,true);
//发送请求
xmlhttpRequest.send(url);
//readstate就是一个xmlhttprequest对象的一个属性用来记录服务端响应的状态
varreadstate=xmlhttpRequest.readyState;
alert("请求准备状态："+readstate);
//status服务器执行的状态
varstatus=xmlhttpRequest.status;
alert("请求发送结果"+status);
//responseText对象为xmlhttpRequest对象的一个属性，用来以字符串的方式存储服务器端返回的值。
vartext=xmlhttpRequest.responseText;
alert("jsontext:"+text);
//获取json返回值
//那边传的是json对象的格式的一个字符串，在前台首先将字符串转化为一个json格式的js对象
varjson=eval("("+text+")");
//通过eval()方法将json格式的字符串转化为js对象，并进行解析获取内容
alert("age:"+json.age+"age1:"+json.age1);
};
</script>
2、servlet接受请求，并返回数据
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
//向ajax返回json格式的数据
Stringaaa=request.getParameter("aa");
System.out.print("ajax数据："+aaa);
//向客户端响应信息
response.setCharacterEncoding("GBK");
response.setContentType("text/json");
PrintWriterout=response.getWriter();
//这里组装json对象的格式，并转化为json格式的字符串返回。
Stringstu="{age:12,age1:23,age2:33}";
out.print(stu);
out.flush();
out.close();
}
三、JavaScript解析返回的json数组格式的数据：
1、发送ajax请求
<scripttype="text/javascript">
/*js解析返回的格式为json*/
functiontelljson(){
//创建xmlhttpRequest对象
varxmlhttpRequest=newXMLHttpRequest();
//请求url
varurl="http://localhost:18080/servlet/Servlet3?aa=10";
//open方法绑定请求路径
xmlhttpRequest.open("POST",url,true);
//发送ajax请求
xmlhttpRequest.send(url);
//readstate就是一个xmlhttprequest对象的一个属性用来记录服务器返回的状态信息
varreadstate=xmlhttpRequest.readyState;
alert("请求准备状态："+readstate);
//status属性用来记录服务器返回的执行状态信息
varstatus=xmlhttpRequest.status;
alert("请求发送结果"+status);
//responseText属性用来以字符串方式存储服务器端返回的数据
vartext=xmlhttpRequest.responseText;
alert("jsontext:"+text);
//那边传的是json数组的格式，通过js的eval()方法将json数组格式的字符串转化为js数组
varjson=eval("("+text+")");
//解析这个js数组，获取数值
varage=json[0].age;
varage1=json[0].age1;
varage2=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属性可能的值：
状态
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请求并解析
<scripttype="text/javascript">
/*js解析返回的格式为json*/
functiontelljson(){
//创建对象,适合于firefox和safari
varxmlhttpRequest=newXMLHttpRequest();
//请求发送路径url
varurl="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){
varreadstate=xmlhttpRequest.readyState;
alert("请求准备状态："+readstate);
varstatus=xmlhttpRequest.status;
alert("请求发送结果"+status);
//"responseText”是xmlhttpRequest的一个属性，来以字符串形式存储HTTP响应值；“responseXML”属性是以XML形式来记录HTTP响应的值。
vartext=xmlhttpRequest.responseText;
alert("jsontext:"+text);
//获取json返回值
//那边传的是json数组的格式，这边解析后就是一个json数组
varjson=eval("("+text+")");
varage=json[0].age;
varage1=json[0].age1;
varage2=json[0].age2;
alert("age:"+age+"age1"+age1+"age2"+age2);
}
}
};
</script>
3、servlet返回的数据
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
//向ajax返回json格式的数据
Stringaaa=request.getParameter("aa");
System.out.print("ajax数据："+aaa);
//向客户端响应信息
response.setCharacterEncoding("GBK");
response.setContentType("text/json");
PrintWriterout=response.getWriter();
//这里使用json数组的格式
Stringstu="[{age:12,age1:23,age2:33}]";
out.print(stu);
out.flush();
out.close();
}
PS：这里再为大家提供几款关于xml与json操作的在线工具供大家参考使用：
在线