摘要:上文我们已经介绍了的几个副函数和,本文主要介绍主函数的内部实现我们一般调用有三种写法第一种写法第二种写法第三种写法,也就是的写法第一种和第二种仅仅是的位置不同,内部会判断传入的第一个参数是否是对象来进行判断使用的写法,需要转换成的写法内部
上文我们已经介绍了ajax 的几个副函数ajaxPrefilter 和ajaxTransport ,本文主要介绍ajax 主函数的内部实现
我们一般调用ajax 有三种写法
</>复制代码
// 第一种写法
$.ajax({
url:url,
data:{...},
...
success:function(){},
error:function(){}
})
// 第二种写法
$.ajax(url, {
data:{...},
...
success:function(){},
error:function(){}
})
// 第三种写法,也就是deferred的写法
$.ajax(url, {
data:{...},
...
}).done().fail();
第一种和第二种仅仅是url 的位置不同,ajax 内部会判断传入ajax 的第一个参数是否是对象来进行判断
</>复制代码
// If url is an object, simulate pre-1.5 signature
// 使用 $.ajax({url:url,data:data}) 的写法,需要转换成 $.ajax(url, {data:data}); 的写法
if ( typeof url === "object" ) {
options = url;
url = undefined;
}
ajax 内部通过新增jqXHR 对象来增加ajax 的功能,例如statusCode 根据ajax 中设置相应的http 状态码对象的函数来实现当响应的状态码对应到设置的状态码时,触发相应的函数
</>复制代码
// Fake xhr
// 模拟出来的 ajax ,增加原生ajax的功能
jqXHR = {
readyState: 0,
// Builds headers hashtable if needed
getResponseHeader: function( key ) {},
// Raw string
getAllResponseHeaders: function() {},
// Caches the header
setRequestHeader: function( name, value ) { },
// Overrides response content-type header
overrideMimeType: function( type ) {},
// Status-dependent callbacks
// 状态码对应后,如何触发相关的函数
statusCode: function( map ) {},
// Cancel the request
// ajax时间超过timeout响应的时间时,就触发 abort 函数
abort: function( statusText ) {}
};
而ajax 的第三种写法,就是通过将jqXHR 添加到deferred 中,所以deferred 的所有方法,ajax 也可以同样使用
</>复制代码
// Deferreds
// ajax 可以使用两种方式来写,链式调用的话,就需要使用 deferreds ,这样就能够触发是否是 done还是其他状态来触发相应的事件
deferred = jQuery.Deferred(),
completeDeferred = jQuery.Callbacks("once memory"),
// Attach deferreds
// 把deferred的方法,添加到 模拟的 jqXHR 中
deferred.promise( jqXHR ).complete = completeDeferred.add;
jqXHR.success = jqXHR.done;
jqXHR.error = jqXHR.fail;
上一文中介绍了ajax 的addPrefilters 函数,在ajax 发送数据之前,会通过inspectPrefiltersOrTransports( prefilters, s, options, jqXHR ); 调用所有的预处理函数,发送数据时,通过transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR ); 来发送数据,transports 内会根据是否跨域选择哪个send/abort 函数,返回的结果,通过done() 函数进行处理
</>复制代码
// Main method
ajax: function( url, options ) {
// If url is an object, simulate pre-1.5 signature
// 使用 $.ajax({url:url,data:data}) 的写法,需要转换成 $.ajax(url, {data:data}); 的写法
if ( typeof url === "object" ) {
options = url;
url = undefined;
}
// Force options to be an object
options = options || {};
var transport,
// URL without anti-cache param
cacheURL,
// Response headers
responseHeadersString,
responseHeaders,
// timeout handle
timeoutTimer,
// Cross-domain detection vars
parts,
// To know if global events are to be dispatched
fireGlobals,
// Loop variable
i,
// Create the final options object
s = jQuery.ajaxSetup( {}, options ), // 通过把options的参数放到一个新对象中,这样就所有的参数都只会影响当前的ajax
// Callbacks context
callbackContext = s.context || s, // 执行的上下文,根据命名,应该是回调函数的上下文
// Context for global events is callbackContext if it is a DOM node or jQuery collection
// 这里应该是触发 ajax 的全局事件,如果有设置上下文context,那么就能够使用 jQuery( callbackContext ) ,也就是某个元素来绑定
// 否则,就使用默认的 jQuery底层的event来调用
globalEventContext = s.context && ( callbackContext.nodeType || callbackContext.jquery ) ?
jQuery( callbackContext ) :
jQuery.event,
// Deferreds
// ajax 可以使用两种方式来写,链式调用的话,就需要使用 deferreds ,这样就能够触发是否是 done还是其他状态来触发相应的事件
deferred = jQuery.Deferred(),
completeDeferred = jQuery.Callbacks("once memory"),
// Status-dependent callbacks
// 状态码对应的回调操作,和success 事件同级别 statusCode: {404:function(){alert("页面不存在")}
statusCode = s.statusCode || {},
// Headers (they are sent all at once)
requestHeaders = {},
requestHeadersNames = {},
// The jqXHR state
state = 0,
// Default abort message
strAbort = "canceled",
// Fake xhr
// 模拟出来的 ajax ,原生的还不够强大
jqXHR = {
readyState: 0,
// Builds headers hashtable if needed
getResponseHeader: function( key ) {
var match;
if ( state === 2 ) {
if ( !responseHeaders ) {
responseHeaders = {};
while ( (match = rheaders.exec( responseHeadersString )) ) {
responseHeaders[ match[1].toLowerCase() ] = match[ 2 ];
}
}
match = responseHeaders[ key.toLowerCase() ];
}
return match == null ? null : match;
},
// Raw string
getAllResponseHeaders: function() {
return state === 2 ? responseHeadersString : null;
},
// Caches the header
setRequestHeader: function( name, value ) {
var lname = name.toLowerCase();
if ( !state ) {
name = requestHeadersNames[ lname ] = requestHeadersNames[ lname ] || name;
requestHeaders[ name ] = value;
}
return this;
},
// Overrides response content-type header
overrideMimeType: function( type ) {
if ( !state ) {
s.mimeType = type;
}
return this;
},
// Status-dependent callbacks
// 状态码对应后,如何触发相关的函数
statusCode: function( map ) {
var code;
if ( map ) {
if ( state < 2 ) {
for ( code in map ) {
// Lazy-add the new callback in a way that preserves old ones
statusCode[ code ] = [ statusCode[ code ], map[ code ] ];
}
} else {
// Execute the appropriate callbacks
jqXHR.always( map[ jqXHR.status ] );
}
}
return this;
},
// Cancel the request
// ajax时间超过timeout响应的时间时,就触发 abort 函数
abort: function( statusText ) {
var finalText = statusText || strAbort;
if ( transport ) {
transport.abort( finalText );
}
done( 0, finalText );
return this;
}
};
// Attach deferreds
// 把deferred的方法,添加到 模拟的 jqXHR 中
deferred.promise( jqXHR ).complete = completeDeferred.add;
jqXHR.success = jqXHR.done;
jqXHR.error = jqXHR.fail;
// Remove hash character (#7531: and string promotion)
// Add protocol if not provided (prefilters might expect it)
// Handle falsy url in the settings object (#10093: consistency with old signature)
// We also use the url parameter if available
// 把地址中 hash 设置为空,因为在ajax中,hash值是没有用处的,如果地址中有//,就替换成 http:// 这样的标准写法
s.url = ( ( url || s.url || ajaxLocation ) + "" ).replace( rhash, "" )
.replace( rprotocol, ajaxLocParts[ 1 ] + "//" ); // 如果地址写成 //data.php 就会转换成 http://data.php
// Alias method option to type as per ticket #12004
// get/post 也可以使用 method 或者是 type
s.type = options.method || options.type || s.method || s.type;
// Extract dataTypes list
// text html json 如果这样写 dataType,就需要转换成一个集合
s.dataTypes = jQuery.trim( s.dataType || "*" ).toLowerCase().match( core_rnotwhite ) || [""];
// A cross-domain request is in order when we have a protocol:host:port mismatch
// 检测是否跨域
if ( s.crossDomain == null ) {
parts = rurl.exec( s.url.toLowerCase() );
s.crossDomain = !!( parts &&
( parts[ 1 ] !== ajaxLocParts[ 1 ] || parts[ 2 ] !== ajaxLocParts[ 2 ] ||
( parts[ 3 ] || ( parts[ 1 ] === "http:" ? "80" : "443" ) ) !==
( ajaxLocParts[ 3 ] || ( ajaxLocParts[ 1 ] === "http:" ? "80" : "443" ) ) )
);
}
// Convert data if not already a string
// 处理使用 ajax 传递的数据
if ( s.data && s.processData && typeof s.data !== "string" ) {
s.data = jQuery.param( s.data, s.traditional );
}
// Apply prefilters,
// 这时,触发所有的预处理函数
// s 就是 ajax 所有的参数, options 开发者传进来的参数
inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );
// If request was aborted inside a prefilter, stop there
// 如果在 prefilter 里面的请求就被终止了,就放回当前对象
if ( state === 2 ) {
return jqXHR;
}
// We can fire global events as of now if asked to
fireGlobals = s.global;
// Watch for a new set of requests
// 全局事件触发,这时候没有使用具体的元素,直接使用的默认是 document 触发 $(document).on("ajaxStart",function(){}),而不是$("div").on("ajaxStart",function(){})
if ( fireGlobals && jQuery.active++ === 0 ) {
jQuery.event.trigger("ajaxStart");
}
// Uppercase the type
s.type = s.type.toUpperCase();
// Determine if request has content
// rnoContent 为 get/head ,就是使用 ajax 的时候,把数据加到网址的后面
s.hasContent = !rnoContent.test( s.type );
// Save the URL in case we"re toying with the If-Modified-Since
// and/or If-None-Match header later on
cacheURL = s.url;
// More options handling for requests with no content
if ( !s.hasContent ) {
// If data is available, append data to url
if ( s.data ) {
cacheURL = ( s.url += ( ajax_rquery.test( cacheURL ) ? "&" : "?" ) + s.data );
// #9682: remove data so that it"s not used in an eventual retry
delete s.data;
}
// Add anti-cache in url if needed
// 如果不需要缓存,就会在url的后面加上时间戳,这样每次请求都是一次新的请求
if ( s.cache === false ) {
s.url = rts.test( cacheURL ) ?
// If there is already a "_" parameter, set its value
cacheURL.replace( rts, "$1_=" + ajax_nonce++ ) :
// Otherwise add one to the end
cacheURL + ( ajax_rquery.test( cacheURL ) ? "&" : "?" ) + "_=" + ajax_nonce++;
}
}
// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
// 如果数据没有变,就使用缓存的数据
if ( s.ifModified ) {
if ( jQuery.lastModified[ cacheURL ] ) {
jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ cacheURL ] );
}
if ( jQuery.etag[ cacheURL ] ) {
jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ cacheURL ] );
}
}
// Set the correct header, if data is being sent
if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {
jqXHR.setRequestHeader( "Content-Type", s.contentType );
}
// Set the Accepts header for the server, depending on the dataType
jqXHR.setRequestHeader(
"Accept",
s.dataTypes[ 0 ] && s.accepts[ s.dataTypes[0] ] ?
s.accepts[ s.dataTypes[0] ] + ( s.dataTypes[ 0 ] !== "*" ? ", " + allTypes + "; q=0.01" : "" ) :
s.accepts[ "*" ]
);
// Check for headers option
for ( i in s.headers ) {
jqXHR.setRequestHeader( i, s.headers[ i ] );
}
// Allow custom headers/mimetypes and early abort
// 如果停止 ajax 事件,就直接调用 abort 事件
if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || state === 2 ) ) {
// Abort if not done already and return
return jqXHR.abort();
}
// aborting is no longer a cancellation
strAbort = "abort";
// Install callbacks on deferreds
// 把 success 这些事件映射到 jqXHR 中
for ( i in { success: 1, error: 1, complete: 1 } ) {
jqXHR[ i ]( s[ i ] );
}
// Get transport
// 触发回调,ajax对象的send/abort方法,如果跨域,就在url内创建script的方法,如果不跨域,就使用通过原生ajax封装好的send/abort方法
transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );
// If no transport, we auto-abort
if ( !transport ) {
done( -1, "No Transport" );
} else {
jqXHR.readyState = 1;
// Send global event
if ( fireGlobals ) {
globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] );
}
// Timeout
// 如果请求的时间大于设置的timeout,就调用 abort 函数
if ( s.async && s.timeout > 0 ) {
timeoutTimer = setTimeout(function() {
jqXHR.abort("timeout");
}, s.timeout );
}
try {
state = 1;
// 调用transport封装好的 send 发送
transport.send( requestHeaders, done );
} catch ( e ) {
// Propagate exception as error if not done
if ( state < 2 ) {
done( -1, e );
// Simply rethrow otherwise
} else {
throw e;
}
}
}
// Callback for when everything is done
function done( status, nativeStatusText, responses, headers ) {
var isSuccess, success, error, response, modified,
statusText = nativeStatusText;
// Called once
if ( state === 2 ) {
return;
}
// State is "done" now
state = 2;
// Clear timeout if it exists
if ( timeoutTimer ) {
clearTimeout( timeoutTimer );
}
// Dereference transport for early garbage collection
// (no matter how long the jqXHR object will be used)
transport = undefined;
// Cache response headers
responseHeadersString = headers || "";
// Set readyState
jqXHR.readyState = status > 0 ? 4 : 0;
// Determine if successful
isSuccess = status >= 200 && status < 300 || status === 304;
// Get response data
// 然后jquery进行处理,得到合适的输出,可以通过使用 console.log来打印出 ajax 返回的数据,来看出是怎么处理的数据
// console.log(responses)
if ( responses ) {
response = ajaxHandleResponses( s, jqXHR, responses );
}
// console.log(responses)
// Convert no matter what (that way responseXXX fields are always set)
response = ajaxConvert( s, response, jqXHR, isSuccess );
// console.log(responses)
// If successful, handle type chaining
if ( isSuccess ) {
// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
// 是否需要使用缓存中的数据
if ( s.ifModified ) {
modified = jqXHR.getResponseHeader("Last-Modified");
if ( modified ) {
jQuery.lastModified[ cacheURL ] = modified;
}
modified = jqXHR.getResponseHeader("etag");
if ( modified ) {
jQuery.etag[ cacheURL ] = modified;
}
}
// if no content
if ( status === 204 || s.type === "HEAD" ) {
statusText = "nocontent";
// if not modified
} else if ( status === 304 ) {
statusText = "notmodified";
// If we have data, let"s convert it
} else {
statusText = response.state;
success = response.data;
error = response.error;
isSuccess = !error;
}
} else {
// We extract error from statusText
// then normalize statusText and status for non-aborts
error = statusText;
if ( status || !statusText ) {
statusText = "error";
if ( status < 0 ) {
status = 0;
}
}
}
// Set data for the fake xhr object
jqXHR.status = status;
jqXHR.statusText = ( nativeStatusText || statusText ) + "";
// Success/Error
// 通过返回的数据是否成功,来触发deferred 的resolveWith和rejectWith函数
if ( isSuccess ) {
deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
} else {
deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );
}
// Status-dependent callbacks
// 调用ajax返回的状态码,来触发开发者自己设置的http状态码的函数,
jqXHR.statusCode( statusCode );
statusCode = undefined;
// 如果设置了全局函数,根据ajax是否调用成功,来选择触发ajaxSuccess函数还是ajaxError函数
if ( fireGlobals ) {
globalEventContext.trigger( isSuccess ? "ajaxSuccess" : "ajaxError",
[ jqXHR, s, isSuccess ? success : error ] );
}
// Complete
completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );
// ajax 调用完成,触发全局函数 ajaxComplete,如果当前页全部的ajax都调用完成,就触发全局函数ajaxStop
if ( fireGlobals ) {
globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
// Handle the global AJAX counter
if ( !( --jQuery.active ) ) {
jQuery.event.trigger("ajaxStop");
}
}
}
// 整个 ajax 调用完后,返回的是 jqXHR 对象,就可以使用deferred的一系列方法 done,fail 等方法了
return jqXHR;
},
待续...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/94685.html
摘要:调用的情况下,我们通常用来请求数据的方法有前五种方法,在的实现中,本质上还是在调用第六种方法实现的单纯在源码中看前五个函数,代码量都很少,多一点也就是函数,涉及到了的写法,在调用成功时,对返回的数据使用内部方法进行渲 调用jQuery 的情况下,我们通常用来请求数据的方法有 $(element).load(url, callback) $.get(url, data, callbac...
摘要:通常的做法是,为它们指定回调函数。请求返回请求返回请求返回异步队列解耦异步任务和回调函数为模块队列模块事件提供基础功能。 前言 jQuery整体框架甚是复杂,也不易读懂,这几日一直在研究这个笨重而强大的框架。jQuery的总体架构可以分为:入口模块、底层模块和功能模块。这里,我们以jquery-1.7.1为例进行分析。 jquery的总体架构 16 (function( window,...
摘要:单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这决定了它只能是单线程,否则会带来很复杂的同步问题。小结本身是单线程的,并没有异步的特性。当异步函数执行时,回调函数会被压入这个队列。 走在前端的大道上 本篇将自己读过的相关 js异步 的文章中,对自己有启发的章节片段总结在这(会对原文进行删改),会不断丰富提炼总结更新。 概念 JS 是单线程的语言。 单线程就意味着...
摘要:今天同学去面试,做了两道面试题全部做错了,发过来给道典型的面试题前端掘金在界中,开发人员的需求量一直居高不下。 排序算法 -- JavaScript 标准参考教程(alpha) - 前端 - 掘金来自《JavaScript 标准参考教程(alpha)》,by 阮一峰 目录 冒泡排序 简介 算法实现 选择排序 简介 算法实现 ... 图例详解那道 setTimeout 与循环闭包的经典面...
摘要:选择的理由是一个用于现代浏览器的与大体兼容的库。环境搭建分析环境的搭建仅需要一个常规页面和原始代码一个常规页面打开的首页即可,在开发人员工具中即可使用原始代码本篇分析的代码参照,进入该代码分支中即可。 选择 Zepto 的理由 Zepto is a minimalist JavaScript library for modern browsers with a largely jQue...
阅读 1193·2023-04-25 17:28
阅读 3686·2021-10-14 09:43
阅读 4001·2021-10-09 10:02
阅读 1965·2019-08-30 14:04
阅读 3155·2019-08-30 13:09
阅读 3292·2019-08-30 12:53
阅读 2937·2019-08-29 17:11
阅读 1844·2019-08-29 16:58