jQuery-AJAX模块解析-request部分

说好的讲解ajax模块来着的，讲好的事我从来不骗人~(虽然拖了比较久，不过这是迟来的爱

)

首先来看下传统的Ajax请求代码：

function doAjax(config){
var url = config.url,
complete = config.complete,
xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('post', url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
complete(xhr.responseText);
}
}
}
xhr.send(config.data || null);
return xhr;
}

Ajax请求的流程一般为：
1、使用new XMLHttpRequest()或new ActiveXObject()插件的方式创建xhr对象。

2、通过xhr.open(...)的方式建立连接。

3、使用xhr.setRequestHeader(..)设置请求头信息

4、监听onreadystatechange事件，注册回调函数处理数据。

5、xhr.send(...)发生请求。

上面就是ajax的简单封装了，不过这么简陋的代码投入到生产中一般会被人打死。可以优化的地方太多，比如：提前浏览器特性检测、良好的API接口，对不同业务需求进行Ajax请求缓存优化等等，再如我们实际开发中会遇到很多问题：

跨域
json的格式
dataType
AJAX乱码问题
页面缓存
状态的跟踪
不同平台兼容

相信任何一个经验丰富的开发者都有遇到过上面的问题，每一个问题都令人头疼，所以得感谢jQuery提供的Ajax模块（jQuery大法好~）。
看下jQuery的ajax请求的优雅写法：

$.post(url, params).then(function(){
console.log('done');
}, function(){
console.log('fail');
});

不错！jQuery的接口留的就是这么优雅。真想给jQuery点32个赞~

首先因为jQuery的模块写的比较复杂（1200多行呢。。。），所以本篇blog只讲解Ajax请求的部分，response部分留到下次讲。

以下仅代表本人拙见，有错误或疑问之处欢迎之处~

jQuery的ajax的request部分应该有：预过滤器（ajaxPrefilter）、请求分发器（ajaxTransport）、json和script类型处理、jsonp的实现、请求头信息的处理和jQuery.ajax这个主方法。

先看ajaxPrefilter和ajaxTransport的构造器：

//addToPrefiltersOrTransports作为jQuery.ajaxPrefilter和jQuery.ajaxTransport的构造器，他们的方法都是通过addToPrefiltersOrTransports来构建一个闭包生成的函数，用于维持传进来的structure
// Base "constructor" for jQuery.ajaxPrefilter and jQuery.ajaxTransport
function addToPrefiltersOrTransports( structure ) {

// dataTypeExpression is optional and defaults to "*"
return function( dataTypeExpression, func ) {

if ( typeof dataTypeExpression !== "string" ) {
func = dataTypeExpression;
dataTypeExpression = "*";
}

var dataType,
i = 0,
dataTypes = dataTypeExpression.toLowerCase().match( rnotwhite ) || [];

if ( jQuery.isFunction( func ) ) {
// For each dataType in the dataTypeExpression
while ( (dataType = dataTypes[i++]) ) {
// Prepend if requested
if ( dataType.charAt( 0 ) === "+" ) {
dataType = dataType.slice( 1 ) || "*";
(structure[ dataType ] = structure[ dataType ] || []).unshift( func );

// Otherwise append
} else {
//structure的dataType列表中push对应的过滤器处理函数来
(structure[ dataType ] = structure[ dataType ] || []).push( func );
}
}
}
};
}

ajaxPrefilter的API文档是这么写的：描述: 在每个请求之前被发送和

$.ajax()

处理它们前处理，设置自定义Ajax选项或修改现有选项。

ajaxTransport的API文档是这么写的：描述: 创建一个对象，用于处理Ajax数据的实际传输。

很明显可以看到这两个方法只是分别往对应的prefilters和transports的dataType中添加对应的处理函数func。

而他们进行探测的方法是inspectPrefiltersOrTransports：

