jquery的http请求对响应内容的处理

写在前面：在学习XMLHttpRequest对象时碰到的一个问题，发现jquery的http请求会自动处理响应内容，变为开发者想要的数据，下面来看看吧：

实验案例:

  1. var xhr=new XMLHttpRequest();
  2. xhr.onreadystatechange=function(e){
  3.     console.log(e);
  4.     if(xhr.readyState==4 && xhr.status==200){
  5.         console.log(xhr);
  6.         console.log(xhr.responseText);
  7.     }
  8. }
  9. xhr.open('get','./data.json');
  10. xhr.send();

请求成功后的xhr:

response中已经有了数据，响应内容默认为字符串
responseType为''，也就是默认值
responseText中是响应主体的内容
responseURL指出了我们请求的资源路径

为什么返回的不是json对象？

上图中的信息:responseType是一个空字符串，也就是指明了返回的是一个字符串，而且从下面的log我们也可以看出来，为了清楚，我把xhr.responseText的类型也打印了出来，确实是string。
而如果我们换成下面的代码：

  1. var xhr=$.ajax({
  2.         url:'./data.json',
  3.         success:function(data){
  4.             console.log(data);
  5.         }
  6.     });
  7.     console.log(xhr);

得到结果截图如下：

这个被jQuery改的面目全非的xmlhttprequest对象，先看一个左侧的属性，其中有一个responseJSON,这是jquery的实现，标准中是没有这个属性的，而它的responseText是字符串。所以success回调应该就是调的这个属性咯。看下请求，没有什么区别：Content-Type都是application/json ,其实我们再切到response标签看下，是一样的数据格式。所以是不是可以说原生获取json格式数据的话，值都是json字符串形式的值?

这里的jquery版本为1.11.2，查看源码可以发现：在ajax方法中定义的done方法内，有这么一句：

  1. // Get response data 这里是得到相应的内容,本例就是"'{"username":"ruby","age":"18"}'"
  2. if ( responses ) {
  3.     response = ajaxHandleResponses( s, jqXHR, responses );
  4. }
  5. // Convert no matter what (that way responseXXX fields are always set)
  6. response = ajaxConvert( s, response, jqXHR, isSuccess );

也就是说，在得到最终请求数据时，jquery会去做响应内容的自动转换，先来看ajaxHandleResponses方法，它用于返回响应内容：

  1. function ajaxHandleResponses(s, jqXHR, responses) {
  2.    var firstDataType, ct, finalDataType, type,
  3.        contents = s.contents,
  4.        dataTypes = s.dataTypes;
  6.    // Remove auto dataType and get content-type in the process
  7.    while (dataTypes[0] === "*") {
  8.        dataTypes.shift();
  9.        if (ct === undefined) {
  10.            ct = s.mimeType || jqXHR.getResponseHeader("Content-Type");
  11.            /*这里的s是使用ajax传入的参数转化而来的对象，用于存储前端开发人员发起该请求时对请求的一些设置和js默认对请求的设置，s.mimeType是使用overrideMIMEType时会被写入s的，其实也就是在ajax方法中我们指定的contentType，如果没有该属性，就是查找相应对象的Content-Type属性，而这个是肯定有值的，本例中ct='application/json',即获取到了响应报文中报头Content-Type的值*/
  12.        }
  13.    }
  15.    // Check if we're dealing with a known content-type
  16.    if (ct) {
  17.        for (type in contents) {
  19.            /*
  20.             contents是一个固定的对象，用于匹配各种类型的数据
  21.             {
  22.             html: /html/
  23.             json: /json/
  24.             script: /(?:java|ecma)script/
  25.             xml: /xml/
  26.             }
  27.             */
  28.            if (contents[type] && contents[type].test(ct)) {
  29.                dataTypes.unshift(type);
  30.                /*
  31.                 这里我们显然是匹配到了json这一项，所以dataTypes中加上一项['json']
  32.                 */
  33.                break;
  34.            }
  35.        }
  36.    }
  38.    // Check to see if we have a response for the expected dataType
  39.    if (dataTypes[0] in responses) {
  40.        finalDataType = dataTypes[0];
  41.         /*
  42.             如果这个类型的数据在responses中正好有，那么就直接将最终类型定义为dataType中的这一项，本例中，dataTypes[0]为'json'，但实际返回的响应是text。responses就是根据相应内容生成的响应对象，这里是"{text:"{"username":"ruby","age":"18"}"}".
  43.         */
  44.    } else {
  45.        // Try convertible dataTypes
  46.        for (type in responses) {
  47.            if (!dataTypes[0] || s.converters[type + " " + dataTypes[0]]) {
  49.            /*
  50.             检测responses中的各个类型的值是否可以转换为我们想得到的类型, 本例中这里的type为'text'，s.converters定义的是各种转换用到的函数，比如s.converters['text json']=JSON.parse。本例中这里是可以转换的。列出来吧：
  51.             s.converters:{
  52.             "text script": function( text ) {
  53.             jQuery.globalEval( text );
  54.             return text;
  55.             },
  56.             // Convert anything to text
  57.             "* text": String,
  59.             // Text to html (true = no transformation)
  60.             "text html": true,
  62.             // Evaluate text as a json expression
  63.             "text json": jQuery.parseJSON,
  65.             // Parse text as xml
  66.             "text xml": jQuery.parseXML
  67.             }
  68.             */
  69.                finalDataType = type;
  70.                break;
  71.            }
  72.            if (!firstDataType) {
  73.                firstDataType = type;
  74.            }
  75.        }
  76.        // Or just use first one
  77.        finalDataType = finalDataType || firstDataType;
  78.    }
  80.    // If we found a dataType
  81.    // We add the dataType to the list if needed
  82.    // and return the corresponding response
  83.    if (finalDataType) {
  84.        if (finalDataType !== dataTypes[0]) {
  85.            dataTypes.unshift(finalDataType);
  86.            //完善s.dataTypes中的值,即完善响应数据的类型，此时为['text','json']
  87.        }
  88.        return responses[finalDataType];
  89.        //最终返回responses['text']
  90.    }
  91. }

