ajax解析xml并显示

phoebird

浏览: 117700 次
性别:
来自: 重庆

最近访客更多访客>>

maoweiwer

balancircle

a1012827688

fcr1209973

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

XML Ajax Microsoft JSP XHTML

以下分别为：parseXML.xml ,parseXML.jsp
<?xml version="1.0" encoding="UTF-8"?>
<states>
    <north>
        <state>北京</state>
        <state>天津</state>
        <state>大连</state>
    </north>
    <south>
        <state>四川</state>
        <state>湖北</state>
        <state>广东</state>
    </south>
    <east>
        <state>上海</state>
        <state>徐州</state>
        <state>青岛</state>
    </east>
    <west>
        <state>西藏</state>
        <state>新疆</state>
        <state>甘肃</state>
    </west>
</states>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax 解析xml数据</title>

<script type="text/javascript">
var xmlHttp;
var requestType = "";   //全局变量

function createXMLHttpRequest() { //创建xmlHttp核心对象
    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 == 200) {
            if(requestType == "north") {
                listNorthStates();
            }
            else if(requestType == "all") {
                listAllStates();
            }
        }
    }
}

function listNorthStates() {
    var xmlDoc = xmlHttp.responseXML;//以XML形式接收
    var northNode = xmlDoc.getElementsByTagName("north")[0];

    var northStates = northNode.getElementsByTagName("state");

    outputList("北方城市", northStates);
}

function listAllStates() {
    var xmlDoc = xmlHttp.responseXML;//以XML形式接收
    var allStates = xmlDoc.getElementsByTagName("state");

    outputList("所有城市", allStates);
}

function outputList(title, states) {
    var out = title;
    var currentState = null;
    for(var i = 0; i < states.length; i++) {
        currentState = states[i];
        out = out + "\n- " + currentState.childNodes[0].nodeValue;
    }
     // document.getElementById("show").innerHTML=xmlHttp.responseText;
    alert(out);
}
</script>
</head>

<body>
    <h1> 城市列表</h1>
    <br/><br/>
    <form action="#">
        <input type="button" value="查看所有" onclick="startRequest('all');"/>
        <br/><br/>
        <input type="button" value="查看北部地区的数据" onclick="startRequest('north');"/>
        <div id="show"></div>
    </form>
</body>
</html>