jq——ajax同步异步区别

Ajax同步和异步的区别
之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题。最近的项目用了到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出去假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。
而异步则这个AJAX代码运行中的时候其他代码一样可以运行。
jquery的async:false,这个属性
默认是true：异步，false：同步。

$.ajax({ 
        type: "post", 
        url: "path", 
        cache:false, 
        async:false, 
        dataType: "json", 
        success: function(json){ 

        } 
});

有了这个属性可以相对的减少代码运行书序问题，但是如果用的太多，页面假死次数太多。这样反而导致用户体验不佳~！

在这里，async默认的设置值为true，这种情况为异步方式，就是说当ajax发送请求后，在等待server端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程和ajax块后面的脚本（另一个线程）例：

$.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(),也就是说，在这个时候出现两个线程，我们这里暂且说为function1() 和function2()。

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

之前一直以为只要同步就好了.其实如果同步就失去了ajax的意义.

遇到一个bug.

页面的加载加载中….. 引用一个publish.js

  function loader(m) {
  var left = (window.innerWidth / 2) - 83;
  var top = window.innerHeight / 2 - 60;
  var height = 50;
  var html =
  '<div id="ajaxloader_zz" style="z-index: 9999998; position: absolute; top: 0px; left: 0; width: 100%; height: 100%; opacity: 0; "></div>' +
  '<div id="ajaxloader" style="width:200px;height:100px; text-align:center;background-color:snow;border-radius:5px; position:fixed;top:' + top + 'px;left:' + left + 'px;z-index:9999999;">' +
  '<table style="vertical-align:middle;text-align:center; width:100%;height:100%;">' +
  '<tr><td><div style="margin-top:20px;"><img src="../images/loading.gif" /></div></td></tr>' +
 '<tr><td><span style="color:black;font-family:Helvetica-Regular;font-weight:bold;font-size:16px">' + m + '</span></td></tr></table></div>';
 return html;
 }

 //请求开始动画
 $(document).ajaxSend(function () {
 alert(1);
 if ($("#ajaxloader").length == 0) {
 $("body").append(loader("请稍候..."));
 $("#ajaxloader,#ajaxloader_zz").fadeIn("normal");0 }
 });

 ////请求成功动画
 $(document).ajaxSuccess(function () {
 if ($("#ajaxloader").length > 0) {
 $("#ajaxloader,#ajaxloader_zz").fadeOut("normal");
 $("#ajaxloader,#ajaxloader_zz").remove();
 }
 });
 //请求错误动画
 $(document).ajaxError(function () {
 if ($("#ajaxloader").length > 0) {
 $("#ajaxloader,#ajaxloader_zz").fadeOut("normal");
 $("#ajaxloader,#ajaxloader_zz").remove();
 $("body").append(loader("请求失败！"));
 $("#ajaxloader,#ajaxloader_zz").fadeIn("normal");
 setTimeout(function () { $("#ajaxloader,#ajaxloader_zz").fadeOut("normal"); $("#ajaxloader,#ajaxloader_zz").remove(); }, 1000);
 }
 });

页面引用这个js.当有ajax操作时,会有请稍等….的提示

如果页面中使用的ajax请求是同步的.在google和ie等浏览器上不会有此效果.改为异步即可.

注意:添加async:false.即修改为同步了，什么意思？（按同事解释就是，这是等这个ajax有了返回值后才会执行下面的js。一语道破天机，怪不得以前很多ajax调用里面的赋值都不起作用）。这样等ajax给bol赋值完毕后，才执行下面的js部分。而刚刚异步的话，还没有来得及赋值，就已经return了。

考虑是不是因为设置为同步时,影响了publish.js中的js执行.但是火狐中又可以,哎,理解不透了.

转载出处:https://www.cnblogs.com/sdya/p/4624578.html

jq——ajax同步异步区别

猜你喜欢