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.