AJAX實(shí)現(xiàn)JSON與XML數(shù)據(jù)交換方法詳解

更新時(shí)間：2023年01月13日 09:55:07 作者：@每天都要敲代碼

這篇文章主要介紹了AJAX實(shí)現(xiàn)JSON與XML數(shù)據(jù)交換方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

1、JS中如何創(chuàng)建和訪問(wèn)JSON對(duì)象

（1）在javascript語(yǔ)言中怎么創(chuàng)建一個(gè)json對(duì)象，語(yǔ)法是什么？

"屬性名" : 屬性值,"屬性名" : 屬性值.........的格式！

注意：屬性值的數(shù)據(jù)類型隨意；可能是數(shù)字，可能是布爾類型，可能是字符串，可能是數(shù)組，也可能是一個(gè)json對(duì)象.....

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        // 先創(chuàng)建一個(gè)JSON對(duì)象
        var address = {
            "city" :"安徽",
            "street" : "城關(guān)鎮(zhèn)",
            "zipcode" : "123"
        }
        // 另一個(gè)JSON對(duì)象
        var user = {
            "usercode" : 111,
            "username" : "zhangsan",
            "sex" : true,
            "age" : 20,
            "aihao" : ["抽煙","喝酒","燙頭"],
            "addr" : address
        }
        // 上面就等價(jià)于
        var user = {
            "usercode" : 111,
            "username" : "zhangsan",
            "sex" : true,
            "age" : 20,
            "aihao" : ["抽煙","喝酒","燙頭"],
            "addr" :{
                "usercode" : 111,
                "username" : "zhangsan",
                "sex" : true,
                "age" : 20,
                "aihao" : ["抽煙","喝酒","燙頭"],
                "addr" : address}
        }
    </script>
</body>
</html>

（2）如何去訪問(wèn)json對(duì)象？主要有兩種方式：

第一種方式：使用 .屬性名的方式

第二種方式：使用 ["屬性名"] 的方式

   // 第一種方式
   console.log(address.city);
   console.log(user.addr.street);
   for (var i = 0;i<user.aihao.length;i++){
        console.log(user.aihao[i]);
   }
   // 第二種方式
   console.log(address["city"]);
   console.log(user["sex"]?"男":"女");

2、基于JSON的數(shù)據(jù)交換

（1）將JSON格式字符串轉(zhuǎn)換為JSON對(duì)象

我們知道從后端java程序中響應(yīng)回來(lái)的是字符串（json格式的字符串），那么你怎么把json格式的字符串轉(zhuǎn)換成json對(duì)象呢？主要有兩種方式：

JSON格式的字符串

var fromJavaServerJsonStr = "{"usercode" : 111, "age" : 20}";
// \是轉(zhuǎn)義字符的作用，防止與外面的雙引號(hào)沖突
var fromJavaServerJsonStr = "{\"usercode\" : 111, \"age\" : 20}";

第一種方式：使用eval函數(shù)

window.eval("var jsonobj1 = " + fromJavaServerJsonStr);
// 進(jìn)行訪問(wèn)
alert(jsonobj1.usercode); // 111

第二種方式：調(diào)用javascript語(yǔ)言中的內(nèi)置對(duì)象JSON的一個(gè)方法parse。

var jsonobj2 = JSON.parse(fromJavaServerJsonStr);
alert(jsonobj2.age); // 20

（2）基于JSON的數(shù)據(jù)交換

①對(duì)于后端，不在寫html的代碼，只負(fù)責(zé)把數(shù)據(jù)以JSON格式的字符串返回；后端變輕松了。

②對(duì)于前端，負(fù)責(zé)把接收到的JSON格式的字符串轉(zhuǎn)換成JSON對(duì)象，并完成拼串的操作；前端變復(fù)雜了。

③整體上，后端只會(huì)出現(xiàn)后端的代碼，前端只會(huì)出現(xiàn)前端的代碼，便于維護(hù)！

