使用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后的页面：