ajax数据格式HTML

做了个小例子。基本的XMLHttpRequest操作都有，只是从HTML传数据。

index.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)
                        {
                        document.getElementById("details").innerHTML =request.responseText;
                        }
                }
            }
            
            return false;
        }
    }
}
</script>
</head>
<body>
<ul>
<li><a href="file/1.html"> 购物网站 </a></li>
<li><a href="file/2.html"> 学习网站 </a></li>
<li><a href="file/3.html"> 视频网站 </a></li>
</ul>
<div id="details">

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

1.html

<h2><a href="https://www.taobao.com/">taobao</a></h2>
<a href="https://www.tmall.com/">tianmao</a>

2.html

<h2><a href="https://www.w3school.com.cn/">w3cschool</a></h2>
<a href="https://www.runoob.com/">runoob</a>

3.html

<h2><a href="https://www.bilibili.com/">bilibili</a></h2>

结果截图：

 

posted @ 2020-03-07 13:10  ziyuliu  阅读(411)  评论(0)  编辑  收藏  举报