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()进行了封装,属于第二层方法。