再来看ajaxConvert方法: 

  1. /* Chain conversions given the request and the original response
  2. * Also sets the responseXXX fields on the jqXHR instance
  3. */
  4. function ajaxConvert(s, response, jqXHR, isSuccess) {
  5.    var conv2, current, conv, tmp, prev,
  6.        converters = {},
  7.        // Work with a copy of dataTypes in case we need to modify it for conversion
  8.        dataTypes = s.dataTypes.slice();
  9.        //数组copy这么写？不知道为啥~你知道的话还望不吝赐教~
  11.    // Create converters map with lowercased keys
  12.    if (dataTypes[1]) {
  13.        for (conv in s.converters) {
  14.            converters[conv.toLowerCase()] = s.converters[conv];
  15.            //构造一个转换对象，内容是s.converters中的那些转换函数.
  16.        }
  17.    }
  19.    current = dataTypes.shift();
  21.    // Convert to each sequential dataType
  22.    while (current) {
  24.        if (s.responseFields[current]) {
  25.            jqXHR[s.responseFields[current]] = response;
  26.             /*
  27.                 这里给jqXHR即jquery构造出来的XMLHttpRequest对象赋值，在本例中，它在此添加了两个属性，一个是responseText,一个是responseJson
  28.             */
  29.        }
  31.        // Apply the dataFilter if provided
  32.        if (!prev && isSuccess && s.dataFilter) {
  33.            response = s.dataFilter(response, s.dataType);
  34.        }
  36.        prev = current;
  37.        current = dataTypes.shift();
  38.        //记住第一个类型，再获取第二个类型，这里的prev为‘text’, current为'json'。
  39.        if (current) {
  41.            // There's only work to do if current dataType is non-auto
  42.            if (current === "*") {
  44.                current = prev;
  46.                // Convert response if prev dataType is non-auto and differs from current
  47.            } else if (prev !== "*" && prev !== current) {
  49.                // Seek a direct converter
  50.                conv = converters[prev + " " + current] || converters["* " + current];
  51.                //看看是否有prev类转current类的转换方法
  52.                // If none found, seek a pair
  53.                if (!conv) {
  54.                    for (conv2 in converters) {
  56.                        // If conv2 outputs current
  57.                        tmp = conv2.split(" ");
  58.                        if (tmp[1] === current) {
  60.                            // If prev can be converted to accepted input
  61.                            conv = converters[prev + " " + tmp[0]] ||
  62.                            converters["* " + tmp[0]];
  63.                            if (conv) {
  64.                                // Condense equivalence converters
  65.                                if (conv === true) {
  66.                                    conv = converters[conv2];
  68.                                    // Otherwise, insert the intermediate dataType
  69.                                } else if (converters[conv2] !== true) {
  70.                                    current = tmp[0];
  71.                                    dataTypes.unshift(tmp[1]);
  72.                                }
  73.                                break;
  74.                            }
  75.                        }
  76.                    }
  77.                }
  79.                // Apply converter (if not an equivalence)
  80.                if (conv !== true) {
  82.                    // Unless errors are allowed to bubble, catch and return them
  83.                    if (conv && s["throws"]) {
  84.                        response = conv(response);
  85.                    } else {
  86.                        try {
  87.                            response = conv(response);
  88.                            //转换为我们想要的数据类型，截至此我们已经得到想要的json数据啦
  89.                        } catch (e) {
  90.                            return {
  91.                                state: "parsererror",
  92.                                error: conv ? e : "No conversion from " + prev + " to " + current
  93.                            };
  94.                        }
  95.                    }
  96.                }
  97.            }
  98.        }
  99.    }
  101.    return {state: "success", data: response};
  102. }

上面基本根据当前案例进行代码解析，很多情况没有一一列出，感兴趣的童鞋可以通过打断点调试的方式来解析代码。





【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/rubyisaPM/p/4412897.html