zoukankan html css js c++ java

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>

结果截图

Jquery形式：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
    $("a").click(function(){
        var url=this.href;
        var args= {"time":new Date()};
        $.get(url,args,function(data){
            var name = $(data).find("name").text();
            var website = $(data).find("website").text();
            var email = $(data).find("email").text();
            
            $("#details").empty()
            .append("<h2><a href='"+ website +"'>"+ name +"</a></h2>")
            .append("<a href='"+ email +"'>"+ email +"</a>")
        })
        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>

查看全文

相关阅读:
android 访问SD卡的方法
 android 用Achartengine 作图
 hello
IIS 7.0 "确认文件是否存在"功能
 test
收藏:如何在Web页面上直接打开、编辑、创建Office文档
 JavaScript面向对象技术
 正则表达式30分钟入门教程
 JWT有状态登陆与无状态登陆
 20条JavaScript代码简洁的写法

原文地址：https://www.cnblogs.com/a155-/p/12450358.html