第一種方式：對(duì)于靜態(tài)的字符串

后端得到靜態(tài)的數(shù)據(jù)，不在拼接HTML程序（寫前端代碼），只負(fù)責(zé)把數(shù)據(jù)響應(yīng)回去，拼接成JSON格式的字符串

StringBuilder html = new StringBuilder();
html.append("<tr>");
html.append("<td>1</td>");
html.append("<td>王五</td>");
html.append("<td>20</td>");
html.append("<td>北京大興區(qū)</td>");
html.append("</tr>");
html.append("<tr>");
html.append("<td>2</td>");
html.append("<td>李四</td>");
html.append("<td>22</td>");
html.append("<td>北京海淀區(qū)</td>");
html.append("</tr>");
// --------------------------------------------修改為
// 將以上程序拼接HTML，換成拼接JSON格式的字符串。
String jsonStr = "[{\"name\":\"王五\",\"age\":20,\"addr\":\"北京大興區(qū)\"}, {\"name\":\"李四\",\"age\":22,\"addr\":\"北京海淀區(qū)\"}]";
// 響應(yīng)JSON格式的字符串給前端。
out.print(jsonStr);

前端不在直接拿后端拼好的字符串格式，而是拿到JSON格式的字符串進(jìn)行處理，在前端進(jìn)行拼串

document.getElementById("stutbody").innerHTML = this.responseText
// -----------------------------------修改為
// 將json格式的字符串轉(zhuǎn)換成json對(duì)象
var stuList = JSON.parse(this.responseText);
// 是一個(gè)數(shù)組，并且數(shù)組中有多個(gè)學(xué)生數(shù)據(jù)
var html = ""
for (var i = 0; i < stuList.length; i++) {
         var stu = stuList[i]
         html += "<tr>"
         html += "<td>"+(i+1)+"</td>"
         html += "<td>"+stu.name+"</td>"
         html += "<td>"+stu.age+"</td>"
         html += "<td>"+stu.addr+"</td>"
         html += "</tr>"
     }
document.getElementById("stutbody").innerHTML = html

第二種方式：連接數(shù)據(jù)庫(kù)動(dòng)態(tài)拼接JSON字符串

①創(chuàng)建數(shù)據(jù)庫(kù)表

②后端連接數(shù)據(jù)庫(kù)，拼接成JSON格式的字符串

package com.bjpowernode.javaweb.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
/**
 * @Author：朗朗乾坤
 * @Package：com.bjpowernode.javaweb.ajax
 * @Project：ajax
 * @name：AjaxRequest5Servlet
 * @Date：2022/12/6 17:13
 */
