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

原文地址:https://www.cnblogs.com/freefish12/p/5564630.html