原生JavaScript+Ajax无刷新加载另一个页面的一部分内容

2017-10-15 12:43:19来源:CSDN作者:u012038147人点击

分享

大家好,初学Ajax,今天给大家带来:原生JavaScript+Ajax无刷新加载另一个页面的一部分内容,代码都是自己纯手写的,由于学的比较零碎,如果有哪里写的不对的还望能够批评改正!
原文链接:http://renpengpeng.com/716.html
缺点:点击首页的时候不是ajax加载而是刷新了一下不知道是什么问题

主要页面:

index.html   //首页页面message.html   //留言板页面about.html   //关于页面

实现功能
在index.html页面点击导航栏,无刷新加载另一个页面的主体部分到index.html
(我这里写死了,直接按照html使用的正则表达式匹配的标签,我没有更好的思路就只有这样写了,如果有其他思路欢迎指教谢谢)
代码开始
index.html

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title></title>    <style>    * {        padding:0;        margin:0;        border:0;    }    body {        font-family: "微软雅黑";    }    .title {        width:100%;        height:50px;        line-height:50px;        text-align:center;        background:#00f;        color:#fff;    }    .nav {        margin:0 auto;        margin-top:10px;        padding:10px;        width:500px;        height:30px;        border:1px solid #f00;    }    .nav a {        display:inline-block;        height:30px;        width:60px;        text-align:center;        line-height:30px;    }    .content {        margin:0 auto;        margin-top:10px;        height:500px;        width:500px;        padding:10px;        border:1px solid #000;    }    .content p {        color:#000;    }    </style></head><body>    <!--首页 -->    <div class="title">hello index.html</title>    <div class="nav">        <a href="index.html" class='menu'>首页</a>        <a href="message.html" class='menu'>留言板</a>        <a href="about.html" class='menu'>关于我</a></div>    <div class="content"><span id="content"><p>我是首页</p></span></div>    <script>    //获取所有的a标签并且声明给变量 men    var men = document.getElementsByTagName("a");    //遍历所有的a标签    for(i=1;i<men.length;i++){        //如果点击了a标签        men[i].onclick=function(){            //获取当前a标签的href值赋值给hr             var hr = this.href;            //开始ajax            var aja;            if(window.XMLHttpRequest){                aja = new XMLHttpRequest;            }else {                aja = new ActiveXObject("Microsoft XMLHTTP");            }            aja.onreadystatechange = function(){                if(aja.readyState == 4 && aja.status == 200){                    var txtc = aja.responseText;                    //正则表达式提取所获取页面html中的<div class='content'> - </div>中的内容                    var jq = txtc.match(/<div/sclass="content">[/s/S]*<//div>/);                    //因为本页面已经有<div></div>所以替换为空                    var th = jq[0].replace(/<div/sclass="content">/,'');                    th = th.replace("</div>",'');                    //更改本页面id为content中的html为所加载的html内容                    document.getElementById('content').innerHTML = th;                }            }            aja.open("get",hr,true);            aja.send();            return false;        }    }    </script></body></html>

message.html

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title></title></head><body>    <div class="title">留言板页面</div>    <div class="content"><p>hello message.html</p></div></body></html>

about.html

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title></title></head><body>    <div class="title">关于我们</div>    <div class="content"><p>hello about.html</p></div></body></html>

在线预览:点我预览
下载地址:原生JavaScript+Ajax无刷新加载另一个页面的一部分内容

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台