@WebServlet("/ajaxrequest5")
public class AjaxRequest5Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 響應(yīng)到瀏覽器
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        // 用于拼接成JSON的字符串
        StringBuffer json = new StringBuffer();
        String jsonobj = "";
        // 連接數(shù)據(jù)庫(kù)
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        try {
            // 注冊(cè)驅(qū)動(dòng)
            Class.forName("com.mysql.jdbc.Driver");
            // 獲取連接
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC", "root", "123");
            // 獲取預(yù)編譯的數(shù)據(jù)庫(kù)操作對(duì)象
            String sql = "select name,age,addr from t_student ";
            ps = conn.prepareStatement(sql);
            // 執(zhí)行sql
            rs = ps.executeQuery();
            // 處理查詢結(jié)果集
            json.append("[");
            while (rs.next()) { // 每循環(huán)一次，就拼接一次
                String name = rs.getString("name");
                String age = rs.getString("age");
                String addr = rs.getString("addr");
                // 拼成JSON格式的字符串對(duì)象，每次循環(huán)拼接的格式如下
                // {"name":" 王五 ","age": 20 ,"addr":" 北京大興區(qū) "},
                json.append(" {\"name\":\"");
                json.append(name);
                json.append("\",\"age\":");
                json.append(age);
                json.append(",\"addr\":\"");
                json.append(addr);
                json.append("\"},");
            }
            // 上面這樣拼接，最后一個(gè)JSON格式的對(duì)象會(huì)多一個(gè)逗號(hào)，所以進(jìn)行截串
            jsonobj = json.substring(0,json.length()-1) + "]";
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            // 釋放資源
            if (rs != null) {
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (ps != null) {
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (conn != null) {
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        // 響應(yīng)JSON格式的字符串給前端
        out.print(jsonobj);
    }
}

③前端對(duì)JSON格式的字符串進(jìn)行處理，然后拼串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>發(fā)送AJAX請(qǐng)求，顯示學(xué)生列表</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
            document.getElementById("btn").onclick = function () {
                // 1.創(chuàng)建核心對(duì)象
                var xhr = new XMLHttpRequest();
                // 2.注冊(cè)回調(diào)函數(shù)
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            //document.getElementById("mybody").innerHTML = this.responseText
                            // 將json格式的字符串轉(zhuǎn)換成json對(duì)象
                            var stuList = JSON.parse(this.responseText)
                            // 是一個(gè)數(shù)組，并且數(shù)組中有多個(gè)學(xué)生數(shù)據(jù)
                            var html = ""
                            for (var i = 0; i < stuList.length; i++) {
                                var stu = stuList[i]
                                html += "<tr>"
                                html += "<td>"+(i+1)+"</td>"
                                html += "<td>"+stu.name+"</td>"
                                html += "<td>"+stu.age+"</td>"
                                html += "<td>"+stu.addr+"</td>"
                                html += "</tr>"
                            }
                            document.getElementById("mybody").innerHTML = html
                        } else {
                            alert(this.status)
                        }
                    }
                }
                // 3.開(kāi)啟通道
                xhr.open("GET", "/ajax/ajaxrequest5", true)
                // 4.發(fā)送請(qǐng)求
                xhr.send()
            }
        }
</script>
    <input type="button" value="顯示學(xué)員列表" id="btn">
    <table border="1px" width="50%">
        <tr>
            <th>序號(hào)</th>
            <th>姓名</th>
            <th>年齡</th>
            <th>住址</th>
        </tr>
        <!--具體的內(nèi)容需要連接數(shù)據(jù)庫(kù)動(dòng)態(tài)獲取，為了便于操作，寫一個(gè)tbody-->
        <tbody id="mybody">
            <!--具體內(nèi)容響應(yīng)在這里-->
        </tbody>
    </table>
</body>
</html>

④效果展示，點(diǎn)擊按鈕

（3）fastjson組件優(yōu)化代碼

從上面代碼來(lái)看，拼接JSON格式的字符串太痛苦，可以使用阿里巴巴的fastjson組件，它可以將java對(duì)象轉(zhuǎn)換成json格式的字符串

??測(cè)試通過(guò)fastjson對(duì)象轉(zhuǎn)換為JSON格式字符串

①引入jar包，并在項(xiàng)目依賴中也要引入

②創(chuàng)建一個(gè)User類

package com.bjpowernode.javaweb.fastjson;
public class User {
    private String id;
    private String username;
    private int age;
    public User() {
    }
    public User(String id, String username, int age) {
        this.id = id;
        this.username = username;
        this.age = age;
    }
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
}

③進(jìn)行測(cè)試；JSON類中的方法都是靜態(tài)的方法，直接調(diào)用即可

