2.Ajax_数据格式_HTML

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

-------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:[email protected]">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com</a>

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

未点击状态：

2.Ajax_数据格式_HTML

点击之后状态：

2.Ajax_数据格式_HTML