1. 程式人生 > >$.Ajax的async:false/true的區別

$.Ajax的async:false/true的區別

做專案中碰到一個$.ajax彈屏提醒業務,發現前臺框架的提示功能發現沒有作用了,只有alert()才能彈屏。查找了一下原始碼發現

是同步和非同步導致的。為了防止以後犯同樣的錯誤。特此記錄下!

jquery中ajax方法有個屬性async用於控制同步和非同步,預設是true,即ajax請求預設是非同步請求,有時專案中會用到AJAX同步。這個同步的意思是當JS程式碼載入到當前AJAX的時候會把頁面裡所有的程式碼停止載入,頁面出現假死狀態,當這個AJAX執行完畢後才會繼續執行其他程式碼頁面假死狀態解除。而非同步則這個AJAX程式碼執行中的時候其他程式碼一樣可以執行。

下面看下程式碼:

$('#btn').click(function(){
		obj1={
				"smstemplateNo":1
		};
		$.ajax({
			url : "<%=request.getContextPath()%>/web/expantion/common/sms/sendBatchSms",
			type: "POST",
			dataType: 'text',
		    async: true,
		    contentType:'application/json;charset=UTF-8', 
		    data: JSON.stringify(obj1),
		    success:function(res){
	        	alert('success')
	      	},error:function(err){
	        	console.log('err')
	      	}
		})
		alert('after click');
	});

結果:

當async設定為true時,點選按鈕後,會先alert(‘after click’),之後請求完畢才會alert(‘success’)。 
當async設定為false時,點選按鈕後,則會造成阻塞,阻止下面的程式碼執行,只有執行完ajax請求,才會去執行後面的程式碼。