package com.bjpowernode.javaweb.fastjson;
import com.alibaba.fastjson.JSON;
import java.util.ArrayList;
import java.util.List;
public class FastjsonTest {
    public static void main(String[] args) {
        // 創(chuàng)建一個(gè)User類型的對(duì)象
        User user1 = new User("111", "zhangsan", 20);
        // 將以上的User對(duì)象轉(zhuǎn)換成json格式的字符串
        // JSON類中的方法都是靜態(tài)的方法，直接調(diào)用即可。
        String jsonSTr = JSON.toJSONString(user1);
        System.out.println(jsonSTr);
        // 在創(chuàng)建一個(gè)對(duì)象，放入集合當(dāng)中，看會(huì)不會(huì)轉(zhuǎn)換成JSON格式的數(shù)組
        User user2 = new User("222", "lisi", 20);
        // 創(chuàng)建一個(gè)集合
        ArrayList<User> userList = new ArrayList<>();
        // 把數(shù)據(jù)添加進(jìn)去
        userList.add(user1);
        userList.add(user2);
        // 轉(zhuǎn)換成JSON對(duì)象的數(shù)組
        String jsonStr2 = JSON.toJSONString(userList);
        System.out.println(jsonStr2);
    }
}

④測(cè)試結(jié)果如下

??通過(guò)fastjson組件替換手動(dòng)拼串成JSON格式的對(duì)象

思考：我們從數(shù)據(jù)庫(kù)中取出來(lái)的數(shù)據(jù)都是零散的，所以我們每次取到的數(shù)據(jù)封裝成一個(gè)Student對(duì)象，然后在把這個(gè)對(duì)象放入一個(gè)集合當(dāng)中；最終把通過(guò)這個(gè)集合調(diào)用JSON.toJSONString方法，把數(shù)據(jù)轉(zhuǎn)換成JSON格式的對(duì)象！

①Student類

package com.bjpowernode.javaweb.bean;
public class Student {
    private String name;
    private int age;
    private String addr;
    public Student() {
    }
    public Student(String name, int age, String addr) {
        this.name = name;
        this.age = age;
        this.addr = addr;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    public String getAddr() {
        return addr;
    }
    public void setAddr(String addr) {
        this.addr = addr;
    }
}

②后端代碼進(jìn)行優(yōu)化

package com.bjpowernode.javaweb.ajax;
import com.alibaba.fastjson.JSON;
import com.bjpowernode.javaweb.bean.Student;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
/**
 * @Author：朗朗乾坤
 * @Package：com.bjpowernode.javaweb.ajax
 * @Project：ajax
 * @name：AjaxRequest5Servlet
 * @Date：2022/12/6 17:13
 */
@WebServlet("/ajaxrequest5")
public class AjaxRequest5Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 響應(yīng)到瀏覽器
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        // 用于拼接成JSON的字符串
        // StringBuffer json = new StringBuffer();
        String jsonobj = "";
        // 連接數(shù)據(jù)庫(kù)
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        try {
            // 注冊(cè)驅(qū)動(dòng)
            Class.forName("com.mysql.jdbc.Driver");
            // 獲取連接
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC", "root", "123");
            // 獲取預(yù)編譯的數(shù)據(jù)庫(kù)操作對(duì)象
            String sql = "select name,age,addr from t_student ";
            ps = conn.prepareStatement(sql);
            // 執(zhí)行sql
            rs = ps.executeQuery();
            // 處理查詢結(jié)果集
            /*json.append("[");
            while (rs.next()) { // 每循環(huán)一次，就拼接一次
                String name = rs.getString("name");
                String age = rs.getString("age");
                String addr = rs.getString("addr");
                // 拼成JSON格式的字符串對(duì)象，每次循環(huán)拼接的格式如下
                // {"name":" 王五 ","age": 20 ,"addr":" 北京大興區(qū) "},
                json.append(" {\"name\":\"");
                json.append(name);
                json.append("\",\"age\":");
                json.append(age);
                json.append(",\"addr\":\"");
                json.append(addr);
                json.append("\"},");
            }
            // 上面這樣拼接，最后一個(gè)JSON格式的對(duì)象會(huì)多一個(gè)逗號(hào)，所以進(jìn)行截串
            jsonobj = json.substring(0,json.length()-1) + "]";*/
            // 創(chuàng)建一個(gè)集合
            List<Student> studentList = new ArrayList<>();
            while (rs.next()) {
                String name = rs.getString("name");
                int age = rs.getInt("age");
                String addr = rs.getString("addr");
                // 將以上數(shù)據(jù)封裝成Student對(duì)象
                Student s = new Student(name, age, addr);
                //  將Student對(duì)象放到List集合
                studentList.add(s);
            }
            // 將List集合轉(zhuǎn)換成json字符串
            jsonobj = JSON.toJSONString(studentList);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            // 釋放資源
            if (rs != null) {
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (ps != null) {
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (conn != null) {
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        // 響應(yīng)JSON格式的字符串給前端
        out.print(jsonobj);
    }
}

③前端代碼不變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>發(fā)送AJAX請(qǐng)求，顯示學(xué)生列表</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
            document.getElementById("btn").onclick = function () {
                // 1.創(chuàng)建核心對(duì)象
                var xhr = new XMLHttpRequest();
                // 2.注冊(cè)回調(diào)函數(shù)
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            //document.getElementById("mybody").innerHTML = this.responseText
                            // 將json格式的字符串轉(zhuǎn)換成json對(duì)象
                            var stuList = JSON.parse(this.responseText)
                            // 是一個(gè)數(shù)組，并且數(shù)組中有多個(gè)學(xué)生數(shù)據(jù)
                            var html = ""
                            for (var i = 0; i < stuList.length; i++) {
                                var stu = stuList[i]
                                html += "<tr>"
                                html += "<td>"+(i+1)+"</td>"
                                html += "<td>"+stu.name+"</td>"
                                html += "<td>"+stu.age+"</td>"
                                html += "<td>"+stu.addr+"</td>"
                                html += "</tr>"
                            }
                            document.getElementById("mybody").innerHTML = html
                        } else {
                            alert(this.status)
                        }
                    }
                }
                // 3.開(kāi)啟通道
                xhr.open("GET", "/ajax/ajaxrequest5", true)
                // 4.發(fā)送請(qǐng)求
                xhr.send()
            }
        }
