JSON 的 application/json 标头无法在 chrome/IE 上运行，而在 Firefox 上运行良好

Question

我正在发送一个 ajax 请求来提取 Web 服务列表，然后稍后在表格中显示它们。但是，该代码在 Firefox 上可以正常工作，但在 chorome 和 IE 上却不行。

AJAX 请求：

$.ajax({
   url: 'http://dev.ragld.com/services/',
   method: 'GET',
   accept: 'application/json',
   beforeSend: setHeader,
   async: false, 
   success: function(data){  
       var servicesObj = $.parseJSON(data);

       $.each(servicesObj, function(i, serviceItem){
           alert(serviceItem.name);
       });
   }
});

//function to setup header information
function setHeader(xhr){
    xhr.setRequestHeader('accept', 'application/json'); 
}

JSON 响应：

[
    {
        "name": "OS-ONS-bar",
        "type": "RelationshipService",
        "endpoint": "http://dev.ragld.com/services/bar/"
    },
    {
        "name": "OS-ONS-sameAs",
        "type": "RelationshipService",
        "endpoint": "http://dev.ragld.com/services/sameas/"
    },
    {
        "name": "Maths Service 2",
        "type": "ArithmeticService",
        "endpoint": "http://dev.ragld.com/services/arithmetic/"
    }
]

错误我用上面的代码进入 chrome：

Uncaught TypeError: Cannot read property 'length' of null jquery.min.js:2
e.extend.each jquery.min.js:2
$.ajax.success admin.php:157
f.Callbacks.o jquery.min.js:2
f.Callbacks.p.fireWith jquery.min.js:2
w jquery.min.js:4
f.support.ajax.f.ajaxTransport.send.d jquery.min.js:4
f.support.ajax.f.ajaxTransport.send jquery.min.js:4
f.extend.ajax jquery.min.js:4
(anonymous function) admin.php:148
f.Callbacks.o jquery.min.js:2
f.Callbacks.p.fireWith jquery.min.js:2
e.extend.ready jquery.min.js:2
c.addEventListener.B

问题：

1. 这适用于 Firefox，但不适用于 Chrome 和 IE。
2. 现在，如果我删除这个 $.parseJSON，那么它将在 chrome 上运行，但在 firefox/IE 中不可用

PS: ajax 请求是向不同的服务器发出的，并且此代码是不同的。任何人都请提供适用于所有浏览器的解决方案???

EDIT1： 看起来 chrome 会自动解析它或获取 json 标头，而在 Firefox 中，我们需要使用 parseJSON 显式解析它？？？有什么想法吗？

EDIT2（来自 FireFox 的控制台日志）：

[{"name":"OS-ONS-bar","type":"RelationshipService","endpoint":"http:\/\/dev.ragld.com\/services\/bar\/"},{"name":"OS-ONS-sameAs","type":"RelationshipService","endpoint":"http:\/\/dev.ragld.com\/services\/sameas\/"},{"name":"Maths Service 2","type":"ArithmeticService","endpoint":"http:\/\/dev.ragld.com\/services\/arithmetic\/"}]

来自 Chrome 的控制台.log：

Answer 1

您应该将ajax option dataType 指定为“json”。否则 jQuery 将不得不猜测它应该返回什么数据类型，你可能会得到不同的结果。

数据类型

如果没有指定，jQuery 将尝试根据 MIME 推断它 响应的类型（XML MIME 类型将产生 XML，在 1.4 JSON 将产生一个 JavaScript 对象，在 1.4 中脚本将执行该脚本， 其他任何内容都将作为字符串返回）。

查看我在 FF、IE 和 Chrome 中工作的 demo。

您应该检查 XHR 响应并确保您的服务实际返回 JSON。