zoukankan      html  css  js  c++  java
  • 关于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表单提交的数据,从浏览器端看到的是如下:

  • 相关阅读:
    cgroup开机自启动
    QPS
    Linux shell脚本的字符串截取
    设计模式 java
    kafka基本介绍
    Vagrant安装配置
    SuperMap空间数据处理与制图操作短视频汇总
    SuperMap 三维产品资料一览表
    SuperMap GIS资料-----云与Web端技术资料集锦
    世界地图和主要国家的 JSON 文件
  • 原文地址:https://www.cnblogs.com/freefish12/p/5564630.html
Copyright © 2011-2022 走看看