jQuery源码分析之load方法

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.

你可能感兴趣的:(jQuery源码分析之load方法)