2.Ajax_数据格式_HTML

最新推荐文章于 2023-06-23 22:48:17 发布

XSM521

最新推荐文章于 2023-06-23 22:48:17 发布

阅读量139

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/XSM521/article/details/107830904

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送，服务器端的编程语言只能以如下三种格式返回数据：

-------XML

-------HTML

-------JSON

在此将介绍HTML格式时的ajax的实现方法。

demo2:

<script type="text/javascript">
    window.onload = function () {
        var aNodes = document.getElementsByTagName("a");//获取所有a节点
        for(var i = 0;i < aNodes.length; i++){
            aNodes[i].onclick = function () {
                var request = new    XMLHttpRequest();
                var url = this.href;
                var method = "GET";
                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>

在<body></body>标签之间加入如下代码：

<body>
    <h1>People</h1>
    <ul>
        <li><a href="andy.html">Andy</a></li>
        <li><a href="richard.html">Richard</a> </li>
        <li><a href="jeremy.html">Jeremy</a></li>
    </ul>
    <div id="details"></div>
</body>

andy.html:(为例，其他的读者可仿照)

<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com</a>

预想效果是点击andy,Richard,Jeremy三个超链接，将在下方<div></div>出现所需要展示的信息

未点击状态：

点击之后状态：

XSM521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.Ajax_数据格式_HTML

从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送，服务器端的编程语言只能以如下三种格式返回数据：-------XML-------HTML-------JSON在此将介绍HTML格式时的ajax的实现方法。demo2:<script type="text/javascript"> window.onload = function () { var aNodes = document.getElementsByTagName("a
复制链接

扫一扫

专栏目录