您的位置：首页 > 理论基础 > 计算机网络

通过XMLHttpRequest对象实现Ajax跳转

2017-01-29 20:16 435 查看

1 网页编码

<body>
<a href="This Ajax.txt" >Hello Ajax!</a> <br>
</body>

2 JavaScript代码片断(类型1)

<script type="text/javascript">
window.onload = function(){
//1.获取a节点，并为其添加onclick响应函数
document.getElementsByTagName("a")[0].onclick = function(){
//3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备发送请求的数据(url)
var url = this.href + "?time=" + new Date();//+ "?time=" + new Date()这部分是加入时间戳
//类型1
var method = "GET";
//5.调用XMLHttpRequest对象的open方法
request.open(method,url);
//6.调用XMLHttpRequest对象的send方法
request.send(null);

//7.为XMLHttpRequest对象添加onreadystatechange函数
request.onreadystatechange = function(){
//8.判断响应是否完成:XMLHttpRequest对象的readyState属性值为4时
if(request.readyState==4){
//9.再判断响应是否可用:XMLHttpRequest对象的status属性值为200
if(request.status==200 || request.status==304){
//10.打印响应结果:responseText
alert(request.responseText);
}
}
};
//2.取消a节点的默认行为（表现为不跳转页面）
return false;
};
};

</script>3 JavaScript代码片断(类型2)

<script type="text/javascript">
window.onload = function(){
//1.获取a节点，并为其添加onclick响应函数
document.getElementsByTagName("a")[0].onclick = function(){
//3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备发送请求的数据(url)
var url = this.href + "?time=" + new Date();//+ "?time=" + new Date()这部分是加入时间戳

//类型2
var method = "POST";
//5.调用XMLHttpRequest对象的open方法
request.open(method,url);
request.setRequestHeader("ContentType", "application/x-www-form-urlencoded");
//6.调用XMLHttpRequest对象的send方法
request.send("Name='wsx'");

//7.为XMLHttpRequest对象添加onreadystatechange函数
request.onreadystatechange = function(){
//8.判断响应是否完成:XMLHttpRequest对象的readyState属性值为4时
if(request.readyState==4){
//9.再判断响应是否可用:XMLHttpRequest对象的status属性值为200
if(request.status==200 || request.status==304){
//10.打印响应结果:responseText
alert(request.responseText);
}
}
};
//2.取消a节点的默认行为（表现为不跳转页面）
return false;
};
};

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax javascript 开发

相关文章推荐

新的分享

章节导航