526互联

AJAX004——基于XML的数据交换

发布时间 2023-10-03 07:16:11作者: 猪无名

基于XML的数据交换

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

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

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

    • XML体积大，解析麻烦。较少用。
    • JSON体积小，解析简单，较常用。

  • 基于XML的数据交换，前端代码：

    <!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(){
            //发送Ajax请求。
            //1，创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            //2，开启通道
            xhr.open("GET","/ajax001/ajaxservlet010?t="+new Date().getTime(),true);
            //3，发送请求
            xhr.send();
            //4，监听数据
            xhr.onreadystatechange=function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        //获取服务器端响应的xml字符串
                        //使用XML解析器解析xml字符串，可以自动封装成document对象
                        var xmlDoc = this.responseXML;
                        var stus = xmlDoc.getElementsByTagName("stu");
                        var html = "";
                        for (var i = 0; i < stus.length ; i++) {
                            html +="<tr>";
                            var stu = stus[i];
                            var childNodes = stu.childNodes;
                            for (var j = 0; j < childNodes.length ; j++) {
                               var node = childNodes[j];
                               html +="<td>"+node.textContent+"</td>";
                            }
                            html +="</tr>";
                        }
                        document.getElementById("stutbody").innerHTML = html;
                    }else{
                        alert(xhr.status);
                    }
                }
            }
        }
    }
</script>


<button id="btn">
    显示学生列表
</button>

<table width="500px" border="1px">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
    <tr>
    </thead>
    <tbody id="stutbody" align="center">

    </tbody>
</table>
</body>
</html>

  • 基于XML的数据交换，后端java程序：

    package com.zwm.ajax.web;

import com.alibaba.fastjson.JSON;
import com.zwm.ajax.pojo.User;
import com.zwm.ajax.utils.DBUtil;
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;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/ajaxservlet010")
public class ajaxservlet010 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/xml;charset=utf-8");
        PrintWriter out = response.getWriter();


        Connection connection = null;
        PreparedStatement  preparedStatement = null;
        ResultSet resultSet = null;

        try {
            connection = DBUtil.getConnection();
            String sql = "select * from stu";
            preparedStatement = connection.prepareStatement(sql);
            resultSet = preparedStatement.executeQuery();

            StringBuilder xml = new StringBuilder();
            xml.append("<stus>");
            while (resultSet.next()){
                int id = resultSet.getInt("id");
                String username = resultSet.getString("username");
                int age = resultSet.getInt("age");
                String address = resultSet.getString("address");
                xml.append("<stu>");
                xml.append("<id>"+id+"</id>");
                xml.append("<username>"+username+"</username>");
                xml.append("<age>"+age+"</age>");
                xml.append("<address>"+address+"</address>");
                xml.append("</stu>");
            }
            xml.append("</stus>");
            out.print(xml);
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(connection,preparedStatement,resultSet);
        }
    }
}