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

转载自：https://blog.csdn.net/Cenmen_17714/article/details/80969008

index.html

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

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

index.html中的Ajax代码

 <script>
 function loadXMLDoc(url)
 {
   var xmlhttp;
   if (window.XMLHttpRequest)
   {
     //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
     xmlhttp=new XMLHttpRequest();
   }
   else
   {
     // IE6, IE5 浏览器执行代码
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function()
   {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
       document.getElementById("mainbody").innerHTML=xmlhttp.responseText;
     }
   }
   xmlhttp.open("GET",url,true);
   xmlhttp.send();
 }
 </script>

执行效果前的页面展示：

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