ajax数据格式XML

index1.html

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
    var anodes = document.getElementsByTagName("a");
    for(var i = 0; i<anodes.length; i++){
        anodes[i].onclick = function(){
            var request = new XMLHttpRequest();
            var method = "GET";
            var url = this.href;
            request.open(method,url);
            request.send(null);
            
            request.onreadystatechange = function(){
                if(request.readyState == 4){
                    if(request.status == 200||request.status == 304){
                        //1.结果为XML格式，所以需要使用responseXML来获取
                        var result = request.responseXML;
                        //结果不能直接用，必须先创建对应的节点，再把节点加到#details去；
                        var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
                        var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
                        var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
                        
                        //alert(name);
                        //alert(website);
                        //alert(email);
                        
                        var anode = document.createElement("a");
                        anode.appendChild(document.createTextNode(name));
                        anode.href = "taobao" + email;
                        
                        var h2node = document.createElement("h2");
                        h2node.appendChild(anode);
                        
                        var anode2 = document.createElement("a");
                        anode2.appendChild(document.createTextNode(website));
                        anode2.href = "taobao" + website;
                        
                        
                        var detailnode = document.getElementById("details");
                        detailnode.innerHTML="";
                        detailnode.appendChild(h2node);
                        detailnode.appendChild(anode2);
                        }
                }
            }
            
            return false;
        }
    }
}
</script>
</head>
<body>
<ul>
<li><a href="file/1.xml"> 购物网站 </a></li>
<li><a href="file/2.xml"> 学习网站 </a></li>
</ul>
<div id="details">

</div>
</body>
</html>

1.xml

<?xml version="1.0" encoding="UTF-8"?>
<details>
<name>Andy</name>
<website>https://www.taobao.com/</website>
<email>https://mail.163.com/</email>

</details>

2.xml

<?xml version="1.0" encoding="UTF-8"?>
<details>
<name>siri</name>
<website>https://www.w3school.com.cn/</website>
<email>https://mail.163.com/</email>

</details>

结果截图

相关推荐