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