ajax的同步与异步_ajax同步与异步_ajax同步

之前的文章讲解了AJAX基础,其中我们在使用AJAX时用的是已经编写好的AJAX库,这节课我们开始学习A如何自己编写一个AJAX库。

编写AJAX

通过AJAX从服务器获取数据,需要以下几步:

那么,实现这个过程应该如何编写呢?我们从第一步创建AJAX对象写起:


 
 
 无标题文档
 
 window.onload=function ()
 {
 var oBtn=document.getElementById('btn1');
 oBtn.onclick=function ()
 {
 //1.创建Ajax对象
 //非IE6
 var oAjax=new XMLHttpRequest();
 
 //IE6
 //var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
 
 alert(oAjax);
 };
 };
 
 
 
 
 

可以看到点击按钮后,会返回一个XMLHttpRequest对象,这就是我们的AJAX对象。不过XMLHttpRequest只兼容非IE6的浏览器,兼容IE6的写法为:var oAjax=new ActiveXObject(“Microsoft.XMLHTTP”)。ActiveX是IE6的一个插件,在IE6下AJAX是通过这个插件来完成工作的。

if(XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}

可是,当我们进行这样的if判断时,会发现在IE6下又出现了问题。这是为什么呢?

为了说明这个问题,我们需要看一个JS里很有意思的特点。

var a=12;alert(window.a);

我们平时在使用全局变量时,基本是直接使用,实际上我们这里在变量前加了window,也没有发生任何变化。其实,我们定义的任何全局变量都属于window下的一个属性,而且alert方法本身也属于window。

var a=12;window.alert(window.a);

现在我们来看这么个例子:

alert(a);

alert(window.a);

我们虽然说过,加不加window看上去没有任何区别,但在这里,前者会直接报错,后者会返回undefined。这是因为在JS里,如果使用没有被定义的变量,浏览器会报错;而如果是没有被定义的属性,则不会报错,只是返回undefined。

回到我们的AJAX上。在非IE6浏览器下,我们的代码中的XMLHttpRequest是被定义过的,自然没有问题,可以通过。但在IE6下XMLHttpRequest是没有被定义的,因此会报错,不过如果我们:

if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}

在XMLHttpRequest前加上window的话,尽管XMLHttpRequest依然没有被定义,但它由一个变量变为了一个属性,返回的是undefined,正好是我们想要的。

创建好ajax对象后,我们就需要连接服务器了,连接服务器的过程非常简单,只需要一步:

oAjax.open('GET','a.txt',true);

ajax用open方法连接服务器,它有三个参数:第一个参数是连接方法,也就是我们前面表单中提到的get或者post,这里我们一般采用get方法;第二个参数是文件名,也就是我们需要读取的文件(为了避免缓存我们可以在文件后面加入时间戳);第三个参数是异步传输,这里需要对同步和异步的区别进行一下讲解。

简单来说,在JS里,同步指事务一件一件进行,而异步则指多件事务同时进行。AJAX天生就是用来进行异步操作的,如果AJAX工作在同步方式下,我们如果向服务器发送了一个请求,在服务器回复之前,页面的所有其它功能都不能正常运行。而异步则可以避免这种情况——正如你在微博页面发送了一条微博,如果服务器反应较慢不能马上发送成功ajax同步,在这个过程中你依旧可以给别人点赞,评论别人。在大部分情况下,ajax都是采用异步的方式(这个参数如果为true的话即为异步,flase的话即为同步)。

连接到我们的服务器之后,我们将进行第三步:发送请求。发送请求的方式也非常简单,我们只需要调用一个send()方法即可。

oAjax.send();

然后是我们的第四步:接收返回信息。

oAjax.onreadystatechange=function(){
 if(oAjax.readyState==4)
 {
 if(oAjax.status==200)
 {
 alert('成功'+responseText);
 }
 else{
 alert('失败'+oAjax.status);
 }
 }
 }

oAjax.readyState代表了请求的状态,其中数字代表的含义如下:

当readyState的值等于4时,代表读取完成——值得注意的是,完成不等于成功,为了进一步对是否成功进行判断,我们就用到了另一个属性:status(状态码)。只有status等于200的时候,才代表通信的成功。

最后,我们为了获取读取回来的信息ajax同步,我们还需要用到AJAX的一个属性:responseText,也就是从服务器响应发回的文本。

这样我们就完成了一个AJAX库,只要把上面的代码封装为一个函数就可以进行引用了。

function ajax(url, fnSucc, fnFaild){
 //1.创建Ajax对象
 if(window.XMLHttpRequest)
 {
 var oAjax=new XMLHttpRequest();
 }
 else
 {
 var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
 }
 //2.连接服务器
 //open(方法, 文件名, 异步传输)
 oAjax.open('GET', url, true);
 //3.发送请求
 oAjax.send();
 //4.接收返回
 oAjax.onreadystatechange=function ()
 {
 //oAjax.readyState //浏览器和服务器,进行到哪一步了
 if(oAjax.readyState==4) //读取完成
 {
 if(oAjax.status==200) //成功
 {
 fnSucc(oAjax.responseText);
 }
 else
 {
 if(fnFaild)
 {
 fnFaild(oAjax.status);
 }
 //alert('失败:'+oAjax.status);
 }
 }
 };
}

最后,我们来说两个注意事项。

首先是数据类型。数据类型有xml,json等,其中xml在老式程序里用的比较多,但同等数据量的情况下xml要比json大的多,因此xml已经逐渐被抛弃。而目前的JS几乎都是采用的JSON这种数据类型进行交互了。

另一点是关于字符集:我们需要将我们所有的文件统一成一种字符集(一般为UTF-8)。

限时特惠:本站每日持续更新海量设计资源,一年会员只需29.9元,全站资源免费下载
站长微信:ziyuanshu688