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());
    }

}
  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值