ajax 同步与异步 及ajax模板

最近在做项目时,忽然发现以前一直忽略了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  参数  

function ajaxRunMethod(url,postdata){
        var ret;
        $.ajax({
            type: "POST",
            contentType : "application/x-www-form-urlencoded;charset=UTF-8",
            dataType: "text",
            headers: {
                Accept: "application/x-www-form-urlencoded;charset=UTF-8"
            },
            url: url,
            data: postdata,
            async : false,
            complete:function(XMLHttpRequest, textStatus){
                //hideMessage();
            },
            success: function(data){
                ret = data;
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                alert(XMLHttpRequest.responseText);
            }
        });
        return ret;
    }

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;  
  
    }