Ajax如何传输Json和xml数据

ajax传输xml数据:只要把数据封装成xml格式就可以实现传输,前台js用responseXML接收xml参数,后台读取用流和dom4j来解析

前台页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ajax XML数据处理演示</title> <script type="text/javascript"> //get方式ajax function send1(){ alert("ok"); var name=document.getElementsByName("name")[0].value; var age=document.getElementsByName("age")[0].value; var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft.XMLHttp"); } var url="<c:url value='/XmlServlet?name='/>"+name+"&age="+age; //3设置访问方式 xhr.open("GET", url, true); //4设置访问成功返回后的操作 xhr.onreadystatechange=function(){ if(xhr.readyState==4){//返回 if(xhr.status==200){//响应代码正常 var txt=xhr.responseText; alert(txt); } } }; xhr.send(null); } </script> <!-- 前台以xml的格式向服务器发送数据 --> <script type="text/javascript"> //post方式ajax function send2(){ alert("222"); //1创建ajax对象 var xhr = null; if(window.XMLHttpRequest){//高版本 xhr = new XMLHttpRequest(); }else{//低版本 xhr = new ActiveXObject("Microsoft.XMLHttp"); } //2请求地址 var url = "<c:url value='/XmlServlet'/>"; //3设置访问方式 xhr.open("POST", url, true); //4设置访问成功返回后的操作 xhr.onreadystatechange=function(){ if(xhr.readyState==4){//返回 if(xhr.status==200){//响应代码正常 var xmlObj=xhr.responseXML; var users=xmlObj.getElementsByTagName("user"); for(var i=0;i<users.length;i++){ var id=users[i].getAttribute("id"); var name=users[i].childNodes[0].firstChild.data;//xml中的dom模型中的操作方法,和html中有点小差别 var age=users[i].childNodes[1].firstChild.data;//不能用childNodes["age"] alert(id+","+name+","+age); } } } }; var name=document.getElementsByName("name")[0].value; var age=document.getElementsByName("age")[0].value; var xml="<user><name>"+name+"</name><age>"+age+"</age></user>"; xhr.send(xml); } </script> </head> <body> Name: <input type="text"> <br /> Age: <input type="text"> <br /> <input type="button" value="Get提交" /> <br /> <input type="button" value="Post提交" /> <br /> </body> </html>

后台页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ajax XML数据处理演示</title> <script type="text/javascript"> //get方式ajax function send1(){ alert("ok"); var name=document.getElementsByName("name")[0].value; var age=document.getElementsByName("age")[0].value; var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft.XMLHttp"); } var url="<c:url value='/XmlServlet?name='/>"+name+"&age="+age; //3设置访问方式 xhr.open("GET", url, true); //4设置访问成功返回后的操作 xhr.onreadystatechange=function(){ if(xhr.readyState==4){//返回 if(xhr.status==200){//响应代码正常 var txt=xhr.responseText; alert(txt); } } }; xhr.send(null); } </script> <!-- 前台以xml的格式向服务器发送数据 --> <script type="text/javascript"> //post方式ajax function send2(){ alert("222"); //1创建ajax对象 var xhr = null; if(window.XMLHttpRequest){//高版本 xhr = new XMLHttpRequest(); }else{//低版本 xhr = new ActiveXObject("Microsoft.XMLHttp"); } //2请求地址 var url = "<c:url value='/XmlServlet'/>"; //3设置访问方式 xhr.open("POST", url, true); //4设置访问成功返回后的操作 xhr.onreadystatechange=function(){ if(xhr.readyState==4){//返回 if(xhr.status==200){//响应代码正常 var xmlObj=xhr.responseXML; var users=xmlObj.getElementsByTagName("user"); for(var i=0;i<users.length;i++){ var id=users[i].getAttribute("id"); var name=users[i].childNodes[0].firstChild.data;//xml中的dom模型中的操作方法,和html中有点小差别 var age=users[i].childNodes[1].firstChild.data;//不能用childNodes["age"] alert(id+","+name+","+age); } } } }; var name=document.getElementsByName("name")[0].value; var age=document.getElementsByName("age")[0].value; var xml="<user><name>"+name+"</name><age>"+age+"</age></user>"; xhr.send(xml); } </script> </head> <body> Name: <input type="text"> <br /> Age: <input type="text"> <br /> <input type="button" value="Get提交" /> <br /> <input type="button" value="Post提交" /> <br /> </body> </html>

--------------------------------------------------------------------------------

Ajax传输Json数据的要点利用Apache或者阿里巴巴的JSONArray类进行传输
前台代码

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjpgyw.html