详解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 xhr.open(type,url,isAsync);
16 //发送数据
17 xhr.send(null);

取消异步请求

1 xhr.abort();

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

  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。