通过XMLHttpRequest对象实现Ajax跳转

来源：互联网发布：中国老龄化数据编辑：程序博客网时间：2024/05/16 23:49

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>

0 0