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

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

实验案例:

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(e){
    console.log(e);
    if(xhr.readyState==4 && xhr.status==200){
        console.log(xhr);
        console.log(xhr.responseText);
    }
}
xhr.open('get','./data.json');
xhr.send();

请求成功后的xhr:

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

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

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

var xhr=$.ajax({
        url:'./data.json',
        success:function(data){
            console.log(data);
        }
    });
    console.log(xhr);

得到结果截图如下：

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

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

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

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

function ajaxHandleResponses(s, jqXHR, responses) {
   var firstDataType, ct, finalDataType, type,
       contents = s.contents,
       dataTypes = s.dataTypes;
   // Remove auto dataType and get content-type in the process
   while (dataTypes[0] === "*") {
       dataTypes.shift();
       if (ct === undefined) {
           ct = s.mimeType || jqXHR.getResponseHeader("Content-Type");
           /*这里的s是使用ajax传入的参数转化而来的对象，用于存储前端开发人员发起该请求时对请求的一些设置和js默认对请求的设置，s.mimeType是使用overrideMIMEType时会被写入s的，其实也就是在ajax方法中我们指定的contentType，如果没有该属性，就是查找相应对象的Content-Type属性，而这个是肯定有值的，本例中ct='application/json',即获取到了响应报文中报头Content-Type的值*/
       }
   }
   // Check if we're dealing with a known content-type
   if (ct) {
       for (type in contents) {
           /*
            contents是一个固定的对象，用于匹配各种类型的数据
            {
            html: /html/
            json: /json/
            script: /(?:java|ecma)script/
            xml: /xml/
            }
            */
           if (contents[type] && contents[type].test(ct)) {
               dataTypes.unshift(type);
               /*
                这里我们显然是匹配到了json这一项，所以dataTypes中加上一项['json']
                */
               break;
           }
       }
   }
   // Check to see if we have a response for the expected dataType
   if (dataTypes[0] in responses) {
       finalDataType = dataTypes[0];
        /*
            如果这个类型的数据在responses中正好有，那么就直接将最终类型定义为dataType中的这一项，本例中，dataTypes[0]为'json'，但实际返回的响应是text。responses就是根据相应内容生成的响应对象，这里是"{text:"{"username":"ruby","age":"18"}"}".
        */
   } else {
       // Try convertible dataTypes
       for (type in responses) {
           if (!dataTypes[0] || s.converters[type + " " + dataTypes[0]]) {
           /*
            检测responses中的各个类型的值是否可以转换为我们想得到的类型, 本例中这里的type为'text'，s.converters定义的是各种转换用到的函数，比如s.converters['text json']=JSON.parse。本例中这里是可以转换的。列出来吧：
            s.converters:{
            "text script": function( text ) {
            jQuery.globalEval( text );
            return text;
            },
            // Convert anything to text
            "* text": String,
            // Text to html (true = no transformation)
            "text html": true,
            // Evaluate text as a json expression
            "text json": jQuery.parseJSON,
            // Parse text as xml
            "text xml": jQuery.parseXML
            }
            */
               finalDataType = type;
               break;
           }
           if (!firstDataType) {
               firstDataType = type;
           }
       }
       // Or just use first one
       finalDataType = finalDataType || firstDataType;
   }
   // If we found a dataType
   // We add the dataType to the list if needed
   // and return the corresponding response
   if (finalDataType) {
       if (finalDataType !== dataTypes[0]) {
           dataTypes.unshift(finalDataType);
           //完善s.dataTypes中的值,即完善响应数据的类型，此时为['text','json']
       }
       return responses[finalDataType];
       //最终返回responses['text']
   }
}

再来看ajaxConvert方法:

/* Chain conversions given the request and the original response
* Also sets the responseXXX fields on the jqXHR instance
*/
function ajaxConvert(s, response, jqXHR, isSuccess) {
   var conv2, current, conv, tmp, prev,
       converters = {},
       // Work with a copy of dataTypes in case we need to modify it for conversion
       dataTypes = s.dataTypes.slice();
       //数组copy这么写？不知道为啥~你知道的话还望不吝赐教~
   // Create converters map with lowercased keys
   if (dataTypes[1]) {
       for (conv in s.converters) {
           converters[conv.toLowerCase()] = s.converters[conv];
           //构造一个转换对象，内容是s.converters中的那些转换函数.
       }
   }
   current = dataTypes.shift();
   // Convert to each sequential dataType
   while (current) {
       if (s.responseFields[current]) {
           jqXHR[s.responseFields[current]] = response;
            /*
                这里给jqXHR即jquery构造出来的XMLHttpRequest对象赋值，在本例中，它在此添加了两个属性，一个是responseText,一个是responseJson
            */
       }
       // Apply the dataFilter if provided
       if (!prev && isSuccess && s.dataFilter) {
           response = s.dataFilter(response, s.dataType);
       }
       prev = current;
       current = dataTypes.shift();
       //记住第一个类型，再获取第二个类型，这里的prev为‘text’, current为'json'。
       if (current) {
           // There's only work to do if current dataType is non-auto
           if (current === "*") {
               current = prev;
               // Convert response if prev dataType is non-auto and differs from current
           } else if (prev !== "*" && prev !== current) {
               // Seek a direct converter
               conv = converters[prev + " " + current] || converters["* " + current];
               //看看是否有prev类转current类的转换方法
               // If none found, seek a pair
               if (!conv) {
                   for (conv2 in converters) {
                       // If conv2 outputs current
                       tmp = conv2.split(" ");
                       if (tmp[1] === current) {
                           // If prev can be converted to accepted input
                           conv = converters[prev + " " + tmp[0]] ||
                           converters["* " + tmp[0]];
                           if (conv) {
                               // Condense equivalence converters
                               if (conv === true) {
                                   conv = converters[conv2];
                                   // Otherwise, insert the intermediate dataType
                               } else if (converters[conv2] !== true) {
                                   current = tmp[0];
                                   dataTypes.unshift(tmp[1]);
                               }
                               break;
                           }
                       }
                   }
               }
               // Apply converter (if not an equivalence)
               if (conv !== true) {
                   // Unless errors are allowed to bubble, catch and return them
                   if (conv && s["throws"]) {
                       response = conv(response);
                   } else {
                       try {
                           response = conv(response);
                           //转换为我们想要的数据类型，截至此我们已经得到想要的json数据啦
                       } catch (e) {
                           return {
                               state: "parsererror",
                               error: conv ? e : "No conversion from " + prev + " to " + current
                           };
                       }
                   }
               }
           }
       }
   }
   return {state: "success", data: response};
}

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

来自为知笔记(Wiz)