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