AJAX XML的数据传输

最新推荐文章于 2023-09-25 10:13:02 发布

忆亦何为

最新推荐文章于 2023-09-25 10:13:02 发布

阅读量589

点赞数 1

文章标签： ajax xml servlet

本文链接：https://blog.csdn.net/weixin_45832694/article/details/127326143

版权

在AJAX JSON的基础之上，改造成XML的数据传输
1.需要后端改响应类型
response.setContentType(“text/html;charset=UTF-8”);
改成response.setContentType(“text/xml;charset=UTF-8”);
2.后端拼接XML字符串
3.前端接收XML并解析

后端代码

@WebServlet("/ajaxdeptxml")
public class AjaxDeptXMLServlet 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 conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        StringBuffer xml = new StringBuffer();
        String xmlstr = "";
        try {
            conn = DButil.getConnection();
            String sql = "select * from t_dept";
            ps = conn.prepareStatement(sql);
            rs = ps.executeQuery();
            xml.append("<depts>");
            while (rs.next()){
                xml.append("<dept>");
                xml.append("<deptno>" + rs.getInt("deptno") + "</deptno>");
                xml.append("<dname>" + rs.getString("dname") + "</dname>");
                xml.append("<loc>" + rs.getString("loc") + "</loc>");
                xml.append("</dept>");
            }
            xml.append("</depts>");
            xmlstr = xml.substring(0, xml.length());
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DButil.close(conn,ps,rs);
        }
        out.print(xmlstr);
    }
}

html解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax dept xml</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function (){
        document.getElementById("btn").onclick = function (){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var xml = this.responseXML;
                        var xmlstu = ""
                        var depts = xml.getElementsByTagName("dept")//获取<dept>元素，返回多个对象
                        for (let i = 0; i < depts.length; i++) {
                            var dept = depts[i]//获取depts下的所有子节点
                            var value = dept.childNodes//获取dept子节点下所有元素
                            xmlstu += "<tr>"
                            for (var j = 0; j < value.length; j++) {
                                var node = value[j];
                                if (node.nodeName == "deptno") {
                                    xmlstu += "<td>" + node.textContent + "</td>"
                                }
                                if (node.nodeName == "dname") {
                                    xmlstu += "<td>" + node.textContent + "</td>"
                                }
                                if (node.nodeName == "loc") {
                                    xmlstu += "<td>" + node.textContent + "</td>"
                                }
                            }
                            xmlstu += "</tr>"
                        }
                        document.getElementById("deptbody").innerHTML = xmlstu
                    }else{
                        alert(xhr.status)
                    }
                }
            }
            xhr.open("GET","/ajax_dept/ajaxdeptxml",true)
            xhr.send()
        }
    }
</script>
<button id="btn">显示部门列表</button>
<table width="50%" border="1px">
    <thead>
        <tr>
            <th>部门编号</th>
            <th>部门名称</th>
            <th>部门位置</th>
        </tr>
    </thead>
    <tbody id="deptbody">

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

结果
请添加图片描述
xml和JSON都是常用的数据交换格式

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

忆亦何为

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX XML的数据传输

改成response.setContentType(“text/xml;xml和JSON都是常用的数据交换格式。的基础之上，改造成XML的数据传输。2.后端拼接XML字符串。3.前端接收XML并解析。1.需要后端改响应类型。
复制链接

扫一扫