关于ajax同步异步问题

写项目经常用到ajax，ajax在默认情况下async=true，即异步；

大致说一下同步异步是什么意思：

比方你在烤面包，当你把面包放进烤面包机里边，然后你就一直在哪儿傻等着，一直等到面包烤好了你取出面包再开始做下面的事情这个就是同步。
异步的话就是你不等面包烤好，把面包放进烤面包机之后你就去做其他事情去了，当烤面包机一声铃响提示你烤好了，你取出面包再开始做下面的事情这个就是异步。

之前一直不太会用同步异步，后来写项目遇到问题，解决不了请教别人才知道是同步异步的问题，接下来直接上代码，对了！！！！注意不要把async写成asyne。。emmmm不要问我是怎么知道的

首先要实现的功能是   如图  动态获取下拉列表  数据库中有关系表

代码如下

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">

	$(function(){
		$("#view").hide();
		$.ajax({
		
			url:"<%=request.getContextPath()%>/goodsServlet?method=getGoodsListJson&page=1",
			type:"post",
			data:"",
			dataType:"json",
			success:function(obj){
				
				//obj[0]是pageUtil对象 
				objPage=obj[0];
				
				 for(var i=1;i<obj.length;i++){
					 var h="<td>"+obj[i].gname+
					 "</td><td>"+obj[i].price+
					 "</td><td>"+obj[i].cname+
					 "</td><td>"+obj[i].bname+
					 "</td><td><button onClick='toUpdate("+obj[i].id+")'>更新</button></td>";
				} 
				
				$("#list").html(h); 
				
			}	
		});
		
		
		
		
		
	})
	
	//分页
	function toPage(page){
		$.ajax({
			url:"<%=request.getContextPath()%>/goodsServlet?method=getGoodsListJson",
			type:"post",
			data:{
				page:page
			},
			dataType:"json",
			success:function(obj){
				objPage=obj[0];
 				
				var h="";
				 for(var i=1;i<obj.length;i++){
					 h+="<td>"+obj[i].gname+"</td><td>"
					 +obj[i].price+"</td><td>"
					 +obj[i].cname+"</td><td>"
					 +obj[i].bname+"</td><td><button onClick='toUpdate("+obj[i].id+")'>更新</button></td>";
				} 
				 
				
				$("#list").html(h); 
			
			}
		})
		
	}
	//提交
	function tijiao(){
		
		var id=$("#id").val();
		var cId=$("#cate").val();
		var bId=$("#brand").val();
		var name=$("#goods_name").val();
		var desc=$("#desc").val();
		var price=$("#goods_price").val();
		//alert(id);
		$.ajax({
			
			url:"<%=request.getContextPath()%>/goodsServlet?method=update",
			type:"post",
			data:{
				
				id:id,
				cId:cId,
				bId:bId,
				name:name,
				desc:desc,
				price:price,
			},
			dataType:"text",//预期服务器返回的数据类型
			success:function(obj){
				if("ok"==obj){
					alert("更新成功");
				}
			//alert(id);
				
				
				
			}	
		});
		
		
	};
	
	//新增
	function add(){
		location.href="<%=request.getContextPath() %>/goods_add.jsp";
	}
	
	
	
	//回显
	function toUpdate(id){
		
		$("#view").show();
		

		//获取品牌列表框
		function getBrandList(){
			
			//获取分类对应的id
			var cateId=$("#cate").val();
			var h="";
			
			//遍历关系列表 根据分类id获取品牌id
			for(var i=0;i<cateBrand.length;i++){
				
				if(cateId==cateBrand[i].cate_id){
					
					//通过关系列表获取对应的品牌id
					var brandId=cateBrand[i].brand_id;
					//遍历品牌id 获取上边拿到的id
					for(var j=0;j<brandList.length;j++){
						if(brandId==brandList[j].brand_id){
							h+="<option value='"+brandList[j].brand_id+"'>"+brandList[j].brand_name+"</option>";
						}
					}
				}
			}
			$("#brand").html(h);
		}
		
		
		
		
		
		var cateList,brandList,cateBrand;
		$.ajax({
			
			url:"<%=request.getContextPath()%>/goodsServlet?method=getCateBrand",
			type:"post",
			data:"",
			dataType:"json",
			async: false,   
			success:function(obj){
				cateList=obj.cateList;
				brandList=obj.brandList;
				cateBrand=obj.cateBrand;
				
				//分类框
				var h="";
				 for(var i=0;i<cateList.length;i++){
					 h += "<option value='"+cateList[i].cate_id+"'>"+obj.cateList[i].cate_name+"</option>";
				} 
				
				$("#cate").html(h); 
				getBrandList();
			}	
		});
		
		
		
		
		
		
		
		
		//品牌框随分类框变化
 		$("#cate").change(function(){
 			//alert("cate变化了");
			getBrandList();
		}); 
		
 		
 		
		$.ajax({
			
			url:"<%=request.getContextPath()%>/goodsServlet?method=toUpdate",
			type:"post",
			async: false,
			data:{
				id:id
				},
			dataType:"json",
			success:function(obj){
				
			//var id=obj.id;
			var price=obj.price;
			var desc=obj.gdesc;
			var name=obj.gname;
			var cId=obj.cid;
			var bId=obj.bid;
			//alert(id);
			
			
			//回显数据  id是隐藏的 但是也要进行回显  以便于更新过后点提交获取要更新的id
			$("#id").val(id);
			$("#goods_price").val(price);
			$("#desc").val(desc);
			$("#goods_name").val(name);
			$("#cate").val(cId);
			getBrandList();    //强制让它进行品牌的更新
			$("#brand").val(bId); 
			//$("#select_id option[value='"+msg.data.categoryId+"']").attr("selected","selected");根据值让option选中  
			/* $("#cate option[value='"+cId+"']").attr("selected","selected");//选中分类
			getBrandList();//强制让它进行品牌的更新
			$("#brand option[value='"+bId+"']").attr("selected","selected"); */
				
			}	
		});
		
		
		
		
	}
	
	
	




</script>
</head>
<body>

<table id="tab" border="1">
	<tr id="banner">
		<td>商品名称</td>
		<td>商品价格</td>
		<td>商品分类名称</td>
		<td>商品品牌名称</td>
		<td>操作</td>
	</tr>
	<tr id="list"></tr>
	
	
	<tr>
		<td colspan="10">
			<button onClick="add()">新增</button>
			<button onClick="toPage(1)">首页</button>
			<button onClick="toPage(objPage.prevPage)">上一页</button>
			<button onClick="toPage(objPage.nextPage)">下一页</button>
			<button onClick="toPage(objPage.lastPage)">尾页</button>
		</td>
   	</tr>
    
</table>

<form id="form">
<div id="view">
	<input type="hidden" id="id">
	<table id="tt" border="1">
		<tr>
			<td>商品分类</td>
			<td><select  id="cate"></select></td>
		</tr>
		<tr>
			<td>品牌</td>
			<td><select  id="brand"></select></td>
		</tr>
		<tr>
			<td>商品名称</td>
			<td><input type="text" id="goods_name"></td>
		</tr>
		<tr>
			<td>描述</td>
			<td><textarea rows="10" cols="20" id="desc"></textarea></td>
		</tr>
		<tr>
			<td>商品价格</td>
			<td><input type="text" id="goods_price"></td>
		</tr>
		<tr>
			
			<td colspan="10">
			<div align="center">
				<button id="sub" οnclick="tijiao()">提交</button>
				<input type="reset" value="重置">
			</div>
			</td>
		</tr>
	</table>
</div>
</form>

</body>

async=false 即同步

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

这里由于是两级联动 所以必须使用异步！