1. 程式人生 > >ajax中的同步與非同步

ajax中的同步與非同步

       今天遇到了這樣的一個問題,在點擊發送郵件的按鈕時彈出的確認框裡面上線功能清單裡面的資訊沒有顯示出來,但是在一步一步除錯的過程中這個資料卻是可以顯示出來的,最後解決的辦法是把獲取資料的ajax中的屬性設定為非同步;


同步和非同步

同步:提交請求->等待伺服器處理->處理完畢返回 這個期間客戶端瀏覽器不能幹任何事
非同步: 請求通過事件觸發->伺服器處理(這是瀏覽器仍然可以作其他事情)->處理完畢

ajax中的同步和非同步

在ajax中,預設的設定值為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()部分執行完畢。

例項

function sendEmail(){

	var data = {};
	var list;
	var len;
	data.product_name = $("#product1").val();
	data.pageNum = 1;
	data.perPage=$("#perPage").val();
	
	$.ajax({
		url : '/process/fabu/searchFunctionInfo.html',
		type : 'POST',
		data : data,
		dataType : 'json',
		async: false,
		success : function(json) {
			if (json.retCode == 200) {
			    list = json.retContent;
				len = list.length;
				//bootbox.alert("哈哈:"+list);
			}
		}});
	
	var emailContent = "<pre>*****"+",你好:<br/>    <input type=\"text\" class=\"email-input\" id=\"reviewTime\" value=\"" + "時間" +"\"/></input>系統釋出線上環境,請審批,謝謝。<br/><br>"
		+ " 上線功能清單:<br/>"+
		"<table id='functionTable' width='100%' class=\"table table-striped\">" +
		"<thead>" + 
		  	"<tr>" +  
		  		"<td width='3%'>功能</td>" + 
		  		"<td width='3%'>產品人員</td>" +
		  		"<td width='3%'>後臺開發</td>" +
		  		"<td width='3%'>前端開發</td>" +
		  		"<td width='3%'>測試人員</td>" +
		  	"</tr>" +
		"</thead>" +
		"<tbody>" +
		"</tbody>" +
	"</table>";
	
	
	var str = "";
	$("#functionTable tbody").empty();
	for (var i=0; i<len; i++){
		var dict = list[i];
		var id = dict.productId;
		if($("#chk"+dict.productId).prop("checked")==true){
			str = "<tr>" +
			"<td>"+dict.functionName+"</td>" +
			"<td>"+dict.producter+"</td>" +
			"<td>"+dict.backstage+"</td>" +
			"<td>"+dict.fronter+"</td>" +
			"<td>"+dict.tester+"</td>" +
			"</tr>";
			$("#functionTable tbody").append(str);
		}
		
	}
	

	var data = {};
	
	data.emailToAddress = "aadf";
	bootbox.dialog({  
	       message: emailContent,  
	       title: "郵件內容",  
	       buttons: {  
	           Cancel: {  
	               label: "取消",  
	               className: "btn-primary",  
	               callback: function () {   
	               }  
	           }  
	           , OK: {  
	               label: "確認",  
	               className: "btn-primary",  
	               callback: function () {  
	                   var reviewTime = $('#reviewTime').val(); 
	                   var reviewTelephone = $('#reviewTelephone').val(); 

	                   emailContent = "<pre>****,您好:<br/>"
	                    + "    "+system+"系統釋出線上環境,請審批,"+sql+"<br/>"
	                    + "    ********:"+position + "<br/>";
	                   var abilityRequest = $('#abilityRequest').val();
	                   if(abilityRequest != ""){
	                	   emailContent = emailContent + "    崗位要求:<br/>"
	                	                + abilityRequest + "<br/>";	                	   				            	   
	                   }
	                   emailContent = emailContent + "    ********************************************************<br/>"
	               		+ "    聯絡電話:" + reviewTelephone + "<br/>"
	               		+ "    <img src=\"http://ecom.nos.netease.com/case/idoc/20160217/411fd908-d72d-4dda-9285-61a6cfb27c67\" ></img><br/>"
	               		+ "    ************** " + $('#corpMail').val() +",**************<br/>謝謝~</pre>";
	                   data.emailContent = emailContent;
	                   data.ccAddress = $('#corpMail').val();
	            	   $.ajax({
							url:'/process/fabu/sendEmail.html',
							type:'POST',
							async:false,
							data:data,
							dataType:'json',
							success:function(json){
								if(json.retCode == 200){
									bootbox.alert({  
								           message: '傳送成功!',
								                    buttons: {  
								                       ok: {  
								                            label: '確定',  
								                            className: 'btn-myStyle',
								                        }  
								                    },
								                    callback: function() {  
								                    	/*self.location ="/resume/index.html";*/
								                    }
								                });
									
								}else{
									bootbox.alert("傳送失敗,請聯絡後臺人員!");
								}
							}		
						}); 
	            	   
	               }  
	           }  
	       }  
	   });
	
	
	var str = "";
	$("#functionTable tbody").empty();
	for (var i=0; i<len; i++){
		var dict = list[i];
		var id = dict.productId;
		if($("#chk"+dict.productId).prop("checked")==true){
			str = "<tr>" +
			"<td>"+dict.functionName+"</td>" +
			"<td>"+dict.producter+"</td>" +
			"<td>"+dict.backstage+"</td>" +
			"<td>"+dict.fronter+"</td>" +
			"<td>"+dict.tester+"</td>" +
			"</tr>";
			$("#functionTable tbody").append(str);
		}
		
	}
	
}
在這裡如果async設定成如下
async: false,

就能得到下面的結果:


參考文章:

http://www.cnblogs.com/xmphoenix/archive/2011/11/21/2257651.html