html 调用xml 类似 ajax

最新推荐文章于 2023-06-01 14:59:55 发布

原创最新推荐文章于 2023-06-01 14:59:55 发布 · 515 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #xml #function #xmlhttprequest #button #input

本文介绍了一种使用JavaScript和W3C DOM解析XML响应的方法，通过具体实例展示了如何根据请求类型筛选并列出XML文件中的特定节点信息。

<!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>Parsing XML Responses with the W3C DOM</title>
<script type="text/javascript">
var xmlHttp;
var requestType = "";

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}

function startRequest(requestedList) {
    requestType = requestedList;

    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "parseXML.xml", true);
    xmlHttp.send(null);
}

function handleStateChange() {

    if(xmlHttp.readyState == 4) {

        if(xmlHttp.status == 0) {

            if(requestType == "north") {
                listNorthStates();
            }
            else if(requestType == "all") {
                listAllStates();
            }
        }
    }
}

function listNorthStates() {
    var xmlDoc = xmlHttp.responseXML;

    var northNode = xmlDoc.getElementsByTagName("north")[0];

    var out = "Northern States";
    var northStates = northNode.getElementsByTagName("state");

    outputList("Northern States", northStates);
}

function listAllStates() {
    var xmlDoc = xmlHttp.responseXml;

    var allStates = xmlDoc.getElementsByTagName("state");

    outputList("All States in Document", allStates);
}

function outputList(title, states) {
    var out = title;
    var currentState = null;
    for(var i = 0; i < states.length; i++) {
        currentState = states[i];
        out = out + " - " + currentState.childNodes[0].nodeValue;
    }

    alert(out);
}
</script>
</head>

<body>
    <h1>Process XML Document of U.S. States</h1>
    <br/><br/>
    <form action="#">
        <input type="button" value="View All Listed States" onclick="startRequest('all');"/>
        <br/><br/>
        <input type="button" value="View All Listed Northern States" onclick="startRequest('north');"/>
    </form>
</body>
</html>