ajax与HTML

来源：互联网发布：手机报表软件编辑：程序博客网时间：2024/04/17 03:21

index.html：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            ul {                font-size: 16pt;            }        </style>        <script type="text/javascript">            function loadData(txt) {                var request = new XMLHttpRequest();                var method = "GET";                var url = txt + ".html";                request.open(method, url);                request.send(null);                request.onreadystatechange = function() {                    if(request.readyState == 4) {                        if(request.status == 200 || request == 304) {                            //返回的直接是html代码，直接嵌入到元素中就可以了                            document.getElementById("detail").innerHTML = request.responseText;                        }                    }                }            }        </script>    </head>    <body>        <p>点击对应会显示详细信息,ajax请求服务器上的数据，将详细信息显示在下方</p>        <ul>            <li>                <a onclick="loadData('AAA')">AAA</a>            </li>            <li>                <a onclick="loadData('BBB')">BBB</a>            </li>            <li>                <a onclick="loadData('CCC')">CCC</a>            </li>        </ul>        <div id="detail"></div>    </body></html>

AAA.html:

<h2>AAA</h2><p>email:AAA@gmail.com</p>

BBB.html:

<h2>BBB</h2><p>email:BBB@gmail.com</p>

CCC.html:

<h2>BBB</h2><p>email:BBB@gmail.com</p>

0 0