JavaScript-ajax请求xml数据

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>

JavaScript-ajax请求xml数据

猜你喜欢