</script>
    <input type="button" value="顯示學(xué)員列表" id="btn">
    <table border="1px" width="50%">
        <tr>
            <th>序號(hào)</th>
            <th>姓名</th>
            <th>年齡</th>
            <th>住址</th>
        </tr>
        <!--具體的內(nèi)容需要連接數(shù)據(jù)庫(kù)動(dòng)態(tài)獲取，為了便于操作，寫一個(gè)tbody-->
        <tbody id="mybody">
            <!--具體內(nèi)容響應(yīng)在這里-->
        </tbody>
    </table>
</body>
</html>

3、基于XML的數(shù)據(jù)交換

xml和JSON都是常用的數(shù)據(jù)交換格式

①XML體積大，解析麻煩；較少用。

②JSON體積小，解析簡(jiǎn)單；較常用。

（1）對(duì)于以下XML文件，進(jìn)行數(shù)據(jù)的交換

         <students>
            <student>
                <name>zhangsan</name>
                <age>20</age>
            </student>
            <student>
                <name>lisi</name>
                <age>22</age>
            </student>
        </students>

（2）后端代碼

注意：如果服務(wù)器端響應(yīng)XML的話，響應(yīng)的內(nèi)容類型需要寫成xml。不常用我們就不連接數(shù)據(jù)庫(kù)了！

response.setContentType("text/xml;charset=UTF-8");

package com.bjpowernode.javaweb.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
 * @Author：朗朗乾坤
 * @Package：com.bjpowernode.javaweb.ajax
 * @Project：ajax
 */
@WebServlet("/ajaxrequest6")
public class AjaxRequest6Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 設(shè)置響應(yīng)的類型是XML
        response.setContentType("text/xml;charset=UTF-8");
        PrintWriter out = response.getWriter();
        // 進(jìn)行拼串
        StringBuilder xml = new StringBuilder();
        xml.append("<students>");
        xml.append("<student>");
        xml.append("<name>zhangsan</name>");
        xml.append("<age>20</age>");
        xml.append("</student>");
        xml.append("<student>");
        xml.append("<name>lisi</name>");
        xml.append("<age>22</age>");
        xml.append("</student>");
        xml.append("</students>");
        // 響應(yīng)到給前端
        out.print(xml);
    }
}

