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

作者: pengpeng 分类: 所有文章 发布时间: 2017-10-14 21:18

大家好,初学Ajax,今天给大家带来:原生JavaScript+Ajax无刷新加载另一个页面的一部分内容,代码都是自己纯手写的,由于学的比较零碎,如果有哪里写的不对的还望能够批评改正!

缺点:点击首页的时候不是ajax加载而是刷新了一下不知道是什么问题
主要页面:

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

实现功能:

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

  • javascript+Ajax

代码开始

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 class="content"></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无刷新加载另一个页面的一部分内容.rar (1.6 KB, 15 次)

此文为看点帅阿猪原创内容,特此声明

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注