解决Ajax调用前后页面提示在IE和Chrome中不显示的问题 (solution to indicator wont appear during Ajax call on IE and Chrome)

开发一个页面，页面中的部分内容采用Ajax更新，在Ajax调用前，向页面中添加信息载入提示信息（一个旋转的动画图标），在Ajax调用后，从页面中除去该提示信息。流程如下：

添加提示 >> Ajax调用 >> 除去提示

在开发过程中发现，如果Ajax调用采用异步方式，调用时FF浏览器中不会出现提示，因为添加和除去提示的动作都与Ajax调用异步执行了，也就是说，没等Ajax调用完成，除去提示的语句就被执行了。因此尝试将Ajax调用方式改为同步（其实这是不好的），结果在FF中达到了预期的效果。

然而换到IE和Chrome中，提示依然不出现。经过调研，发现这是因为：同步调用的Ajax，在IE和Chrome中都会阻塞调用前的DOM更新（http://bugs.jquery.com/ticket/7464，http://bugs.jquery.com/ticket/8819）。尝试用setTimeout函数调用Ajax，依然不能解决问题。

继续调研，最终找到了解决方案：
1. Ajax调用方式设置为异步
2. 把添加提示和除去提示从Ajax调用语句的前后，分别转移到Ajax调用内的beforeSend和complete属性的函数中去
流程如下：


$.ajax({
            type : 'POST',
            url : url,
            async : true,
            beforeSend : function() {
             添加提示
            },
            complete : function() {
             除去提示
            },
            success : function(data) {
              ....
            }
          });


这样一来，把提示信息的处理交给了jQuery的.ajax函数，问题得到解决。

参考链接：
http://stackoverflow.com/questions/2227397/jquery-ajax-beforesend-and-complete-working-properly-on-firefox-but-not-on-ie8
http://stackoverflow.com/questions/5182466/ajax-requests-on-chrome-using-jquery-freezes-page-untill-they-all-complete