jQuery学习总结（四）

Ajax无疑是当今WEB开发的重要技术，也是目前RIA（富互联网应用）的主要实现方式之一。本文将在前几篇的基础上，介绍如何利用jQuery使得操作Ajax变得更方便，实现更强大的功能。
    就算到目前为止，Ajax的技术标准还是没有统一起来，主要体现在微软与非微软浏览器上面。虽然IE7之后提供了标准版本XHR（XMLHttpRequest）对象，但早期的IE6及以前版本则是另一种实现方式（XMLHTTP）。所以在使用Ajax之前都得先检测当前浏览器提供哪种对象，然后再进行后续的操作，相信有过这种经历的朋友都应该印象深刻。总之一句话，非常不爽！
    如今有了jQuery，使得操作Ajax变得极其简单！你不必再去关心当前是哪种浏览器，你只需要关注你的程序想实现什么功能。jQuery已经为我们处理好了浏览器（应该是当前大多数）的兼容问题，而且提供了很多很好用的方法来实现Ajax功能。
    jQuery提供了六种请求方式实现Ajax。load、getScript、getJSON、get、post、ajax。这里面getScript和getJSON是最上层的方法调用，get和post是倒数第二层调用，而ajax则是最底层的调用函数，所有的调用最终都会转换为调用ajax函数。如果对这段话存有疑惑的朋友请看下源码，不用完全看懂，只需要了解他们之间的调用顺序即可。另外load方法一般是用来加载页面内容到匹配的元素上。如果省略load方法的parametera参数，发送GET请求；如果有parametera参数，则是POST请求。如果想带参数又想发送GET请求怎么办呢？可以把参数写到url中。
    大象在这里建议并推荐大家采用$.ajax()方式来实现Ajax调用。一是这种方式最直接，效率最高；二是这种方式功能最强大；三是从写法来看，key:value（键值对）可以减少出错。当然了，我并不是强制不能使用其它方式，我只是善意的建议，根据具体的情况作出最适当的选择。
     记得在 jQuery学习总结（二） 最后第四部分，我用一个项目实例来说明如何利用$.ajax实现Ajax，下面进行详细讲解。
     先来看看$.ajax()函数常用参数说明，有个总体印象。


     在实际开发中，我们大多数情况下，只会使用这样几个参数:url、type、data、dataType、success。它们的使用频率是非常高的，基本上实现Ajax的调用，这样几个参数够用了。当然，jQuery还提供其它更丰富的参数，来满足你不同的需求。帮助文档中有完整的说明。
    在实际应用中，我们很多时候都会用到相同的参数，这时可以利用jQuery提供的属性工具，设置一组默认的Ajax属性简化开发。

$.ajaxSetup({
    type: 'POST',
    dataType: 'text',
    error:  function (xhr){
        $( " #errorDiv " ).html( " Ajax错误信息： " + xhr.status + ' ' + xhr.statusText);
    }
});

     这样设置后，将确保后面的每个Ajax调用（不包括load）使用这些默认值。
    接下来看看全局Ajax事件。注意global参数，它的默认值为true，所以会自动触发全局Ajax函数。如果显示的设为false，则不会触发。ajaxStart、ajaxSend、ajaxSuccess、ajaxError、ajaxComplete、ajaxStop等等。这些全局函数将在Ajax请求处理的不同阶段被触发。看个示例：

$( function (){
    $( " #success_msg " ).html( " 成功加载完成！ " ).hide();
    $( " #tip " ).html( " 图形正在加载... " ).hide();
    $( " #btn_show  " ).click(
         function (){
            $( " #div_info " ).empty();  // 清空它里面的内容
            $( " #tip " ).ajaxStart( function (info){
                $(info.target).show( 300 );
            }).ajaxStop( function (info){
                $(info.target).hide( 300 );
            });
            $( " #success_msg " ).ajaxSuccess( function (info){
                $(info.target).show().hide( 1000 );
            });
            $.ajax({
                type: " GET " ,
                url: " b.html " ,
                success: function (info){
                    $( " #div_info " ).append(info);
                }
            });
        }
    );
});

< div >< input  id ="btn_show"  type ="button"  value ="显示"   /></ div >
< div  id ="tip" ></ div >
< div  id ="success_msg" ></ div >
< div  id ="div_info" ></ div >

     b.html很简单，就是在body之间插入这一段代码。

< div  style ="background-color:#00FF00;width:300px;height:300px" ></ div >

     现在对这个例子做下说明。
    首先初始化时，对ID为success_msg和tip的两个DIV设置页面内容，并将其隐藏。再对显示按钮绑定事件，同时定义全局Ajax函数的回调函数，在不同的执行阶段，进行不同的结果处理。当触发时，会执行ajax调用，ajax方法执行后，会在div_info中显示出b.html中的内容，我这里是为了演示，所以将样式写到style属性中，大家不要这样写，应该采取我前面讲过的规范方法做。
     ajaxStart 是在发起Ajax请求时，并在XHR实例被创建之前执行。回调函数也在这个时候被触发，这里我让初始化时设置的tip信息在300毫秒内显示出来。
     ajaxStop 是在Ajax请求结束后，没有进行中的Ajax，任何回调函数执行完成之后调用。这里当请求结束后，让tip在300毫秒内隐藏起来。
     最后是请求成功的 ajaxSuccess 函数，先让它显示出来，再让它在1秒内逐渐隐藏。
     全局事件的回调函数都有一个对象参数，它有两个属性。
         type： 全局函数类型字符串，就是全局事件的名称。比如：ajaxStart、ajaxStop等。
         target： 被引用的DOM元素。比如：tip、success_msg等。
     除此之外还有一个XHR对象参数，这个参数只有ajaxStart和ajaxStop没有，其它的函数都有。
     到这里Ajax的内容基本上都说完了，剩下的就是实际运用。如果大家有什么好的想法和意见还请提出来，大象喜欢和各位交流经验，共同提高。以上代码是在jquery-1.2.6版本下测试通过。
    本文为菠萝大象原创，如要转载请注明出处。