Ajax如何传输Json和xml数据

2024-09-01 08:27:41

字体：大中小

来源：转载

供稿：网友

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" name="name"> <br /> Age: <input type="text" name="age"> <br /> <input type="button" value="Get提交" onclick="send1();" /> <br /> <input type="button" value="Post提交" onclick="send2()" /> <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" name="name"> <br /> Age: <input type="text" name="age"> <br /> <input type="button" value="Get提交" onclick="send1();" /> <br /> <input type="button" value="Post提交" onclick="send2()" /> <br /></body></html>

上一篇：浅谈Bootstrap的DatePicker日期范围选择

下一篇：ajax结合豆瓣搜索结果进行分页完整代码