//inspectPrefiltersOrTransports是一个prefilters和transports的探测器
// Base inspection function for prefilters and transports
function inspectPrefiltersOrTransports( structure, options, originalOptions, jqXHR ) {
//options为$.ajaxSettings
var inspected = {},
//是否探测transports
seekingTransport = ( structure === transports );

function inspect( dataType ) {
var selected;
//防止重复探测
inspected[ dataType ] = true;
//fire该structure[ dataType ]中的所有处理函数
jQuery.each( structure[ dataType ] || [], function( _, prefilterOrFactory ) {
var dataTypeOrTransport = prefilterOrFactory( options, originalOptions, jqXHR );
if ( typeof dataTypeOrTransport === "string" && !seekingTransport && !inspected[ dataTypeOrTransport ] ) {
options.dataTypes.unshift( dataTypeOrTransport );
//递归探测处理函数返回的dataType，防止后添加的处理函数没有执行
inspect( dataTypeOrTransport );
return false;
} else if ( seekingTransport ) {
//如果dataTypeOrTransport可转为true，则停止探测
return !( selected = dataTypeOrTransport );
}
});
return selected;
}

return inspect( options.dataTypes[ 0 ] ) || !inspected[ "*" ] && inspect( "*" );
}

ajaxPrefilter和ajaxTransport初始化给部分类型添加了对应的过滤器和分发器，如下：

// Handle cache's special case and global
//处理缓存选项和设置跨域请求方式、禁止fire全局events
jQuery.ajaxPrefilter( "script", function( s ) {
if ( s.cache === undefined ) {
s.cache = false;
}
if ( s.crossDomain ) {
s.type = "GET";
s.global = false;
}
});
// Detect, normalize options and install callbacks for jsonp requests
//像普通的方式处理json、jsonp格式的数据
jQuery.ajaxPrefilter( "json jsonp", function( s, originalSettings, jqXHR ) {

var callbackName, overwritten, responseContainer,
jsonProp = s.jsonp !== false && ( rjsonp.test( s.url ) ?
"url" :
typeof s.data === "string" && !( s.contentType || "" ).indexOf("application/x-www-form-urlencoded") && rjsonp.test( s.data ) && "data"
);

// Handle iff the expected data type is "jsonp" or we have a parameter to set
if ( jsonProp || s.dataTypes[ 0 ] === "jsonp" ) {

//略...

// Delegate to script
return "script";
}
});

jQuery.ajaxTransport(function( options ) {
// Cross domain only allowed if supported through XMLHttpRequest
//返回一个处理非跨域的transport对象
if ( !options.crossDomain || support.cors ) {

var callback;

return {
send: function( headers, complete ) {
//略...
},

abort: function() {
if ( callback ) {
callback( undefined, true );
}
}
};
}
});

// Bind script tag hack transport
jQuery.ajaxTransport( "script", function(s) {

// This transport only deals with cross domain requests
//返回一个处理跨域的transport对象
if ( s.crossDomain ) {

var script,
head = document.head || jQuery("head")[0] || document.documentElement;

return {

send: function( _, callback ) {

//略...
},

abort: function() {
if ( script ) {
script.onload( undefined, true );
}
}
};
}
});

jQuery
c537
提供了一系列的预过滤器和分发器来处理常见dataType（如：script、json、jsonp）和跨域问题，在ajax发起请求之前做过滤处理，然后获取正确的transport对象来进行分发请求。

以上就是ajax的预过滤器和请求分发器了，jQuery通过这种预处理的方式将不同dataType的请求都提供了统一的处理接口，通过inspect transports获得正确的transport对象，然后使用统一的send接口发送请求，使用hack的方式处理了跨域请求，对内部$.ajax主方法完全解耦分离，还顺带给用户提供了过滤器和分发器功能。真是高明。

ajax的头信息就简单的说下好了，jqXHR(fake xhr)提供了一系列的方法来设置、获取头信息，另外在ajaxSettings中提供了cache选项来设置是否从缓存中获取数据。

而ajax主方法自从jQuery1.5之后就使用了Deferred延迟对象重写了：

