【Ajax】-同步和异步

 前言:

       Jquery中ajax方法中async用于控制同步和异步,当async值为true时是异步请求,当async值为fase时是同步请求。ajax中async这个属性,用于控制请求数据的方式,默认是true,即默认以异步的方式请求数据。


概念解释:

一.什么是同步请求:(false)

       同步请求即是当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码,相当于是排队,前一个人办理完自己的事务,下一个人才能接着办。也就是说,当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面处于一个假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态(即当ajax返回数据后,才执行后面的function2)。 

二.什么是异步请求:(true)
       异步请求就当发出请求的同时,浏览器可以继续做任何事,Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。

一般默认值为true,异步。异步请求可以完全不影响用户的体验效果,无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。


两者区别:

异步:在异步模式下,当我们使用AJAX发送完请求后,可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求,但是因为我们采用了异步执行方式,所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的,那么,这个时候就好比两条线程同时执行一样。

同步:在同步模式下,当我们使用AJAX发送完请求后,后续还有代码需要执行,我们同样将服务器响应交由另一个JS函数去处理,但是这时的代码执行情况是:在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时,包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样,请求发出后就进入阻塞状态,知道接触阻塞余下的代码才会继续执行。


代码:

一:同步事件

//跨浏览器添加事件

function addEvent(obj, type, fn) {

   if (obj.addEventListener) {

       obj.addEventListener(type, fn);

   } else {

       obj.attchEvent("on" + type, fn);

    }

};



 //同步方式

 addEvent(document, "click", function () {

     var xhr = new XMLHttpRequest();//创建xhr

     xhr.open('get', 'test.xml? rand=' + Math.random, false);  //准备发送请求,以get方式请求,url是test.xml,同步

     xhr.send(null); //发送请求,get不需要数据提交,则填写为null

     //alert(xhr.responseText);  //打印出服务器端打印回来的数据

    // alert(xhr.status);  //获取当前数据的是否成功,成功返回的是200

     //alert(xhr.statusText);//获取成功或失败后返回的文本,成功返回OK

     if (xhr.status == 200) {

         alert(xhr.responseText);

     } else {

         alert('获取数据错误!错误代码:' + xhr.status + '错误信息:' + xhr.statusText);

     }

 });

二 :异步事件

//使用异步方式

addEvent(document, "click", function () {

    var xhr = new XMLHttpRequest();



    xhr.onreadystatechange = function () {

        if (xhr.readyState == 4) {  //只有当页面完成及接受全部的相应后,才真正的使用。分为了xhr.readystate==1,启动;2,发送,3,接受,4,完成。

            if (xhr.status == 200) {

                alert(xhr.responseText);

            } else {

                alert('获取数据错误!错误信息:' + xhr.status + '错误信息:' + xhr.statusText);

            }

        };

    }



    xhr.open('get', 'test.xml? rand=' + Math.random, true);

         xhr.abort();  //取消异步的函数。

    xhr.send(null);

})


异步传输步骤: 
1、XMLHttpRequest对象的创建 
2、设置请求方式及请求地址 
3、设定请求的细节(不是必须的) 
4、发送请求 
5、响应

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值