ajax请求同步与异步的区别

最新推荐文章于 2021-08-05 14:39:02 发布

原创最新推荐文章于 2021-08-05 14:39:02 发布 · 158 阅读

1 ·

CC 4.0 BY-SA版权

本文深入探讨了AJAX请求的同步与异步机制，详细解释了两种请求方式的工作原理及其对前端代码执行流程的影响。通过具体代码示例，展示了如何设置AJAX请求的同步属性，并对比了其与异步请求在执行效率和用户体验上的区别。

/同步请求

$.ajax({
    type:'post',
　url:"<c:url value='/device/org/' />"+val,
　data:{'orgId':val},
　success:function(data){//function(1)
　name=data.orgName;
　},
　dataType:"json",

　async:false
});

function(2);

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

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

//异步请求

$.ajax({ 
     type:"POST",
     url:"Venue.aspx?act=init",
     dataType:"html",
     success:function(result){  //function1()
       f1();
       f2(); 
    }
     failure:function (result) { 
      alert('Failed'); 
     },
 }
 function2();

当ajax发送请求后，在等待server端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程和ajax块后面的脚本（另一个线程）
在上例中，当ajax块发出请求后，他将停留function1()，等待server端的返回，但同时（在这个等待过程中），前台会去执行function2()。