JavaScript-ajax请求xml数据

最新推荐文章于 2025-07-10 13:44:21 发布

原创最新推荐文章于 2025-07-10 13:44:21 发布 · 3.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xml #javascript #异步请求

前端与前端框架专栏收录该内容

8 篇文章

订阅专栏

这篇博客详细介绍了如何利用JavaScript的AJAX技术来发送异步请求并处理XML响应数据。通过HTML部分的示例代码，展示了XML数据在AJAX请求中的应用，帮助读者理解这一交互过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XML部分：

<?xml version="1.0" encoding="UTF-8" ?>
<students>
    <student>
        <name>wendy</name>
        <age>35</age>
        <addr>Santa Fe</addr>
    </student>
    <student>
        <name>Yaphet</name>
        <age>32</age>
        <addr>Balchik</addr>
    </student>
    <student>
        <name>Isaiah</name>
        <age>35</age>
        <addr>Caldera</addr>
    </student>
</students>

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Ajax获取XML信息</title>
    <script>
        function f1(){
            // 创建Ajax对象
            var obj = new XMLHttpRequest();
            // 感知Ajax状态

            obj.onreadystatechange = function(){
                if (obj.readyState == 4 && obj.status == 200) {
                    // 获取XMLDocument对象
                    var xmlobj = obj.responseXML;
                    // 获取xml对象的第一个元素结点students
                    var students = xmlobj.childNodes[0];
                    // 获取元素结点students下所有的student的结点
                    var student = students.getElementsByTagName('student');
                    // 遍历student结点,并获得具体信息
                    var info = "";
                    for (var i = 0; i < student.length; i++) {
                        var name = student[i].getElementsByTagName('name')[0].firstChild.nodeValue;
                        var addr = student[i].getElementsByTagName('addr')[0].firstChild.nodeValue;
                        var age = student[i].getElementsByTagName('age')[0].firstChild.nodeValue;
                        // 拼接输出信息字符串
                        info += "姓名：" + name + "，地址：" + addr + "，年龄：" + age + "<br />";
                    }
                    // 将字符串写入到id名称为result的div字符串中
                    document.getElementById('result').innerHTML = info;
                }
            }

            // 创建一个http请求，并设置“请求地址”
            obj.open("get", "./test.xml");
            //发送请求
            obj.send();
        }
    </script>
</head>
<body>
    <h2>Ajax获取XML信息</h2>
    <div id="result"></div>
    <input type="button" onclick="f1();" value="触发" />
</body>
</html>

原文地址：https://blog.youkuaiyun.com/qq_42195688/article/details/80372526