Chrome与IE中JSON长度处理差异致XHR遍历JSON兼容问题

这问题我之前帮同事排查过，核心是IE和Chrome对XMLHttpRequest返回的response属性处理逻辑不一样！

问题根源 #

• Chrome会自动把符合application/json响应头的请求结果解析成JSON对象，所以你能直接通过request1.response.records.length拿到数组的真实长度（1438）。
• 而旧版本IE（甚至部分较新IE）不会自动解析JSON响应，request1.response返回的是原始的JSON字符串，这时候调用.length得到的是整个字符串的长度（30158），自然不是你要的数组长度。

通用解决方法 #

不管是Chrome还是IE，统一手动解析响应文本，彻底消除浏览器差异，步骤如下：

1. 获取响应文本并手动解析
   优先用responseText（所有浏览器都支持这个属性返回原始文本），然后用JSON.parse()转换成JSON对象：

   // 兼容不同浏览器的响应获取方式
   var rawResponse = request1.responseText || request1.response;
   // 解析成JSON对象
   var parsedData = JSON.parse(rawResponse);
   // 现在可以安全访问records的长度了
   var recordsCount = parsedData.records.length;
   console.log(recordsCount); // 输出1438，跨浏览器一致
   

2. 兼容旧IE的JSON.parse
   如果需要支持IE8及以下版本，这些浏览器没有原生的JSON对象，你可以引入官方的json2.js polyfill（直接把代码嵌入项目即可），这样就能在旧IE里正常使用JSON.parse()了。

3. 验证后端响应头
   确保后端返回的Content-Type是application/json，这能让现代浏览器更友好地处理响应，但手动解析依然是最稳妥的跨浏览器方案。

避坑提醒 #

永远不要直接依赖request1.response的类型，不同浏览器对这个属性的实现差异很大，用responseText拿到原始文本后手动解析，是跨浏览器处理JSON响应的标准做法。

内容的提问来源于stack exchange，提问作者chris