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

最新推荐文章于 2022-08-11 10:47:44 发布

Cenmen_17714

最新推荐文章于 2022-08-11 10:47:44 发布

阅读量9.3k

点赞数 10

CC 4.0 BY-SA版权

文章标签： ajax 左边菜单右边页面 html 局部刷新

本文链接：https://blog.youkuaiyun.com/Cenmen_17714/article/details/80969008

本文介绍了一种使用Ajax技术动态加载网页内容的方法。通过点击链接触发JavaScript函数loadXMLDoc，该函数根据传入的URL参数获取指定文件内容并更新页面中的特定区域，实现了局部刷新的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html

<a href="javascript:void(0);" onclick="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>

执行效果前的页面展示：