我在js的一个函数中，使用AJAX调用一个servlet，servlet前后加的进度条不起作用

程序如下： function getResult() {
           //进度条开始
           $("#loading div").animate({width:"16px"}).text("16%");
           setTimeout(function(){$("#loading div").animate({width:"34px"}).text("34%")},500);           var url = "select/city_Ajax";
           req = new XMLHttpRequest();
           req.open("GET",url, false);
       
           //进度条进行中
           setTimeout(function(){$("#loading div").animate({width:"67px"}).text("67%")},1000);
        } function complete(){
               //进度条进行中
               setTimeout(function(){$("#loading div").animate({width:"82px"}).text("82%")},1500) if (req.readyState == 4) {
if (req.status == 200) {                           
                          //其他代码
                          //进度条进行中
                          setTimeout(function(){$("#loading div").animate({width:"100px"}).text("100%")},2000)
}
}                        //进度条结束并隐藏
                setTimeout(function(){$("#loading").hide(500)},500);
        }
html如下<div id="loading"><div></div></div>
<li><a href="#" class="home" onclick="getResult('state_flag');"><small>查询数据库</small></a></li>
我是想在调用servlet中，得到结果中都加入setTimeout(function(){$("#loading div").animate({width:"#px"}).text("#%")},2000)，让loading这个div改变大小来模拟那个进度条。但是每次执行都是先执行完servlet后，再启动这个进度条的显示，进行中和完成的动作。我猜想是不是因为ajax是异步执行的，所以必须等这个servlet执行完，才能开始处理js写的那个进度条？