jQuery ajax —— 一些细节以及主函数扩展出来的方法
2013-03-25 07:27 Justany_WhiteSnow 阅读(9667) 评论(2) 编辑 收藏 举报上一篇文章,讲解了jQuery.ajax函数。这篇文章将其他一些细节补充完。下一篇文章则开始讲解,jQuery是如何将script动态载入、XMLHttpRequest、JSONP一起包装进jQuery.ajax里的。
jQuery.ajaxSetup
我们可以从主函数看出,参数是通过jQuery.ajaxSetup产生的:
// 通过jQuery.ajaxSetup改造参数对象 s = jQuery.ajaxSetup( {}, options ),
那么jQuery.ajaxSetup在干些什么呢?
jQuery.ajaxSetup = function( target, settings ) { // 如果有参数 return settings ? // 创建一个设置对象,先将jQuery.ajaxSettings的属性放进去, // 然后将参数也放进去 ajaxExtend( ajaxExtend( target, jQuery.ajaxSettings ), settings ) : // 并将设置对象的属性放进jQuery.ajaxSettings对象里 ajaxExtend( jQuery.ajaxSettings, target ); };
ajaxExtend
ajaxExtend和jQuery.extend有一些不同,避免有些不需要深复制的属性进行深复制。
function ajaxExtend( target, src ) { var key, deep, flatOptions = jQuery.ajaxSettings.flatOptions || {}; // 遍历src对象中的所有key for ( key in src ) { // 如果值不是undefined if ( src[ key ] !== undefined ) { // 判断是不是不需要深复制的,如果不需要深复制,将属性直接写进target, // 否则写进deep里存起来 // 我们可以从jQuery.ajaxSettings.flatOptions看到, // 实际上不需要深复制的是url和context ( flatOptions[ key ] ? target : ( deep || (deep = {}) ) )[ key ] = src[ key ]; } } // 如果deep不是undefined,证明需要深复制 if ( deep ) { // 开始深复制 jQuery.extend( true, target, deep ); } // 返回target return target; }
ajaxHandleResponses
主体函数中response是通过ajaxHandleResponses来处理的:
// 得到响应数据 if ( responses ) { // 通过ajaxHandleResponses处理数据 response = ajaxHandleResponses( s, jqXHR, responses ); }
我们来看看该函数干了些什么。
function ajaxHandleResponses( s, jqXHR, responses ) { var ct, type, finalDataType, firstDataType, contents = s.contents, dataTypes = s.dataTypes, responseFields = s.responseFields; // 将responseXXX填入jqXHR指定位置,也就是responseXML或者responseText // 其中jqXHR.xml对应responseXML,jqXHR.text对应responseText for ( type in responseFields ) { if ( type in responses ) { jqXHR[ responseFields[type] ] = responses[ type ]; } } // 删除掉通配dataType,得到返回的Content-Type while( dataTypes[ 0 ] === "*" ) { dataTypes.shift(); if ( ct === undefined ) { ct = s.mimeType || jqXHR.getResponseHeader("Content-Type"); } } // 看看是不是我们能处理的Content-Type,比如图片这类二进制类型就不好处理了 if ( ct ) { // 实际上能处理的就是text、xml和json for ( type in contents ) { if ( contents[ type ] && contents[ type ].test( ct ) ) { // 如果是这三种类型,则推入dataTypes里 dataTypes.unshift( type ); break; } } } // 如果dataTypes是我们想要的,也就是text、xml、json if ( dataTypes[ 0 ] in responses ) { // 则最终dataType就是这个了 finalDataType = dataTypes[ 0 ]; // 否则 } else { // 尝试转换成我们要的dataType for ( type in responses ) { // 如果dataTypes[ 0 ]不存在,则直接用type作为最终dataType // 否则,看看能不能转换,能的话就用type作为最终dataType if ( !dataTypes[ 0 ] || s.converters[ type + " " + dataTypes[0] ] ) { finalDataType = type; break; } // 保存第一个type if ( !firstDataType ) { firstDataType = type; } } // 用最终dataType或者用第一个type finalDataType = finalDataType || firstDataType; } // 如果有最终dataType if ( finalDataType ) { // 如果最终dataType不是dataTypes[ 0 ] if ( finalDataType !== dataTypes[ 0 ] ) { // 将finalDataType推入dataTypes队列里 dataTypes.unshift( finalDataType ); } // 返回responses对应的finalDataType数据 return responses[ finalDataType ]; } }
jQuery.fn.load
实际上有两个jQuery.fn.load,一个是类似于onload的方法,另一个则是载入指定html页面。
前一个是jQuery.fn.on的简单扩展,而后面一个则是使用jQuery.ajax方法的扩展。
jQuery.fn.load = function( url, params, callback ) { // 如果url不是string,且_load存在 // 证明这是onload方法,则调用保存的_load方法 if ( typeof url !== "string" && _load ) { return _load.apply( this, arguments ); } var selector, type, response, self = this, off = url.indexOf(" "); // 看看是不是载入指定元素,比如参数是'ajax/test.html #container' if ( off >= 0 ) { // 分隔出需要载入的元素 selector = url.slice( off, url.length ); // 分隔出真正的url url = url.slice( 0, off ); } // 模拟重载 if ( jQuery.isFunction( params ) ) { // 如果是函数那么就当这个是回调函数 callback = params; params = undefined; // 如果参数是objects,那么定义type是POST } else if ( params && typeof params === "object" ) { type = "POST"; } // 如果有需要修改的元素,开始请求 if ( self.length > 0 ) { jQuery.ajax({ url: url, // 如果type为undefined,那么就会缺省为GET方法 type: type, dataType: "html", data: params // 完成后回调 }).done(function( responseText ) { // 保存reponse response = arguments; // 对元素写入html // 如果selector存在 self.html( selector ? // 先用一个div来存储整个html页面的DOM,在找到selector的相关html jQuery("<div>").append( jQuery.parseHTML( responseText ) ).find( selector ) : // 否则直接用responseText responseText ); // 如果回调函数存在,则回调 }).complete( callback && function( jqXHR, status ) { self.each( callback, response || [ jqXHR.responseText, status, jqXHR ] ); }); } return this; };
jQuery.get & jQuery.post
这两个方法实际上就是通过jQuery.ajax扩展而来的。
// 加上get和post方法 jQuery.each( [ "get", "post" ], function( i, method ) { // jQuery.get或jQuery.post为 jQuery[ method ] = function( url, data, callback, type ) { // 模拟重载 if ( jQuery.isFunction( data ) ) { type = type || callback; callback = data; data = undefined; } // 利用jQuery.ajax完成任务 return jQuery.ajax({ url: url, type: method, dataType: type, data: data, success: callback }); }; });
jQuery.getScript & jQuery.getJSON
jQuery.getScript和jQuery.getJSON则是由jQuery.get扩展而来的。
jQuery.getScript = function( url, callback ) { return jQuery.get( url, undefined, callback, "script" ); };
jQuery.getJSON = function( url, data, callback ) { return jQuery.get( url, data, callback, "json" ); }