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

Posted 2020-07-22 会飞的鱼儿

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