使用Ajax在HTML页面中局部刷新页面（左边菜单右边页面）

index.html

<a href="javascript:void(0);" οnclick="loadXMLDoc('member.html')">查看用户</a>

<div id="mainbody">欢迎登录！</div>

index.html中的Ajax代码

 

1 <script>
 2 function loadXMLDoc(url)
 3 {
 4   var xmlhttp;
 5   if (window.XMLHttpRequest)
 6   {
 7     //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
 8     xmlhttp=new XMLHttpRequest();
 9   }
10   else
11   {
12     // IE6, IE5 浏览器执行代码
13     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
14   }
15   xmlhttp.onreadystatechange=function()
16   {
17     if (xmlhttp.readyState==4 && xmlhttp.status==200)
18     {
19       document.getElementById("mainbody").innerHTML=xmlhttp.responseText;
20     }
21   }
22   xmlhttp.open("GET",url,true);
23   xmlhttp.send();
24 }
25 </script>

 

执行效果前的页面展示：

 

 

点击查看用户执行js后的页面：