（3）前端代碼

①使用responseXML方法接收對(duì)象，自動(dòng)封裝為文檔對(duì)象(xmlDoc)

②通過(guò)這個(gè)對(duì)象調(diào)用getElementsByTagName("student")方法，獲取所有<student>的標(biāo)簽，肯定是一個(gè)數(shù)組；然后遍歷數(shù)組，拿到每一個(gè)<student>的標(biāo)簽

③再調(diào)用childNodes方法，拿到<student>標(biāo)簽的所有子元素，也是是一個(gè)數(shù)組，需要再次遍歷，拿到每個(gè)子元素或者子節(jié)點(diǎn)node；然后子節(jié)點(diǎn)調(diào)用nodeName方法，看是不是name或者age屬性，如果是就調(diào)用子節(jié)點(diǎn)的textContent方法拿到對(duì)應(yīng)的數(shù)據(jù)，拼串拼進(jìn)去。

④最后把整個(gè)拼好的字符串扔到table里面進(jìn)行輸出！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用XML完成數(shù)據(jù)交換</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            // 1.創(chuàng)建XMLHTTPRequest對(duì)象
            var xhr = new XMLHttpRequest();
            // 2.注冊(cè)回調(diào)函數(shù)
            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        // 服務(wù)器端響應(yīng)了一個(gè)XML字符串，這里怎么接收呢？
                        // 使用XMLHTTPRequest對(duì)象的responseXML屬性，接收返回之后，可以自動(dòng)封裝成document對(duì)象（文檔對(duì)象）
                        var xmlDoc = this.responseXML
                        //console.log(xmlDoc)
                        // 獲取所有的<student>元素，返回了多個(gè)對(duì)象，應(yīng)該是數(shù)組。
                        var students = xmlDoc.getElementsByTagName("student")
                        //console.log(students[0].nodeName)
                        var html = "";
                        for (var i = 0; i < students.length; i++) {
                            var student = students[i]
                            // 獲取<student>元素下的所有子元素
                            html += "<tr>"
                            html += "<td>"+(i+1)+"</td>"
                            var nameOrAge = student.childNodes
                            for (var j = 0; j < nameOrAge.length; j++) {
                                var node = nameOrAge[j]
                                if (node.nodeName == "name"  || node.nodeName == "age") {
                                    //console.log("name = " + node.textContent)
                                    html += "<td>"+node.textContent+"</td>"
                                }
                                /*if (node.nodeName == "age") {
                                    //console.log("age = " + node.textContent)
                                    html += "<td>"+node.textContent+"</td>"
                                }*/
                            }
                            html += "</tr>"
                        }
                        document.getElementById("stutbody").innerHTML = html
                    }else{
                        alert(this.status)
                    }
                }
            }
            // 3.開(kāi)啟通道
            xhr.open("GET", "/ajax/ajaxrequest6?t=" + new Date().getTime(), true)
            // 4.發(fā)送請(qǐng)求
            xhr.send()
        }
    }
</script>
<button id="btn">顯示學(xué)生列表</button>
<table width="500px" border="1px">
    <thead>
    <tr>
        <th>序號(hào)</th>
        <th>姓名</th>
        <th>年齡</th>
    </tr>
    </thead>
    <tbody id="stutbody">
    </tr>
    </tbody>
</table>
</body>
</html>

（4）執(zhí)行效果如下：點(diǎn)擊按鈕，展示數(shù)據(jù)

到此這篇關(guān)于AJAX實(shí)現(xiàn)JSON與XML數(shù)據(jù)交換方法詳解的文章就介紹到這了,更多相關(guān)AJAX JSON與XML數(shù)據(jù)交換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: