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>
