关于jQuery的ajax的源码的dataType解读

时间:2023-03-09 20:16:19
关于jQuery的ajax的源码的dataType解读

  $.ajax其实底层还是用的XMLHttpRequest,对于加载数据的格式datatype有:xml、text、html、json、jsonp、script。

其中xml、text不需要处理,直接使用原生的responseXML、responseText。对于html、json其实也是用responseText接收的,对于json格式,jquery拿到responseText后会预先用JSON.parse()去格式化一下json数据再传给回调函数。

对于jsonp和script的,其实不走xhr对象,直接使用script标签。但是在使用datatype=script之前,jquery还是做了判断,只有跨域请求才会走<script>标签。

具体判断如下:

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" ) ) )
);

此处代码会判断(请求的url===location.href)。如果不等于,相当于跨域,jquery会主动判断为跨域请求,使用script标签进行处理。如下代码:

jQuery.ajaxTransport( "script", function( s ) {

    // This transport only deals with cross domain requests
if ( s.crossDomain ) {//jquery判断是否跨域,跨域才会添加script标签 var script,
head = document.head || jQuery( "head" )[ 0 ] || document.documentElement; return { send: function( _, callback ) { script = document.createElement( "script" ); script.async = true; if ( s.scriptCharset ) {
script.charset = s.scriptCharset;
} script.src = s.url; // Attach handlers for all browsers
script.onload = script.onreadystatechange = function( _, isAbort ) { if ( isAbort || !script.readyState || /loaded|complete/.test( script.readyState ) ) { // Handle memory leak in IE
script.onload = script.onreadystatechange = null; // Remove the script
if ( script.parentNode ) {
script.parentNode.removeChild( script );
} // Dereference the script
script = null; // Callback if not abort
if ( !isAbort ) {
callback( 200, "success" );
}
}
}; // Circumvent IE6 bugs with base elements (#2709 and #4378) by prepending
// Use native DOM manipulation to avoid our domManip AJAX trickery
head.insertBefore( script, head.firstChild );
}, abort: function() {
if ( script ) {
script.onload( undefined, true );
}
}
};
}
} );

  同时在请求之前,jquery还做了一些事情。

header里写了:

X-Requested-With = "XMLHttpRequest";

If-Modified-Since = url;

Content-Type = application/x-www-form-urlencoded; 这个是让ajax提交模拟form表单提交的数据,从浏览器端看到的是如下:关于jQuery的ajax的源码的dataType解读关于jQuery的ajax的源码的dataType解读

关于jQuery的ajax的源码的dataType解读