jQuery源码中的Ajax--load方法

　　jQueryObject.load()方法是jQuery中最为简单和常用的方法，能载入远程HTML代码幷插入到DOM中，其结构为：

jQueryObject.load(url [.data] [.callback])

　　各参数解释如下：

参数名称	类型	说明
url	String	请求HTML页面的URL地址
data(可选)	Object	发送至服务器的key/value数据
callback(可选)	Function	请求完成时的回调函数，无论请求成功或失败

　jQueryObject.load()方法的源码如下：（源码目录：jquery/src/ajax/load.js）

define( [
    "../core",
    "../core/parseHTML",
    "../ajax",
    "../traversing",
    "../manipulation",
    "../selector"
], function( jQuery ) {

"use strict";

/**
 * Load a url into a page
 */
jQuery.fn.load = function( url, params, callback ) {
    var selector, type, response,
        self = this,
        off = url.indexOf( " " );

    if ( off > -1 ) {
        selector = jQuery.trim( url.slice( off ) );
        url = url.slice( 0, off );
    }

    // If it's a function
    if ( jQuery.isFunction( params ) ) {

        // We assume that it's the callback
        callback = params;
        params = undefined;

    // Otherwise, build a param string
    } else if ( params && typeof params === "object" ) {
        type = "POST";
    }

    // If we have elements to modify, make the request
    if ( self.length > 0 ) {
        jQuery.ajax( {
            url: url,

            // If "type" variable is undefined, then "GET" method will be used.
            // Make value of this field explicit since
            // user can override it through ajaxSetup method
            type: type || "GET",
            dataType: "html",
            data: params
        } ).done( function( responseText ) {

            // Save response for use in complete callback
            response = arguments;

            self.html( selector ?

                // If a selector was specified, locate the right elements in a dummy div
                // Exclude scripts to avoid IE 'Permission Denied' errors
                jQuery( "<div>" ).append( jQuery.parseHTML( responseText ) ).find( selector ) :

                // Otherwise use the full result
                responseText );

        // If the request succeeds, this function gets "data", "status", "jqXHR"
        // but they are ignored because response was set above.
        // If it fails, this function gets "jqXHR", "status", "error"
        } ).always( callback && function( jqXHR, status ) {
            self.each( function() {
                callback.apply( this, response || [ jqXHR.responseText, status, jqXHR ] );
            } );
        } );
    }

    return this;
};

} );

　　整个源码的工作步骤如下：

• 定义变量selector、type、response、self、off。利用indexOf()方法获取“ ”（空格）在字符串Url中首次出现的位置，并将该位置赋值给off。其中的self指代调用节点本身，即为[object HTMLDocument]。
• 判断是否存在选择器。load方法可以通过URL参数指定选择符，语法结构为“Url selector”。trim()用于取出字符串前后的空格，slice()方法用于从已有的数组中返回选定的元素。
• 判断参数params是否一个方法，若是则存在三个参数，且请求类型为“post”，若不是，则为两个参数，且请求类型为“get”。
• $.ajax()方法是最底层的方法，是jQuery最底层的Ajax实现的，语法为：

$.ajax(options);

• 传入各个参数。
• 调用done()注册回调函数。使用this.html将Ajax的响应结果赋给节点里。
• 调用always()注册回调函数。其中使用了each()方法用于为每个匹配元素规定运行的函数。

 

　　*jQuery中$.done()方法在成功时执行，异常时不会执行；$.always()方法不论成功与否都会执行。

 

　　总的来说，jQueryObject.load()方法就是给$.ajax()进行了封装，属于第二层方法。