寫在前面：在學習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};}
上面基本根據當前案例進行代碼解析，很多情況沒有一一列出，感興趣的童鞋可以通過打斷點調試的方式來解析代碼。