ajax: function( url, options ) {

// If url is an object, simulate pre-1.5 signature
if ( typeof url === "object" ) {
options = url;
url = undefined;
}

// Force options to be an object
options = options || {};

var //一大堆变量我给删了
s = jQuery.ajaxSetup( {}, options ),
// Callbacks context
callbackContext = s.context || s,
// Context for global events is callbackContext if it is a DOM node or jQuery collection
globalEventContext = s.context && ( callbackContext.nodeType || callbackContext.jquery ) ?
jQuery( callbackContext ) :
jQuery.event,
// Deferreds，主延迟对象，将jqXHR做成一个promise对象
deferred = jQuery.Deferred(),
completeDeferred = jQuery.Callbacks("once memory"),
// Fake xhr
jqXHR = {
//一大堆方法我给删了
};

// Attach deferreds
//给jqXHR提供方便的API接口给用户
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 (#5866: IE7 issue with protocol-less urls)
// Handle falsy url in the settings object (#10093: consistency with old signature)
// We also use the url parameter if available
s.url = ( ( url || s.url || ajaxLocation ) + "" ).replace( rhash, "" ).replace( rprotocol, ajaxLocParts[ 1 ] + "//" );

// Alias method option to type as per ticket #12004
s.type = options.method || options.type || s.method || s.type;

// Extract dataTypes list
s.dataTypes = jQuery.trim( s.dataType || "*" ).toLowerCase().match( 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
if ( s.data && s.processData && typeof s.data !== "string" ) {
s.data = jQuery.param( s.data, s.traditional );
}
//进行ajax过滤处理
// Apply prefilters
inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );

// If request was aborted inside a prefilter, stop there
if ( state === 2 ) {
return jqXHR;
}

// We can fire global events as of now if asked to
// Don't fire events if jQuery.event is undefined in an AMD-usage scenario (#15118)
//是否触发全局事件
fireGlobals = jQuery.event && s.global;

// Watch for a new set of requests
//一组ajax请求时，在第一个ajax发起时触发ajaxStart事件
if ( fireGlobals && jQuery.active++ === 0 ) {
jQuery.event.trigger("ajaxStart");
}

// Uppercase the type
s.type = s.type.toUpperCase();

//设置头信息和判断缓存的也给我删了

// Allow custom headers/mimetypes and early 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
//添加ajaxSettings中配置的对应函数
for ( i in { success: 1, error: 1, complete: 1 } ) {
jqXHR[ i ]( s[ i ] );
}

// Get transport
//获得transport对象
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
//触发ajaxSend事件
if ( fireGlobals ) {
globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] );
}
// Timeout
if ( s.async && s.timeout > 0 ) {
timeoutTimer = setTimeout(function() {
jqXHR.abort("timeout");
}, s.timeout );
}

try {
state = 1;
//done方法作为请求完成的complete函数调用
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;

//response的处理操作又给我删了
// Success/Error
//fire对应的回调列表
if ( isSuccess ) {
deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
} else {
deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );
}

// Status-dependent callbacks
jqXHR.statusCode( statusCode );
statusCode = undefined;

//触发ajaxSuccess或者ajaxError事件
if ( fireGlobals ) {
globalEventContext.trigger( isSuccess ? "ajaxSuccess" : "ajaxError",
[ jqXHR, s, isSuccess ? success : error ] );
}

// Complete
completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );

//触发ajaxComplete事件
if ( fireGlobals ) {
globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
// Handle the global AJAX counter
if ( !( --jQuery.active ) ) {
jQuery.event.trigger("ajaxStop");
}
}
}
//返回jqXHR对象，该对象是一个Promise对象
return jqXHR;
}

首先给jqXHR添加对应的接口，设置头信息和进行过滤操作，然后获取正确的transport对象，使用transport的send方法发起请求，，最后返回jqXHR。在done方法中处理response，最后延迟对象触发成功或失败的函数列表。其中在对应的时机触发对应的全局事件。

以上就是jQuery的ajax方法比较完整的流程了。

ajax的response部分和其他的零散部分留到下次再讲。

允许转载，请带上出处http://blog.csdn.net/z905951024 by denied.