基于ajax技术跳转,特点:不刷新本页面,在指定位置显示跳转页面的内容
基于js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function ajax() {
//获取标签
var a = document.getElementById("ss");
//给标签添加事件
a.onclick = function() {
//创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
var method = "DET";
var url = "../doctest.html";//即为id为ss的a标签的链接,即也可以为"ajax01.html"
//向服务器发送请求
//open:
request.open(method, url);
//send:
request.send(null);
//处理函数由服务器触发
request.onreadystatechange = function() {
/* 0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪 */
//200:状态ok
alert(request.readyState);
alert(request.status);
if (request.readyState == 4 && request.status == 200) {
alert(request.responseText);
//将id为p1的标签赋值
document.getElementById("p1").innerHTML = request.responseText;
}
};
return false;//取消a标签的默认行为
};
}
</script>
</head>
<body onload = "ajax()"><!--网页加载完成之后再次加载此方法 -->
This is my HTML page01.
<br>
<a href="ajax01.html" id="ss" >跳转</a>
<p id = "p1"></p>
</body>
</html>
基于jquery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajaxJquery.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src = "../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
$("#div1").load(this.href);
return false;
});
});
</script>
</head>
<body>
<a href="ajax01.html">跳转</a>
<div id = "div1"></div>
</body>
</html>