Ajax傳輸Json和xml資料

阿新 • • 發佈：2019-02-09

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資料

ajax傳輸xml資料：只要把資料封裝成xml格式就可以實現傳輸，前臺js用responseXML接收xml引數，後臺讀取用流和dom4j來解析前臺頁面 <%@ page language="java" import="java.util.*"

Qt讀取JSON和XML資料

QJSON JSON(JavaScript Object Notation)是一個輕量級的資料交換格式; 可以將資料以name/value的形式任意組合; QJson 是一個基於Qt的庫, 將JSON的資料map成name-QVariant的形式, 或者進

php寫介面例子返回json和xml資料

<?php // echo md5("news1"); /* 查詢介面地址：http://apis.juhe.cn/mobile/get 支援格式：json/xml 請求方

PHP. 03 .ajax傳輸XML、 ajax傳輸json、封裝

格式 logs isp round list ati splay name ner XML簡介 XML 指可擴展標記語言 EXtensible Markup Language 。設計的時候是用來傳遞數據的，雖然格式跟HTML類似 xml示例 <?xml versi

ajax ---- json 和 xml 區別

需要 pro ces 文件格式很多 pos 使用基本 perl 2.XML和JSON優缺點 (1).XML的優缺點<1>.XML的優點　　A.格式統一，符合標準；　　B.容易與其他系統進行遠程交互，數據共享比較方便。<2>.XML的缺點　　A.X

php中json資料和xml資料的封裝

<?php /* * 作用：將p轉換為josn格式的資料 * 備註：json_encode只接受UTF-8的編碼資料 */ //echo json_encode($arr); /* * 作用：將p3資料從p1編碼轉換為p2編碼 * p1: 原編碼 * p

Jquery中ajax傳輸json資料顯示undefined錯誤

今天在做ajax的時候突然發現一個問題，以前在用Jquery1.3的時候都正常的方法結果現在都不行。 firebug中發現我要的資料已經返回，而且資料顯示正常，但是前臺取值一直都提示undefined

ajax之前臺和後臺資料傳輸

Spring中ajax資料傳輸由於專案需要用ajax提交資料，而不是form提交資料。因此我需要學習ajax，這也是我在開發小組做的最後一個東西，儘管由於暑假要去東軟實訓，這個ajax提交也沒有做完

json和xml封裝數據、數據緩存到文件中

用戶 lena 數據緩存完全數據類型 lin print 函數 response 一、APP的通信格式之xml xml：擴展標記語言，可以用來標記數據，定義數據類型，是一種允許用戶對自己標記語言進行定義的源語言。XML格式統一，擴平臺語言，非常適合數據傳輸和通信，業界

快來看看Google出品的Protocol Buffer，別僅僅會用Json和XML了

println 輸出流基本數據類型下一個 ebr sid 官網序列 reg 前言習慣用 Json、XML 數據存儲格式的你們，相信大多都沒聽過Protocol Buffer Protocol Buffer 事實上是 Google出品的一種輕

Springboot+ajax傳輸json數組以及單條數據的方法

script pri 選中 aps ring ont image autowire ids Springboot+ajax傳輸json數組以及單條數據的方法下面是用ajax傳輸到後臺單條以及多條數據的解析的Demo: 結構圖如下: 下面是相關的代碼: pom.xml:

webApi-配置json和xml格式及時間格式

在config檔案中修改如下程式碼： //新增全域性異常過濾器 config.Filters.Add(new ErrorFilterAttribute()); //設定xml格式器---用於遮蔽字典型別xml序列化錯誤

json和pickle資料序列化和反序列化

序列化 info = { 'name':'alex', 'age':22}f = open("test.txt",'w')f.write(str(info)) #把一個字典轉換成字串從記憶體存到硬碟的過程叫序列

ajax 上傳檔案，post上傳檔案，ajax 提交 JSON 格式的資料

ajax簡介前後臺做資料互動前後端做資料互動的方式（三種）：（1）瀏覽器視窗輸入地址（get的方式）（2）form表單提交資料（3）ajax提交資料特點特點：　　（1）非同步　　　　　　非同步與同步的區別：同步是請求發過去，要等著迴應；非同步不

Notepad++ 安裝json和xml外掛

json和xml外掛下載： xml tools:https://sourceforge.net/projects/npp-plugins/files/XML%20Tools/ json 32位: https://sourceforge.net/projects/nppjsonv

jquery ajax 獲取txt和html資料

ajaxTxt.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajaxTxt</title> <script

C#中欄位不被序列化成JSON和XML

將一個類序列化成JSON或XML時，如果某個欄位或屬性不想被序列化，則可以使用以下Attribute： 1、[Newtonsoft.Json.JsonIgnore]特性：使用Newtonsoft.Json序列化時欄位不會被序列化。 2、[System.Web.Script

AJAX:基於js和xml來實現非同步請求

要談AJAX，就不得不提同步與非同步的概念了同步互動：使用者傳送一個請求，在收到伺服器的應答之前，不可以做任何操作。並且在收到應答後，會重新整理整個頁面。在網絡不好的情況下使用者體驗不好。非同步互動：使用者傳送一個請求，在收到伺服器的應答之前，可以向伺服器傳送新的請求。

JSON 和 XML優缺點的比較

JSON(Javascript Object Notation) 是一種輕量級的資料交換格式。易於人閱讀和編寫。同時也易於機器解析和生成。它基於JavascriptProgramming Language, Standard ECMA-262 3rd Edition - December 1999的一個子集。

關於JSON和XML格式之間的轉換

1.JSON轉XML /** * json字串轉換成xml格式字串 * * @return */ public static String json2Xml() { String json = "{\"business\":{\"body\":{\"fpdm\":\"發

Ajax傳輸Json和xml資料

ajax傳輸xml資料：只要把資料封裝成xml格式就可以實現傳輸，前臺js用responseXML接收xml引數，後臺讀取用流和dom4j來解析

相關推薦