适当的为你的ajax添加上loading

好久没有写博客了，每天忙...唉

jquery的封装过的ajax用起来实在太方便了，我们再也不用写那么多考虑浏览器的问题，为我们节省了大量时间与精力。其实ajax用起来的体验确实不错，但最近忙的项目中我总感觉使用ajax数据还未完全返回到浏览器端时，稍稍枯燥的等待不舒服，所以用个loading感觉就好多了。

写了个loading的效果，因为时间关系，暂时只写了个很简单的模拟效果。

其实原理很简单，beforeSend的时候展现你的loading效果，complete的时候再移除或隐藏掉：

<mce:script type="text/javascript" src="http://www.google.com/jsapi" mce_src="http://www.google.com/jsapi"></mce:script><mce:script type="text/javascript"><!-- google.load('jquery','1.4');// --></mce:script><mce:script type="text/javascript"><!-- $(function(){$('a#testA').click(function(){$.ajax({beforeSend:function(){$('div#response').css({background:'white'});$('div#response img').css('display','inline');},complete:function(){ //其实这里如果有必要，我们也完全可以用setTimeout设置个稍稍的延时这样也许效果也会更好$('div#response img').css('display','none');},type:'GET',url:'http://www.google.com.hk/search',data:'q=cff',success:function(responseText){//alert(responseText);//$('div#response img').css('display','none');$('div#response').html(responseText);},error:function(){alert('error!');}});}); });// --></mce:script><mce:style><!--div#response{width:100%;height:1600px;border:1px solid green;}--></mce:style><style mce_bogus="1">div#response{width:100%;height:1600px;border:1px solid green;}</style><a id=testA href="#" mce_href="#">Test</a><pre><div id=response><img src="http://www.lavc.edu/virtualvalley/images/loading.gif" mce_src="http://www.lavc.edu/virtualvalley/images/loading.gif" style="display:none" mce_style="display:none"/></div>