AJAX--基于json格式和xml格式的数据交换

洛小依ovo / 2023-07-30 / 原文

json和xml都是常用的数据交换格式

XML体积大，解析麻烦，比较少用

JSON体积小，解析简单，比较常用

一、json格式

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取信息列表</title>
</head>
<body>
    
    <script>
        window.onload = function(){
            document.getElementById("btn").onclick = function(){
                var xhr = new XMLHttpRequest()
                xhr.onreadystatechange = function(){
                    if(this.readyState == 4){
                        if (this.status == 200) {
                            // document.getElementById("stutbody").innerHTML = this.responseText
                            // 将json格式的字符串转换成json对象
                            var stuList = JSON.parse(this.responseText)
                            var html = ""
                            for (let i = 0; i < stuList.length; i++) {
                                const stu = stuList[i];
                                html += "<tr>"
                                html += "    <td>"+stu.name+"</td>"
                                html += "    <td>"+stu.age+"</td>"
                                html += "    <td>"+stu.address+"</td>"
                                html += "</tr>"
                            }
                            document.getElementById("stutbody").innerHTML = html
                        }else{
                            alert(this.status)
                        }
                    }
                }
                xhr.open("GET","/URL?t="+Math.random(),true)
                xhr.send()
            }
        }
    </script>

    <input type="button" value="显示信息" id="btn">
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>住址</th>
        </tr>
        <tbody id="stutbody">
            <!-- <tr>
                <td>zhangsan</td>
                <td>20</td>
                <td>sh</td>
            </tr> -->
        </tbody>
    </table>

</body>
</html>

后端代码

// 后端代码
声明HttpServletResponse
// 连接数据库
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
// 循环数据
out.print();

// 把数据给前端，然后把页面展示让前端展示
// 可以采用json格式或者xml格式
<!-- String jsonstr = "[{
    \"name\":\"zhangsan\",
    \"age\":20,
    \"address\":\"shan\"
},{
    \"name\":\"zhangsan\",
    \"age\":20,
    \"address\":\"shan\"
}]"; -->
// 动态拼接json字符串
StringBuilder json = new StringBuilder();
json.append("[");
json.append("{\"name\":\"");
json.append(name);
json.append("\",\"age\":");
json.append(age);
json.append(",\"address\":\"");
json.append(address);
json.append("\"},");
json.substring(0,json.length()-1+"]");

out.print(jsonstr)

二、xml格式

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>post请求 xml数据格式</title>
</head>
<body>

    <script>
        window.onload = function(){
            document.getElementById("btn").onclick = function(){
                var xhr = new XMLHttpRequest()
                xhr.onreadystatechange = function(){
                    if(this.readyState == 4){
                        if (this.status == 200) {
                            // 服务器响应一个xml字符串
                            var xmlDoc = this.responseXML
                            // 获取所有的student元素，返回的是一个数组
                            var students = xmlDoc.getElementsByTagName("student")
                            var html = ""
                            for (let i = 0; i < students.length; i++) {
                                const student = students[i];
                                html += "<tr>"
                                html += "<td>"+(i+1)+"</td>"
                                // 获取<student>元素下的所有子元素
                                var nameOrAge = student.childNodes
                                for (let j = 0; j < nameOrAge.length; j++) {
                                    const node = nameOrAge[j];
                                    if(node.nodeName == "name"){
                                        // node.textContent
                                        html += "<td>"+node.textContent+"</td>"

                                    }
                                    if(node.nodeName == "age"){
                                        // node.textContent
                                        html += "<td>"+node.textContent+"</td>"
                                    }
                                }
                                html += "</tr>"
                                
                            }
                            document.getElementById("stutbody").innerHTML = html
                        }else{
                            alert(this.status)
                        }
                    }
                }
                xhr.open("GET","/URL?t="+Math.random(),true)
                xhr.send()
            }
        }
    </script>

    <input type="button" value="显示学生信息" id="btn">
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tbody id="stutbody">
            <!-- <tr>
                <td>zhangsan</td>
                <td>20</td>
            </tr> -->
        </tbody>
    </table>
</body>
</html>

后端代码

// xml格式后端代码
/*
    <students>
        <student>
            <name>zhanghsan</name>
            <age>20</age>
        </student>
        <student>
            <name>lisia</name>
            <age>21</age>
        </student>
    </students>
*/
注意使用xml格式这里需要写xml
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();

// 动态拼接xml字符串
StringBuilder xml = new StringBuilder();
xml.append("[");
xml.append("{\"name\":\"");
xml.append(name);
xml.append("\",\"age\":");
xml.append(age);
xml.append("\"},");
xml.substring(0,xml.length()-1+"]");
out.print(xml);