详解Ajax（二）

本节主要讲解Ajax在不同浏览器中是如何实现的。

　　用Ajax就像打电话一样，我们打电话一共有几个步骤呢？请看下文

　　1.首先你得有一部手机，X果、X星或者X米

　　2.然后你需要知道给谁打电话，有一个电话号码

　　3.如何和对方通话，是对暗号还是大白话说的呢？

　　4.你要和对方说什么呢？

　　5.如果没有打通，该怎么办，如果打通了又该怎么办呢？

　　6.那如何判断是否打通，是否没有打通呢？

　ok,我们做完这些准备之后，非常重要的一步来了，我们要拨号了

　　开始上代码了，颤抖吧，骚年们，用代码实现和打电话的步骤稍有不同，但大体思路是一致的

　　参考《javaScript高级程序设计(第3版)》

　　1.声明xmlHttPRequest对象　　

 1         function createXHR(){ 2             var xhr=null; 3             if(xmlhttpRequest){ 4                 //适用IE7+ 5                 xhr=new XMLHttpRequest(); 6             }else if(ActiveXObject){ 7                 //适用用IE7，6，5 8                 var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"] 9                 for(var i=0;i<versions.length;i++){10                     try{11                         xhr=new ActiveXObject(versions[i]);12                         break;13                     }catch(e){14 15                     }16                 }17             }else{18                 throw new Error("No XHR object available");19             }20             return xhr;21         }22         var xhr=createXHR();

　　2.用最简单的方式演示一个Ajax请求,WebStorm崩掉了，用notepad++写的

 1 //访问方式 2 var type="get"; 3 //访问地址 4 var url="example.php"; 5 //是否为异步 6 var isAsync=false; 7 //启动请求以备发送数据 8 xhr.open(type,url,isAsync); 9 //发送数据10 xhr.send(null);

　　这是一个简单的同步请求，当服务器返回信息后Javascript代码才会继续执行。在收到响应后，响应的数据会自动填充xhr的属性，相关属性简介如下

　　responseText:返回的文本

　　reponseXML:返回的 XML DOM文档

　　status:HTTP响应状态

　　statusText:HTTP状态的说明

　　如果status为200表示响应成功，304表示请求资源未被修改，可以直接使用浏览器的缓存

1 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){2     alert(xhr.responseText);3 }

这样就可以弹出服务器响应给我们的数据了

如果我们希望使用异步的方式进行请求的时候，就需要根据xhr的readyState属性进行判断，该属性有以下值

　　0：未初始化。尚未调用open()方法

　　1：启动。已经调用open()方法，但尚未调用send()方法

　　2：发送。已经调用send()方法，但尚未收到响应

　　3：接收。已经接收到部分数据

　　4：完成。已经接收到全部数据，可以在客户端使用了

我们就需要改变一下代码了，为了保证兼容性，在open()之前需要给onreadstatechange事件写明方法

 1 //访问方式 2 var type="get"; 3 //访问地址 4 var url="example.php"; 5 //是否为异步 6 var isAsync=true; 7 //为事件写对应的方法 8 xhr.onreadystatechange=function(){ 9     if(xhr.onreadystatechange==4){10         if((xhr.status>=200&&xhr.status<300)||xhr.status==304){11             alert(xhr.responseText);12         }13     }14 }15 //启动请求以备发送16 xhr.open(type,url,isAsync);17 //发送数据18 xhr.send(null);

取消异步请求

1 xhr.abort();

未完待续中，有兴趣的读者可以参见《JavaScript高级程序设计(第3版)》571-574页，谢谢