AJAX基于XML的数据交换格式-摩杜云开发者社区

- 注意：如果服务器端响应XML的话，响应的内容类型需要写成：

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

1.1 xml和JSON都是常用的数据交换格式 19

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

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

代码在com.bjpoernode.ajax.servlet

AjaxRequest6Servlet

package com.bjpoernode.ajax.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

//使用XML完成数据交换  19
@WebServlet("/ajaxrequest6")
public class AjaxRequest6Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //注意响应的内容类型是xml
        response.setContentType("text/xml;charset=UTF-8");
        PrintWriter out = response.getWriter();

        /*
        
            
                zhangsan
                20
            
            
                lisi
                22
            
        
         */
        //这里我们就不连shujukule，直接写死
        StringBuilder xml = new StringBuilder();
        xml.append("");
        xml.append("");
        xml.append("zhangsan");
        xml.append("20");
        xml.append("");
        xml.append("");
        xml.append("lisi");
        xml.append("22");
        xml.append("");
        xml.append("");

        out.print(xml);
    }
}

E:\java学习\Ajax\course\course5\web

ajax7.html

<!--使用XML完成数据交换  19-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用XML完成数据交换</title>
</head>
<body>

<script type="text/javascript">
    window.onload = function (){
        document.getElementById("btn").onclick = function (){
            //创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            //注册回调函数
            xhr.onreadystatechange = function (){
                if(this.readyState==4){
                    if (this.status==200){
                        //服务器端响应了一个xml字符串，这里接收
                        // 使用XMLHTTPRequest对象的responseXML属性，接收返回之后，可以
                        // 自动封装成document对象（文档对象）
                        var xmlDoc = this.responseXML;
                        //console.log(xmlDoc)
                        //获取所有的<student>元素，返回对各对象，应该是数组
                        var students = xmlDoc.getElementsByTagName("student");
                        //console.log(students[0].nodeName)
                        var html = ""//拼串时用
                        //循环遍历students数组
                        for(var i = 0;i<students.length;i++){
                            //得到每个元素
                            var student = students[i]
                            html += "<tr>"
                            html += "<td>"+(i+1)+"</td>"
                            //获取<student>元素的所有子元素，这个nameOrAge也是个数组
                            // （因为有name和age元素）
                            var nameOrAge = student.childNodes;
                            //遍历nameOrAge数组
                            for (var j = 0; j < nameOrAge.length; j++) {
                                //取到的节点名字可能是name也可能是age所以判断
                                var node = nameOrAge[j];
                                if(node.nodeName=="name"){
                                    //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)
                    }
                }
            }
            //开启通道
            xhr.open("GET","/ajax/ajaxrequest6?t="+new Date().getTime(),true)
            //发送请求
            xhr.send()
        }
    }
</script>

<button id="btn">显示学生列表</button>
<table width="500px" border="1px">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="stutbody">
   <!-- <tr>
        <th>1</th>
        <th>zhangsan</th>
        <th>20</th>
    </tr>
    <tr>
        <th>2</th>
        <th>lisi</th>
        <th>22</th>
    </tr>-->
    </tbody>
</table>
</body>
</html>