ajax 同步与异步及ajax模板

青旅半醒 2022-05-24 04:48 187阅读 0赞

最近在做项目时,忽然发现以前一直忽略了ajax的**async 同步异步设置属性**

**设置为同步状态也是很有用,很多时候我们也需要设置ajax的async 为flase,ajax后面的代码需要ajax运行的结果或者参数,**

**前几天发现我页面一个bug就是因为没有设置ajax的async属性,默认为ture,但是我ajax后面的代码有好几个函数需要调用**

**ajax处理后的值,这样导致的结果后面的函数还没等到ajax处理完,就已经加载运行,参数异常导致页面报错**

**async值为true （异步） **

**async值为flase （异步） **

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

ajax 通常默认是异步提交状态,也就是说,ajax后面的代码可以不用等待ajax执行完毕,可以异步同时执行,属于两个线程

但是有的时候我们需要根据ajax返回的数据才能执行下面相关代码,这个时候我们就需要设置ajax为flase同步状态

同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出去假死状态，当这个AJAX执 行完毕后才会继续运行其他代码页面假死状态解除。

下面为两个ajax模板

1. post请求同步加载方式模板 ,两个参数 url和postdata,

//url 目标地址  postdata  参数

2. 多个参数,以参数来确定请求方式和同异步

/** 
     * ajax访问模板 
     * 如果需要获取返回值，如果该值需作为下游流程判断重要依据，请将asyncParam设置为false 代表ajax是同步的，如果允许异步，则不需考虑 
     * callBackFnParam是回调函数,暴露给用户,处理ajax返回后需要做的操作 
     *  
     *  
     * 例子：  返回值 
     *       var resultBean = itscPostAjax(formBean,'xxx.action',false);--异步 
     *       var resultBean = itscPostAjax(formBean,'xxx.action');--同步 
     *       
     *       回调函数 
     *       itscPostAjax(formBean,'xxx.action',true,setGMData); 
     *        
             function setGMData(data) 
             { 
                 if (data) 
                 { 
                     var gmVal = Number(data.GM).toFixed(2); 
                     $("#budgetGM").html(gmVal+'%'); 
                     $("#currentGM").val(gmVal);          
                 } 
             } 
     */  
    function itscPostAjax(formBeanJson,urlParam,asyncParam,callBackFnParam)  
     {   
            var tmpAsync = true;  
            if (asyncParam===false)  
            {  
                tmpAsync = false;  
            }  
              
            var resultBean = {};  
      
            $.ajax({  
                type: 'POST',  
                url:   urlParam,  
                data:  formBeanJson ,  
                async: tmpAsync,    
                dataType: "json",  
                success: function (data, textStatus){  
                                     if (data.result=="success")  
                                     {  
                                         resultBean=data;  
                                         if (callBackFnParam)  
                                         {  
                                             callBackFnParam(data);  
                                         }  
                                     }  
                                     else  
                                     {  
                                          alert(data.result);  
                                          return null;  
                                     }  
                                },          
                 error: function (jqXHR, textStatus, errorThrown) {  
                           alert("系统内部错误!");  
                           alert(jqXHR.responseText);  
                       }  
            });  
                 
            return resultBean;  
      
        }