ajax使用原生js获取xml数据

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">
        window.onload=function(){
        	//aNodes a节点  node英文  节点;（计算机网络的）节点;[医]结节;植物的节
            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){
                            	var result = request.responseXML;
                            	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 ="mailto" + email;
                                //aNode.href = website; 
                                //console.log(aNode);

                                var h2Node = document.createElement("h2");
                                h2Node.appendChild(aNode);
                                console.log(h2Node);

                                var aNode2 = document.createElement("a");
                                aNode2.appendChild(document.createTextNode(website));
                                aNode2.href = website; 
                                console.log(aNode2);
                                console.log("aNode2是"+aNode2); 

                                var detailsNode = document.getElementById("details");
                                detailsNode.innerHTML=""; 
                                detailsNode.appendChild(h2Node);
                                detailsNode.appendChild(aNode2); 

                            	                          	
                            }
                        }
                    }
                    return false;
                }
            }  
        }
    
    </script>
</head>
<body>

    <h1>网址导航</h1>
    <ul>
        <li><a href="a.xml">搜狐</a></li>
        <li><a href="b.xml">百度</a></li>
        <li><a href="c.xml">腾讯</a></li>
    </ul>
    <div id="details"></div>

    
    
</body>
</html>

a.xml

<?xml version="1.0" encoding="UTF-8"?>
<details>
    <name>搜狐</name>
    <website>http://www.sohu.com</website>
    <email>[email protected]</email>
</details>

b.xml

<?xml version="1.0" encoding="UTF-8"?>
<details>
    <name>百度</name>
    <website>https://www.baidu.com</website>
    <email>[email protected]</email>
</details>

c.xml

<?xml version="1.0" encoding="UTF-8"?>
<details>
    <name>腾讯</name>
    <website>http://www.qq.com</website>
    <email>[email protected]</email>
</details>

ajax使用原生js获取xml数据

猜你喜欢