jQuery源码分析之load方法

来源:互联网 发布:2017流行网络红歌 编辑:程序博客网 时间:2024/05/22 15:30

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 functionif ( jQuery.isFunction( params ) ) {// We assume that it's the callbackcallback = 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 usedtype: 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 callbackresponse = 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 resultresponseText );//不管成功与否都会调用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.

0 0
原创粉丝点击