您的位置:阿里西西 > 前端技术 > 脚本技术 > 详细内容

JavaScript之Ajax同步

  本站整理   互联网   2015-08-03   点击:   我要评论
一.XMLHttpRequest
Ajax技术核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性,其他浏览器提供商后来都提供了相同的实现。在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架。
XHR的出现,提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息,这就意味着,用户只要触发某一事件,在不刷新网页的情况下,更新服务器最新的数据。
虽然Ajax中的x代表的是XML,但Ajax通信和数据格式无关,也就是说这种技术不一定使用XML。
 
IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象,在这些浏览器中创建XHR对象可以直接实例化XMLHttpRequest即可。
var xhr = new XMLHttpRequest();
alert(xhr); //XMLHttpRequest
 
如果是IE6及以下,那么我们必须还需要使用ActiveX对象通过MSXML库来实现。在低版本IE浏览器可能会遇到三种不同版本的XHR对象,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。我们可以编写一个函数。

  1. function createXHR() { 
  2. if (typeof XMLHttpRequest != 'undefined') { 
  3. return new XMLHttpRequest(); 
  4. else if  (typeof ActiveXObject != 'undefined') { 
  5. var versions = [ 
  6. 'MSXML2.XMLHttp.6.0'
  7. 'MSXML2.XMLHttp.3.0'
  8. 'MSXML2.XMLHttp' 
  9. ]; 
  10. for (var i = 0; i < versions.length; i ++) { 
  11. try { 
  12. return new ActiveXObject(version[i]); 
  13. catch (e) { 
  14. //跳过 
  15. }  
  16. else { 
  17. throw new Error('您的浏览器不支持XHR对象!'); 
  18.   
  19. var xhr = new createXHR(); 
 
在使用XHR对象时,先必须调用open()方法,它接受三个参数:要发送的请求类型(get、post)、请求的URL和表示是否异步。
xhr.open('get', 'demo.php', false); //对于demo.php的get请求,false同步
 
PS:demo.php的代码如下:
//一个时间
 
open()方法并不会真正发送请求,而只是启动一个请求以备发送。通过send()方法进行发送请求,send()方法接受一个参数,作为请求主体发送的数据。如果不需要则,必须填null。执行send()方法之后,请求就会发送到服务器上。
xhr.send(null); //发送请求
 
当请求发送到服务器端,收到响应后,响应的数据会自动填充XHR对象的属性。那么一共有四个属性:
 
属性名 说明
responseText 作为响应主体被返回的文本
responseXML 如果响应主体内容类型是"text/xml"或"application/xml",则返回包含响应数据的XML DOM文档
status 响应的HTTP状态
statusText HTTP状态的说明
 
接受响应之后,第一步检查status属性,以确定响应已经成功返回。一般而已HTTP状态代码为200作为成功的标志。除了成功的状态代码,还有一些别的:
 
 
HTTP状态码 状态字符串 说明
200 OK 服务器成功返回了页面
400 Bad Request 语法错误导致服务器不识别
401 Unauthorized 请求需要用户认证
404 Not found 指定的URL在服务器上找不到
500 Internal Server Error 服务器遇到意外错误,无法完成请求
503 ServiceUnavailable 由于服务器过载或维护导致无法完成请求
 
我们判断HTTP状态值即可,不建议使用HTTP状态说明,因为在跨浏览器的时候,可能会不太一致。
  1. addEvent(document, 'click'function () { 
  2. var xhr = new createXHR(); 
  3. xhr.open('get''demo.php?rand=' + Math.random(), false); //设置了同步 
  4. xhr.send(null); 
  5. if (xhr.status == 200) { //如果返回成功了 
  6. alert(xhr.responseText); //调出服务器返回的数据 
  7. else { 
  8. alert('数据返回失败!状态代码:' + xhr.status + '状态信息:' + xhr.statusText); 
  9. }); 
 
//PS:如果没有向服务器端发送,firebug无发送提示,如果有send()方法,则firebug会提示已发送 //PS:通过点击事件,不断的向服务器发送请求,然后服务器会时时的返回最新的数据,就是Ajax功能 //PS:IE浏览器第一次会向服务器端请求,获取最新数据,而第二次它就默认获取的缓存数据,导致数据不是最新的 //PS:怎么处理缓存?可以使用JS随机字符串
以上的代码每次点击页面的时候,返回的时间都是时时的,不同的,说明都是通过服务器及时加载回的数据。那么我们也可以测试一下在非Ajax情况下的情况,创建一个demo2.php文件,使用非Ajax。

  1. <script type="text/javascript" src="base.js"></script> 
  2. <script type="text/javascript"
  3.     addEvent(document, 'click'function () { 
  4.         alert("<?php echo Date('Y-m-d H:i:s')?>"); 
  5.     }); 
  6. </script> 
 


更多关于 的文章
·上一篇:JavaScript之Ajax异步
·下一篇:已经没有了
相关阅读
会员评论所有会员评论

  

相关排行总榜

网页教程

站长文章

特效排行