注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

AJAX 步骤详解  

2015-04-28 15:03:51|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在此之前介绍过AJAX的基本用法,但是该文章给大家进一步的介绍AJAX的基本原理。
  1. var xhr = createRequest();
  2. xhr.open("get", "test.txt", true);
  3. xhr.send(null);
  4. xhr.onload = function() {
  5.     console.log(xhr.responseText);
  6. }
这是之前我们用这种方法来实现AJAX,但是不好的是onload只是确定后台加载完毕了,不能保证数据请求的有效性(没有进行筛选);onload不能保证JavaScript不被阻塞,从而导致AJAX没有异步可言了;另外onload不兼容IE7以及IE7以下的浏览器。这时候需要想出另外的方法,来替换掉onload事件。

 在我们发送请求的时候,为了不让JavaScript进行等待而阻塞执行,可以检测AJAX对象的readyState属性,该属性表示请求响应过程的当前活动阶段,具体值如下: 
 0:未初始化。尚未调用open()方法; 
 1:启动。已经调用open()方法,但未调用send()方法; 
 2:发送。已经调用send()方法,但未接收到响应; 
 3:接收。已经接收到部分响应数据;
 4:完成。已经接收到全部响应数据,而且已经在客户端使用了。

 onreadystatechange事件:
 只要readyState属性的值由一个值变成另外一个值,都会触发一次onreadystatechange事件。
  1. // 创建请求
  2. var xhr = new XMLHttpRequest();
  3. xhr.open("get", "reset.css", true);
  4. xhr.send(null);
  5. xhr.onreadystatechange = function () {
  6.     // 监测readyState状态
  7.     if (xhr.readyState == 4) {
  8.         // 只有已经接收到全部响应数据,才能获取数据
  9.     };
  10. }
现在是可以判断AJAX解析过程,但是还不能明确响应的HTTP请求状态。HTTP的状态码以2开头的代表成功处理了请求的状态代码。304表示请求的资源没有被修改,可以直接使用浏览器的缓存,但是这样的响应也是有效的。
  1. // 创建请求
  2. var xhr = new XMLHttpRequest();
  3. xhr.open("get", "reset.css", true);
  4. xhr.send(null);
  5. xhr.onreadystatechange = function () {
  6.     // 监测readyState状态
  7.     if (xhr.readyState == 4) {
  8.         // 检测HTTP的状态码
  9.         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
  10.             console.log(xhr.responseText);
  11.         }
  12.     };
  13. }
注意:为了防止AJAX在同步请求的时候,获取不到数据,同时也为了保证AJAX的兼容,最好是把onreadychange事件放在在open之前进行调用。
  1. // 创建请求
  2. var xhr = new XMLHttpRequest();
  3. xhr.onreadystatechange = function () {
  4.     // 监测readyState状态
  5.     if (xhr.readyState == 4) {
  6.         // 检测HTTP的状态码
  7.         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
  8.             console.log(xhr.responseText);
  9.         }
  10.     };
  11. }
  12. xhr.open("get", "reset.css", true);
  13. xhr.send(null);



欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
HTML5学堂官网——HTML5学堂
HTML5学堂微信
setInterval和setTimeout参数剖析 - 梦幻雪冰 - 梦幻雪冰
  评论这张
 
阅读(94)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017