load方法源码分析:
jQuery.fn.load = function( url, params, callback ) {
//保存上一次的load事件句柄,如果传入的url不是string那么直接调用上一次的load函数!
if ( typeof url !== "string" && _load ) {
return _load.apply( this, arguments );
}
var selector, response, type,
//this为调用者
self = this,
//获取第一个空格
off = url.indexOf(" ");
//如果存在空格,URL="http://localhost:8080/qinl/a.action selector"
if ( off >= 0 ) {
//获取selector,表示只用特定的相应数据取代元素的innerHTML属性!
selector = jQuery.trim( url.slice( off, url.length ) );
//获取URL部分,URL部分和selector部分用空格隔开!
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
//如果params不是函数,如果第二个参数还是对象,那么表示用户自己传入了数据
//那么我们自己把数据提交方式设置为post!
} else if ( params && typeof params === "object" ) {
type = "POST";
}
// If we have elements to modify, make the request
//如果调用对象有DOM元素,那么底层调用ajax方法。我们知道ajax方法默认是get这在ajaxSettings里可以看到!
//获取到的数据类型是"html"
if ( self.length > 0 ) {
jQuery.ajax({
url: url,
// if "type" variable is undefined, then "GET" method will be used
type: type,
dataType: "html",
data: params
//成功调用done方法
}).done(function( responseText ) {
//我们知道ajax方法返回的对象是一个jqXHR对象,调用done方法表示向
//成功回调函数集合中添加一个回调函数!compelte表示往ajax封装的
//Callbacks中添加一个回调,该回调不管成功还是失败都是会执行的!
//在done方法里面的回调是:deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
//success = response.data;
//所以在done里面的第一个参数就是访问服务器获取到的数据!
// Save response for use in complete callback
response = arguments;
//如果没有selector那么直接把返回的数据放入到调用对象中间
//如果有selector,那么只是把返回的数据的特定部分放入到调用对象中间,通过find方法查找!
self.html( selector ?
// If a selector was specified, locate the right elements in a dummy div
// Exclude scripts to avoid IE 'Permission Denied' errors
//parseHTML没有传入的第二个参数,表示不包括script标签!
jQuery("<div>").append( jQuery.parseHTML( responseText ) ).find( selector ) :
// Otherwise use the full result
responseText );
//不管成功与否都会调用complete方法!
//调用complete方法的时候如果用户指定了回调函数,那么回调函数会修改为另外一个函数
//加入到完成回调集合里面。对调用对象每一个DOM都调用回调函数,为该函数传入的回调
//参数是:completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );
//也就是参数是调用done方法的参数,[ success, statusText, jqXHR ]
}).complete( callback && function( jqXHR, status ) {
self.each( callback, response || [ jqXHR.responseText, status, jqXHR ] );
});
}
return this;
};
总结:
(1)load()
函数用于从服务器加载数据,并使用返回的html内容替换当前匹配元素的内容。load()
函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式。load()
函数只会替换每个匹配元素的内部内容(innerHTML)。你还可以在URL字符串后面追加指定的选择器(与URL之间用空格隔开),以便于只使用加载的html文档中匹配选择器的部分内容来替换当前匹配元素的内容。如果该文档没有匹配选择器的内容,就使用空字符串("")来替换当前匹配元素的内容。如果当前jQuery对象没有匹配任何元素,则不会执行远程加载请求。
(2)load方法默认是get请求,因为底层调用的ajax,在ajaxSetting中指定了默认的请求方式是GET!
(3)parseHTML第二个参数默认是false表示script标签会被跳过,这里的第二个参数就是false。所以如果服务器端返回的数据包含了script标签这个标签会被忽略。当然,这时候表示传入了selector,表明:只是把返回的服务器数据的符合条件的部分添加到调用对象的DOM中!
(4)要弄清楚,ajax方法返回的是一个jqXHR对象,该对象是一个Deferred对象,通过done方法添加的回调会在ajax内部调用resolveWith的时候调用,通过complete添加的函数会在ajax内部调用fireWith的时候调用!但是complete方法会在不管成功还是失败都会调用的!
(5)调用complete方法可能有多次,因为在内部会对调用对象的每一个DOM对象都会调用。传入的参数默认是传递给done方法的参数! [ success, statusText, jqXHR ]如果没有调用done方法,如ajax请求失败,那么就会传入 [ jqXHR.responseText, status, jqXHR ]!
(6)在对jQuery.fn.load赋值为一个新的函数之前,我们通过_load保存了原来已经存在的load函数句柄!如果调用传入的URL不是string的时候调用早期的load函数!(难道是为了防止引入了低版本的jQuery)
ajaxStart等源码分析:(函数绑定)
jQuery.each( [ "ajaxStart", "ajaxStop", "ajaxComplete", "ajaxError", "ajaxSuccess", "ajaxSend" ], function( i, type ) {
jQuery.fn[ type ] = function( fn ) {
return this.on( type, fn );
};
});
不小心看到了这一个函数,也来看看把(返回元素的window对象):
function getWindow( elem ) {
return jQuery.isWindow( elem ) ?
elem :
elem.nodeType === 9 ?
elem.defaultView || elem.parentWindow :
false;
}
note:如果是window那么就是返回window;如果是document那么返回defaultView,该属性表示当前文档的window对象,如果defaultView不存在那么返回parentWindow;其它元素都返回false.