$.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表单提交的数据,从浏览器端看到的是如下: