Ajax傳輸Json和xml數據

ajax傳輸xml數據:隻要把數據封裝成xml格式就可以實現傳輸,前臺js用responseXML接收xml參數,後臺讀取用流和dom4j來解析。

前臺頁面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="https://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="https://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="https://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());
    }

}

發佈留言