Ajax如何传输Json和xml数据
ajax传输xml数据：只要把数据封装成xml格式就可以实现传输，前台js用responseXML接收xml参数，后台读取用流和dom4j来解析
前台页面
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>AjaxXML数据处理演示</title>
<scripttype="text/javascript">
//get方式ajax
functionsend1(){
alert("ok");
varname=document.getElementsByName("name")[0].value;
varage=document.getElementsByName("age")[0].value;
varxhr=null;
if(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}else{
xhr=newActiveXObject("Microsoft.XMLHttp");
}
varurl="<c:urlvalue='/XmlServlet?name='/>"+name+"&age="+age;
//3设置访问方式
xhr.open("GET",url,true);
//4设置访问成功返回后的操作
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//返回
if(xhr.status==200){//响应代码正常
vartxt=xhr.responseText;
alert(txt);
}
}
};
xhr.send(null);
}
</script>
<!--前台以xml的格式向服务器发送数据-->
<scripttype="text/javascript">
//post方式ajax
functionsend2(){
alert("222");
//1创建ajax对象
varxhr=null;
if(window.XMLHttpRequest){//高版本
xhr=newXMLHttpRequest();
}else{//低版本
xhr=newActiveXObject("Microsoft.XMLHttp");
}
//2请求地址
varurl="<c:urlvalue='/XmlServlet'/>";
//3设置访问方式
xhr.open("POST",url,true);
//4设置访问成功返回后的操作
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//返回
if(xhr.status==200){//响应代码正常
varxmlObj=xhr.responseXML;
varusers=xmlObj.getElementsByTagName("user");
for(vari=0;i<users.length;i++){
varid=users[i].getAttribute("id");
varname=users[i].childNodes[0].firstChild.data;//xml中的dom模型中的操作方法，和html中有点小差别
varage=users[i].childNodes[1].firstChild.data;//不能用childNodes["age"]
alert(id+","+name+","+age);
}
}
}
};
varname=document.getElementsByName("name")[0].value;
varage=document.getElementsByName("age")[0].value;
varxml="<user><name>"+name+"</name><age>"+age+"</age></user>";
xhr.send(xml);
}
</script>
</head>
<body>
Name:
<inputtype="text"name="name">
<br/>Age:
<inputtype="text"name="age">
<br/>
<inputtype="button"value="Get提交"onclick="send1();"/>
<br/>
<inputtype="button"value="Post提交"onclick="send2()"/>
<br/>
</body>
</html>
后台页面
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>AjaxXML数据处理演示</title>
<scripttype="text/javascript">
//get方式ajax
functionsend1(){
alert("ok");
varname=document.getElementsByName("name")[0].value;
varage=document.getElementsByName("age")[0].value;
varxhr=null;
if(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}else{
xhr=newActiveXObject("Microsoft.XMLHttp");
}
varurl="<c:urlvalue='/XmlServlet?name='/>"+name+"&age="+age;
//3设置访问方式
xhr.open("GET",url,true);
//4设置访问成功返回后的操作
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//返回
if(xhr.status==200){//响应代码正常
vartxt=xhr.responseText;
alert(txt);
}
}
};
xhr.send(null);
}
</script>
<!--前台以xml的格式向服务器发送数据-->
<scripttype="text/javascript">
//post方式ajax
functionsend2(){
alert("222");
//1创建ajax对象
varxhr=null;
if(window.XMLHttpRequest){//高版本
xhr=newXMLHttpRequest();
}else{//低版本
xhr=newActiveXObject("Microsoft.XMLHttp");
}
//2请求地址
varurl="<c:urlvalue='/XmlServlet'/>";
//3设置访问方式
xhr.open("POST",url,true);
//4设置访问成功返回后的操作
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//返回
if(xhr.status==200){//响应代码正常
varxmlObj=xhr.responseXML;
varusers=xmlObj.getElementsByTagName("user");
for(vari=0;i<users.length;i++){
varid=users[i].getAttribute("id");
varname=users[i].childNodes[0].firstChild.data;//xml中的dom模型中的操作方法，和html中有点小差别
varage=users[i].childNodes[1].firstChild.data;//不能用childNodes["age"]
alert(id+","+name+","+age);
}
}
}
};
varname=document.getElementsByName("name")[0].value;
varage=document.getElementsByName("age")[0].value;
varxml="<user><name>"+name+"</name><age>"+age+"</age></user>";
xhr.send(xml);
}
</script>
</head>
<body>
Name:
<inputtype="text"name="name">
<br/>Age:
<inputtype="text"name="age">
<br/>
<inputtype="button"value="Get提交"onclick="send1();"/>
<br/>
<inputtype="button"value="Post提交"onclick="send2()"/>
<br/>
</body>
</html>
--------------------------------------------------------------------------------
Ajax传输Json数据的要点利用Apache或者阿里巴巴的JSONArray类进行传输
前台代码
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>AjaxJson数据处理演示</title>
<scripttype="text/javascript">
functionask1(){
//1创建ajax对象
varxhr=null;
if(window.XMLHttpRequest){//高版本
xhr=newXMLHttpRequest();
}else{//低版本
xhr=newActiveXObject("Microsoft.XMLHttp");
}
//2请求地址
varurl="<c:urlvalue='/JsonServlet1'/>";
//3设置访问方式
xhr.open("POST",url,true);
//4设置访问成功返回后的操作
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//返回
if(xhr.status==200){//响应代码正常
//※※※※※解析后台返回的json串
//js中eval()方法的功能：是校验参数文本串符合js中哪一种数据类型，并把其转换成对应类型的对象
vartxt=xhr.responseText;
varusers=eval("("+txt+")");//把符合json格式的文本串转换成json对象
for(vari=0;i<users.length;i++){
alert(users[i].id+","+users[i].name+","
+users[i].age);
}
}
}
};
//5发送
xhr.send(null);
}
functionask2(){
//1创建ajax对象
varxhr=null;
if(window.XMLHttpRequest){//高版本
xhr=newXMLHttpRequest();
}else{//低版本
xhr=newActiveXObject("Microsoft.XMLHttp");
}
//2请求地址
varurl="<c:urlvalue='/JsonServlet2'/>";
//3设置访问方式
xhr.open("POST",url,true);
//4设置访问成功返回后的操作
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//返回
if(xhr.status==200){//响应代码正常
//※※※※※解析后台返回的json串
//js中eval()方法的功能：是校验参数文本串符合js中哪一种数据类型，并把其转换成对应类型的对象
vartxt=xhr.responseText;
//alert(txt);
//把符合json格式的文本串转换成json对象
varusers=eval("("+txt+")");
for(varkeyinusers)//map的便利方式
alert("属性："+key+",值："+users[key]);
}
//for(vari=0;i<users.length;i++){//list的遍历方式
//alert(users[i].id+","+users[i].name+","+users[i].age);
//}
};
};
//5发送
xhr.send(null);
}
functionask3(){
//1创建ajax对象
varxhr=null;
if(window.XMLHttpRequest){//高版本
xhr=newXMLHttpRequest();
}else{//低版本
xhr=newActiveXObject("Microsoft.XMLHttp");
}
//2请求地址
varurl="<c:urlvalue='/JsonServlet2'/>";
//3设置访问方式
xhr.open("POST",url,true);
//4设置访问成功返回后的操作
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//返回
if(xhr.status==200){//响应代码正常
//※※※※※解析后台返回的json串
//js中eval()方法的功能：是校验参数文本串符合js中哪一种数据类型，并把其转换成对应类型的对象
vartxt=xhr.responseText;
//alert(txt);
//把符合json格式的文本串转换成json对象
varusers=eval("("+txt+")");
for(varkeyinusers)//map的便利方式
alert("属性："+key+",值："+users[key]);
}
//for(vari=0;i<users.length;i++){//list的遍历方式
//alert(users[i].id+","+users[i].name+","+users[i].age);
//}
};
};
//5发送
xhr.send(null);
}
</script>
</head>
<body>
<inputtype="button"onclick="ask1();"value="ajax请求后台数据(手动封装json方式)"/>
<br/>
<inputtype="button"onclick="ask2();"
value="ajax请求后台数据(用apache工具封装json方式)"/>
<inputtype="button"onclick="ask3()"value="ajax请求后台数据(用fastjson工具封装json方式)"/>
</body>
</html>
JsonServlet1.java
packagecn.hncu.servlet;
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.ArrayList;
importjava.util.List;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importcn.hncu.domain.User;
publicclassJsonServlet1extendsHttpServlet{
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
doPost(request,response);
}
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
//调用后台service.dao.query()，到数据库当中把信息读取出来
//为简化知识点的理解，此处后台部分的功能直接模拟
response.setContentType("text/html;charset=utf-8");
PrintWriterout=response.getWriter();
List<User>users=newArrayList<User>();
users.add(newUser("A001","Jack",20));
users.add(newUser("A002","Rose",22));
users.add(newUser("B001","张三",20));
users.add(newUser("B002","李四",30));
Stringjson="";
//用java封装出json格式的字符串：[{name:"Jack",age:25},{...},{...}]
for(Useru:users){
if(json.equals("")){
json="{name:\""+u.getName()+"\",id:\""+u.getId()+"\",age:"+u.getAge()+"}";
}else{
json=json+",{name:\""+u.getName()+"\",id:\""+u.getId()+"\",age:"+u.getAge()+"}";
}
}
json="["+json+"]";
out.print(json);
}
}
JsonServlet2.java
packagecn.hncu.servlet;
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.ArrayList;
importjava.util.HashMap;
importjava.util.List;
importjava.util.Map;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importcn.hncu.domain.User;
importnet.sf.json.JSONArray;
importnet.sf.json.JSONObject;
publicclassJsonServlet2extendsHttpServlet{
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.setContentType("text/html;charset=utf-8");
PrintWriterout=response.getWriter();
List<User>users=newArrayList<User>();
users.add(newUser("A001","Jack",20));
users.add(newUser("A002","Rose",22));
users.add(newUser("B001","张三",20));
users.add(newUser("B002","李四",30));
StringstrJson=com.alibaba.fastjson.JSONArray.toJSONString(users);
System.out.println(strJson);
//用fastjson工具(只有一个jar包)帮我们把list转换成json串
Map<String,Object>map=newHashMap<String,Object>();
map.put("addr","湖南");
map.put("height","170");
map.put("marry","no");
map.put("user",newUser("A003","小李",25));
StringstrMap=com.alibaba.fastjson.JSONArray.toJSONString(map);
out.print(strMap.toString());
}
}
JsonServlet3.java
packagecn.hncu.servlet;
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.ArrayList;
importjava.util.HashMap;
importjava.util.List;
importjava.util.Map;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importnet.sf.json.JSONArray;
importnet.sf.json.JSONObject;
importcn.hncu.domain.User;
publicclassJsonServlet3extendsHttpServlet{
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.setContentType("text/html;charset=utf-8");
PrintWriterout=response.getWriter();
List<User>users=newArrayList<User>();
users.add(newUser("A001","Jack",20));
users.add(newUser("A002","Rose",22));
users.add(newUser("B001","张三",20));
users.add(newUser("B002","李四",30));
//用fastjson工具(只有一个jar包)帮我们把list转换成json串
JSONArrayjson=JSONArray.fromObject(users);
StringstrJson=json.toString();
System.out.println(strJson);
Map<String,Object>map=newHashMap<String,Object>();
map.put("addr","湖南");
map.put("height","170");
map.put("marry","no");
map.put("user",newUser("A003","小李",25));
JSONObjectobj=JSONObject.fromObject(map);
System.out.println(obj.toString());
out.print(obj.toString());
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。