日期:2014-05-16  浏览次数:20372 次

ExtJS4 ajax请求同步异步问题

今天在写代码过程中遇到一个奇怪的问题,事情是这样的,我写了一个简单的页面用来删除选中的用户,请看下面:

因为后台的servlet的代码实现了根据用户名来删除一条记录,所以我在前台的ExtJS代码里面用了循环:

	function deleteUsers(userList) {//删除用户

		var msgTip = Ext.MessageBox.show({//显示正常删除的信息提示框
			title : '提示',
			width : 250,
			msg : '正在删除用户请稍候'
		});
		var n = 0;
		
		// alert(userList.length);
		for (var i = 0; i < userList.length; i++) {
			//for(var u in userList){	
			Ext.Ajax.request({
						url : "../UserDeleteOneServlet",
						
						method : 'POST',
						params : {
							username : userList[i]
						},
						//params:{username:u},
						success : function(response) {

							n++;
							//alert(n);------1

						}
					});

		}
				//alert(n);-------2
				if (n == userList.length) {
					
					Ext.MessageBox.alert('提示', '全部删除成功');

				} else {
					Ext.MessageBox.alert('提示', '没有全部删除成功');
				}
			
	
		
		//alert(n);

		updateUserList();

	}

其中的userList是我得到的选中行的用户名列表数组,准备用for循环,当所有的请求发给后台的servlet并返回成功后,提示用户删除是否成功。


感觉逻辑毫无问题,结果却是跟想象相差很多,貌似删除是成功了,但是给我提示个 “ 没有全部删除成功”。


到底是怎么回事,我想可能是线程安全的问题或者是AJAX请求异步的问题,上网查了下,果然有人跟我遇到一样的问题 在 这里 和这里

原因说白了就是我在判断n==userList.length的时候,那个去做异步请求的ajax请求还没做完,输出的n自然不会是所有请求做完后的n了

解决的方法是在ajax请求里面加一个配置项

async:false,
表示把请求设置为同步

然后代码中的n就得到了预想得到的结果了