Ajax传输Json和xml数据
Posted wangjian_an
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>后台页面
package cn.hncu.servlet;
import java.io.BufferedInputStream;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.io.StringReader;
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 org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import cn.hncu.domain.User;
public class XmlServlet extends HttpServlet
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
response.setContentType("text/html;charset=utf-8");
String name=request.getParameter("name");
String age=request.getParameter("age");
System.out.println("name:"+name+" age"+age);
response.getWriter().print("通知");
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
request.setCharacterEncoding("utf-8");
//设置响应头---▲▲▲注意要设置xml响应格式
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
InputStream in=request.getInputStream();
BufferedReader bis=new BufferedReader(new InputStreamReader(in,"utf-8"));//要加编码
String line=null;
StringBuffer xml=new StringBuffer();
while((line=bis.readLine())!=null)
xml.append(line);
System.out.println(xml.toString());
//后台读取出来之后，用dom4j来解析就行
SAXReader sax=new SAXReader();
try
Document dom=sax.read(new StringReader(xml.toString()));
Element root=dom.getRootElement();
String name=root.elementText("name");
String age=root.elementText("age");
System.out.println("后台解析结果:"+name+","+age);
catch (DocumentException e)
e.printStackTrace();
//-----------------从前端向后台servlet发送，实现相对简单点--------------------------------
List<User> list=new ArrayList<User>();
list.add(new User("U001","Jack",22));
list.add(new User("U002","张三",23));
String res="<users>";
for(User user:list)
res+="<user id=\\""+user.getId()+"\\"><name>"+user.getName()+"</name><age>"+user.getAge()+"</age></user>";
res+="</users>";
//设置响应头---▲▲▲注意要设置xml响应格式
out.print(res);
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数据的主要内容，如果未能解决你的问题，请参考以下文章