xmlRequest解析XML

最新推荐文章于 2024-07-28 11:33:46 发布

原创最新推荐文章于 2024-07-28 11:33:46 发布 · 906 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xmlhttprequest #function #button #xhtml #encoding #input

本文通过一个具体的示例介绍了如何使用JavaScript结合AJAX技术来解析XML文件，并根据不同条件筛选出所需的数据项。示例中展示了如何创建XMLHttpRequest对象，并通过GET请求获取外部XML文件的内容，然后根据按钮的选择来决定解析所有州名或仅北方州名。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script type='text/javascript'>
         var xhr; var typeName;
         //创建XMLHttpRequest对象
         function CreateXhR() {
             if (window.ActiveXObject) {
                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }
             else if (window.XMLHttpRequest) {
                 xhr = new XMLHttpRequest();
             }
             return xhr;
         }
         //按钮处罚的事件
         function startRequest(tName) {
             typeName = tName;
             CreateXhR();
             xhr.onreadystatechange = callbackFun;//设置回调函数
             xhr.Open("GET", "ParseXML.xml");
             xhr.Send(null);
         }
         function callbackFun() {
             if (xhr.readyState == 4) {//xmlHttpRequset对象的状态码,4代表完整的响应
                 if (xhr.status == 200) {//http状态码,200代表成功
                     var xmlDoc = xhr.responseXML;
                     if (typeName == "all") {
                         var nodes = xmlDoc.getElementsByTagName("state");
                         for (var i = 0; i < nodes.length; i++) {
                             alert(nodes[i].childNodes[0].nodeValue);
                         }
                     }
                     else if (typeName == "north") {
                         var northNodes = xmlDoc.getElementsByTagName("north");
                         for (var i = 0; i < northNodes.length; i++) {
                             var nodes = northNodes[i].getElementsByTagName("state");
                             for (var j = 0; j < nodes.length; j++) {
                                 alert(nodes[j].childNodes[0].nodeValue);
                             }
                         }
                     }
                 }
             }
         }
 </script>

</head>
<body>
 <input type='button' value='all' onclick="startRequest('all')" />
 <input type='button' value='north' onclick="startRequest('north')" />
</body>
</html>

<?xml version="1.0" encoding="UTF-8" ?>
<states>
    <north>
        <state>Minnesota</state>
        <state>Lowa</state>
        <state>North Dakota</state>
    </north>
    <south>
        <state>Texas</state>
        <state>Oklahoma</state>
        <state>Louisiana</state>
    </south>
    <east>
        <state>New york</state>
        <state>North Carolina</state>
        <state>Massachusetts</state>
    </east>
    <west>
        <state>California</state>
        <state>Oregon</state>
        <state>Nevada</state>
    </west>
    <north>
        <state>Minnesota2</state>
        <state>Lowa2</state>
        <state>North Dakota2</state>
    </north>
</states>