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.
- jQuery源码分析之load方法
- jQuery源码分析之blur focus focusin focusout load resize scroll unload click dblclick等方法
- jQuery源码分析之on方法
- jQuery源码分析之css方法
- jQuery源码分析之noConflict方法
- jQuery源码分析之init方法
- jQuery源码分析之ready方法
- jQuery源码分析之parseHTML方法
- jQuery源码分析之parseJSON方法
- jQuery源码分析之ajaxPrefilters方法
- jQuery源码分析之$.ajax方法
- jQuery Ajax之load()方法
- jQuery Ajax之load()方法
- jQuery源码分析之jQuery.event.remove方法
- jQuery源码分析之jQuery.event.fix方法五问
- jQuery源码分析之jQuery.param方法详解
- jQuery源码分析之removeAttr方法和attr方法
- jQuery源码分析之buildFragment方法和clone方法
- 自定义控件其实很简单 八
- 网桥和交换机的区别
- start_with connect_by_prior
- ssh登录navicat mysql报错问题
- Mybatis的if test字符串比较问题
- jQuery源码分析之load方法
- Android学习笔记之AndroidManifest.xml文件解析
- 为什么我们可以在非UI线程中更新UI
- css3背景渐变颜色linear-gradient(IE兼容)
- TextView字体中间加横线
- JavaScript高级程序设计之DOM 扩展之专有扩展之children属性第11.4.2讲
- MTD flash 驱动
- WSOP欧洲赛主赛第一日:Hellmuth出局
- JDBC之数据类型和事务