jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。而异步则这个AJAX代码运行中的时候其他代码一样可以运行。

ajax中async这个属性,用于控制请求数据的方式,默认是true,即默认以异步的方式请求数据。

一、async值为true (异步)

当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({ 
     type:"POST",
     url:"Venue.aspx?act=init",
      dataType:"html",
     success:function(result){  //function1()
       f1();
       f2(); 
    }
     failure:function (result) { 
      alert('Failed'); 
     },
 }
 function2();

在上例中,当ajax块发出请求后,他将停留function1(),等待server端的返回,但同时(在这个等待过程中),前台会去执行function2()。

二、async值为false (同步)

当执行当前AJAX的时候会停止执行后面的JS代码,直到AJAX执行完毕后时,才能继续执行后面的JS代码。

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({ 
     type:"POST",
     url:"Venue.aspx?act=init",
     dataType:"html",
     async: false,
    success:function(result){  //function1()
       f1();
       f2();
     }
    failure:function (result) { 
      alert('Failed'); 
     },
 }
 function2();

当把asyn设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后,他会等待在function1()这个地方,不会去执行function2(),直到function1()部分执行完毕。

Ajax同步与异步的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var returnValue = null;
xmlhttp = createXmlHttp();
xmlhttp.onreadystatechange = function() {
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    if (xmlhttp.responseText == "true") {
      returnValue = "true";
    }
    else {
      returnValue = "false";
    }
  }
};
xmlhttp.open("Post",url,true); //异步传输
xmlhttp.setRequestHeader("If-Modified-Since","0"); //不缓存Ajax
xmlhttp.send(sendStr);
return returnValue;

在异步时才可以用xmlHttpReq.onreadystatechange状态值!下面是异步和同步的不同调用方式:

Java

1
2
3
4
5
6
7
8
9
10
xmlHttpReq.open("GET",url,true);//异步方式
  xmlHttpReq.onreadystatechange = showResult; //showResult是回调函数名
  xmlHttpReq.send(null);
function showResult(){ 
  if(xmlHttpReq.readyState == 4){  
   if(xmlHttpReq.status == 200){
   ******
   }
  }
}

Java

1
2
3
4
5
6
7
8
9
10
11
xmlHttpReq.open("GET",url,false);//同步方式 
      xmlHttpReq.send(null); 
      showResult(); //showResult虽然是回调函数名但是具体用法不一样~ 
function showResult(){  
       //if(xmlHttpReq.readyState == 4){  这里就不用了,直接dosomething吧~ 
        //if(xmlHttpReq.status == 200){ 
          ******//dosomething 
        //} 
      //} 
}
xmlhttp.open("Post",url,true);

如果是同步(false),返回值是true或false,因为执行完send后,开始执行onreadystatechange,程序会等到onreadystatechange都执行完,取得responseText后才会继续执行下一条语句,所以returnValue一定有值。

如果是异步(true),返回值一定是null,因为程序执行完send后不等xmlhttp的响应,而继续执行下一条语句,所以returnValue还没有来的及变化就已经返回null了。

所有如果想获得xmlhttp返回值必须用同步,异步无法得到返回值。

同步异步使用xmlhttp池时都要注意:取得xmlhttp时只能新建xmlhttp,不能从池中取出已用过的xmlhttp,因为被使用过的xmlhttp的readyState为4,所以同步异步都会send但不执行onreadystatechange。

ajax同步与异步的区别的更多相关文章

  1. JQ Ajax 同步与异步的区别

    $.ajax({ url: xml_addr, type: 'get', dataType: 'xml', timeout: 1000, //设定超时 cache: false, //禁用缓存 asy ...

  2. Ajax同步和异步的区别?

    今天在code review时候看到同事的代码,用了ajax同步,async:false,如果不设置async参数,默认是true,为异步,异步的情况是比较复杂的,看下同步这个例子: function ...

  3. ajax 同步和异步的区别

    举个例子:普通B/S模式(同步)AJAX技术(异步)同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事异步: 请求通过事件触发->服务器处理(这时浏览 ...

  4. AJAX同步和异步的区别

    function paginationGo(page){ sendata = {"page":page}; $.ajax({ type:"POST", url: ...

  5. Ajax 是什么?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题?以及 HTTP状态码

    一.Ajax 是什么: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作 ...

  6. Ajax 的概念及过程?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题?

    Ajax 是什么: 1)  通过异步模式,提升了用户体验 2)  优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3)  Ajax 在客户端运行,承担了一部分本来由服务器承担的工 ...

  7. AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?

      AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...

  8. ajax同步与异步的坑

      之前工作中一个需求,需要动态的添加一组下拉菜单并为这个菜单绑定一个插件,很明显获取数据用Ajax,这本身是没错的,坑就坑在我用了 同步请求,当服务器端正确返回数据时再去执行下一个方法,这逻辑本身没 ...

  9. Java常见的同步和异步的区别、特点、联系

    Java常见的同步和异步的区别.特点.联系   同步:发送一个请求,等待返回,然后再发送下一个请求 异步:发送一个请求,不等待返回,随时可以再发送下一个请求 同步可以避免出现死锁,读脏数据的发生,一般 ...

随机推荐

  1. Mybatis获取数据库自增主键

    一般我们都为将表中主键列设置为自增,当我们执行插入语句时,比如这样 //测试添加 Employee employee = new Employee(null, "jerry4",n ...

  2. Windows 下使用 Composer 安装 thinkphp

    我用 XAMPP 安装 thinkphp 会出错,所以把环境换成了 phpStudy,这样甚至不用到处找安装包,直接去官网有最新版本,PHP 版本也是比较新的. 安装 phpStudy 先去官网下载安 ...

  3. [转帖]中信银行信用卡业务数据库实现国产替换,湖北银行新核心系统项目正式验收,阿里云与MongoDB达成战略合作

    中信银行信用卡业务数据库实现国产替换,湖北银行新核心系统项目正式验收,阿里云与MongoDB达成战略合作 http://www.itpub.net/2019/10/31/3942/ 中信银行 gold ...

  4. Linux学习-基本命令2

    安装tree命令 yum -y install tree 测试 tree /tmp [root@wyx ~]# tree /tmp/ /tmp/ ├── anaconda.log ├── hsperf ...

  5. tcpdump网络调试

    简介 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的 ...

  6. python列表生成式、键盘输入及类型转换、字符串翻转、字母大小写、数组广播、循环语句等基础问题

    Python知识总结 1.列表生成式 ​ 在实际开发过程中,当需要获取一个连续列表时,可直接使用range(3,10),但是如果获取该列表中每个数据的平方时,通常可以通过for循环来解决这个问题,如下 ...

  7. hashlib 加密 与进度条

    # 加密 ''' md5 = hashlib.md5() md5.update('how to use md5 in python hashlib?') #字节才可以 print md5.hexdig ...

  8. 使用PHP开发HR系统(5)

    本节讲述如何拆分页面以及使用jquery和ajax实现局部刷新. =================================================================== ...

  9. Spring MVC异常处理代码完整实例

    Spring MVC异常处理流程: 提供构造方法传值: 配置异常处理器的bean

  10. twbsPagination.js分页插件

    分页插件在使用时注意,如果页面中存在其他异步加载的数据,在运行分页方法第一次后,页面上的分页样式与分页中的data数据就是第一次的数据,如果异步加载重新在页面上录入数据,并希望分页继续在新的数据上实现 ...