Ajax如何传输Json和xml数据

来源：动视网责编：小OO 时间：2020-11-27 20:08:21

Ajax如何传输Json和xml数据

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

推荐度：

点击下载本文 文档为doc格式

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

这篇文章主要为大家详细介绍了Ajax如何传输Json和xml数据,具有一定的参考学习ajax的价值，对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" 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>

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

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

<%@ 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 Json数据处理演示</title>
<script type="text/javascript">
 function ask1() {
 //1创建ajax对象
 var xhr = null;
 if (window.XMLHttpRequest) {//高版本
 xhr = new XMLHttpRequest();
 } else {//低版本
 xhr = new ActiveXObject("Microsoft.XMLHttp");
 }

 //2请求地址
 var url = "<c:url value='/JsonServlet1'/>";

 //3设置访问方式
 xhr.open("POST", url, true);

 //4设置访问成功返回后的操作
 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4) {//返回
 if (xhr.status == 200) {//响应代码正常
 //※※※※※解析后台返回的json串
 //js中eval()方法的功能：是校验参数文本串符合js中哪一种数据类型，并把其转换成对应类型的对象
 var txt = xhr.responseText;
 var users = eval("(" + txt + ")"); //把符合json格式的文本串 转换成 json对象
 for ( var i = 0; i < users.length; i++) {
 alert(users[i].id + "," + users[i].name + ","
 + users[i].age);
 }
 }
 }
 };
 //5 发送
 xhr.send(null);
 }

 function ask2() {
 //1创建ajax对象
 var xhr = null;
 if (window.XMLHttpRequest) {//高版本
 xhr = new XMLHttpRequest();
 } else {//低版本
 xhr = new ActiveXObject("Microsoft.XMLHttp");
 }

 //2请求地址
 var url = "<c:url value='/JsonServlet2'/>";

 //3设置访问方式
 xhr.open("POST", url, true);

 //4设置访问成功返回后的操作
 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4) {//返回
 if (xhr.status == 200) {//响应代码正常
 //※※※※※解析后台返回的json串
 //js中eval()方法的功能：是校验参数文本串符合js中哪一种数据类型，并把其转换成对应类型的对象
 var txt = xhr.responseText;
 //alert(txt);
 //把符合json格式的文本串 转换成 json对象
 var users = eval("(" + txt + ")"); 
 for ( var key in users)//map的便利方式
 alert("属性：" + key + ",值：" + users[key]);
 }
 //for ( var i = 0; i < users.length; i++) {//list的遍历方式
 //alert(users[i].id +","+users[i].name+","+users[i].age);
 //}
 };
 };
 //5 发送
 xhr.send(null);
 }


 function ask3() {
 //1创建ajax对象
 var xhr = null;
 if (window.XMLHttpRequest) {//高版本
 xhr = new XMLHttpRequest();
 } else {//低版本
 xhr = new ActiveXObject("Microsoft.XMLHttp");
 }

 //2请求地址
 var url = "<c:url value='/JsonServlet2'/>";

 //3设置访问方式
 xhr.open("POST", url, true);

 //4设置访问成功返回后的操作
 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4) {//返回
 if (xhr.status == 200) {//响应代码正常
 //※※※※※解析后台返回的json串
 //js中eval()方法的功能：是校验参数文本串符合js中哪一种数据类型，并把其转换成对应类型的对象
 var txt = xhr.responseText;
 //alert(txt);
 //把符合json格式的文本串 转换成 json对象
 var users = eval("(" + txt + ")"); 
 for ( var key in users)//map的便利方式
 alert("属性：" + key + ",值：" + users[key]);
 }
 //for ( var i = 0; i < users.length; i++) {//list的遍历方式
 //alert(users[i].id +","+users[i].name+","+users[i].age);
 //}
 };
 };
 //5 发送
 xhr.send(null);
 }
</script>

</head>
<body>
 <input type="button" onclick="ask1();" value="ajax请求后台数据(手动封装json方式)" />
 <br />
 <input type="button" onclick="ask2();"
 value="ajax请求后台数据(用apache工具封装json方式)" />
 <input type="button" onclick="ask3()" value="ajax请求后台数据(用fastjson工具封装json方式)" />
</body>
</html>

JsonServlet1.java

package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.hncu.domain.User;

public class JsonServlet1 extends HttpServlet {

 public void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 doPost(request, response);
 }


 public void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 //调用后台service.dao.query()，到数据库当中把信息读取出来
 //为简化知识点的理解，此处后台部分的功能直接模拟
 response.setContentType("text/html;charset=utf-8");
 PrintWriter out = response.getWriter();
 List<User> users = new ArrayList<User>();
 users.add(new User("A001","Jack",20));
 users.add(new User("A002","Rose",22));
 users.add(new User("B001","张三",20));
 users.add(new User("B002","李四",30));
 String json="";
 //用java封装出json格式的字符串：[{name:"Jack",age:25}, {...}, {...} ]
 for(User u: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

package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.hncu.domain.User;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class JsonServlet2 extends HttpServlet {

 public void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {

 response.setContentType("text/html;charset=utf-8");
 PrintWriter out = response.getWriter();
 List<User> users = new ArrayList<User>();
 users.add(new User("A001","Jack",20));
 users.add(new User("A002","Rose",22));
 users.add(new User("B001","张三",20));
 users.add(new User("B002","李四",30));
 String strJson=com.alibaba.fastjson.JSONArray.toJSONString(users);
 System.out.println(strJson);
 //用fastjson工具(只有一个jar包)帮我们把list转换成json串
 Map<String, Object> map = new HashMap<String, Object>();
 map.put("addr", "湖南");
 map.put("height", "170");
 map.put("marry", "no");
 map.put("user", new User("A003","小李",25));
 String strMap=com.alibaba.fastjson.JSONArray.toJSONString(map);

 out.print(strMap.toString());
 }

}

JsonServlet3.java

package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import cn.hncu.domain.User;

public class JsonServlet3 extends HttpServlet {

 public void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {

 response.setContentType("text/html;charset=utf-8");
 PrintWriter out = response.getWriter();
 List<User> users = new ArrayList<User>();
 users.add(new User("A001","Jack",20));
 users.add(new User("A002","Rose",22));
 users.add(new User("B001","张三",20));
 users.add(new User("B002","李四",30));
 //用fastjson工具(只有一个jar包)帮我们把list转换成json串
 JSONArray json=JSONArray.fromObject(users);
 String strJson=json.toString();
 System.out.println(strJson);

 Map<String, Object> map = new HashMap<String, Object>();
 map.put("addr", "湖南");
 map.put("height", "170");
 map.put("marry", "no");
 map.put("user", new User("A003","小李",25));
 JSONObject obj = JSONObject.fromObject(map);
 System.out.println(obj.toString());

 out.print(obj.toString());
 }

}

Ajax如何传输Json和xml数据

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

推荐度：

点击下载本文 文档为doc格式

标签：数据 xml json

热门焦点

Ajax如何传输Json和xml数据

Ajax如何传输Json和xml数据

Ajax如何传输Json和xml数据

最新推荐

猜你喜欢

热门推荐