javascript - 无法使用 jquery.ajax 持续加载大型 json 响应

Question

最近，我的一个脚本开始面临从服务器加载 json 响应的问题。我正在使用 jquery.ajax() 进行 ajax 调用。代码片段是这样的——

var request = $.ajax({
  url: "script.jsp",
  type: "POST",
  dataType: "json",
  success: function(response) {
     console.log(response);
  }, 
  error: function(response, error) {
     console.log(response, error);
  }
});

正如我提到的，这个脚本最近才在昨天运行。我没有对服务器端代码或前端代码进行任何更改。 json 响应有点大~1 MB。但我使用 -

验证了 json 输出

python -mjson.tool < output.json

打印正常。奇怪的是 FF 和 Chrome 处理它的方式不同。

在 FF 中，我打开 Firebug 并看到正在发出的 ajax 请求。我看到请求在大约 300 毫秒内得到处理，但控制台中链接旁边的加载轮仍在动画约 20 秒。然后正确处理 json 响应，结果可以在页面上看到。在 IE 中也有类似的行为，20 秒后正确处理 json。

在 Chrome 中，大约 20 秒后没有任何反应，之后我在控制台中看到一条错误消息，提示 "error": undefined 或 Failed to load resource。或者它也打印下面的堆栈跟踪 -

POST script.jsp 
f.support.ajax.f.ajaxTransport.sendjquery.min.js:4
f.extend.ajaxjquery.min.js:4
DataTableWidget.extend._fetchBuildingBlockItemsPermissionBBItemsWidget.js:91
(anonymous function)PermissionBBItemsWidget.js:83
e.extend.eachjquery.min.js:2
DataTableWidget.extend._loadDataPermissionBBItemsWidget.js:82
DataTableWidget.extend.showPermissionBBItemsWidget.js:15
(anonymous function)permission-building-blocks.html:451
xLAB.min.js:5
ULAB.min.js:5
jLAB.min.js:5
ILAB.min.js:5
eLAB.min.js:5
a.onload.a.onreadystatechange

我不明白这种在不同浏览器中的奇怪行为。

所以本质上我确保了-

1. 服务器端代码快速返回响应。我输入了一些调试语句并查看了服务器日志。响应表单服务器的时间都不会超过 500 毫秒。
2. 确保 json 得到正确验证。 20 秒后在 IE 和 FF 中处理它没有任何问题的事实证明了这一点。除了使用 python 的 json.tool。
3. 设置数据类型为json

所以任何关于这个问题的建议都会有很大的帮助。谢谢。

更新我注意到了一件更奇怪的事情。在处理请求时，我什至在原始请求的 3 秒内点击了刷新按钮，该过程立即完成。正如我在几分之一秒后看到的 View 变化一样，页面因刷新事件而被清除。

更新 2我注意到，在我按字母分割我的大 react 之后。 looong 响应的问题只发生在某些响应中。我通过 http://jsonformatter.curiousconcept.com/#jsonformatter 运行了这个拆分的长响应文件虽然它立即返回说 josn 是有效的，但实际打印响应需要 20 多秒。我认为问题是由于 \u0026 等某些字符引起的，所以有了这些添加的信息，如何解决问题？ Here is the snipet of the problematic json.

Answer 1

我发现了问题。问题在于服务器端代码如何为客户端代码 JavaScript 提供 json 字符串。

我在我们的代码库中使用了一个遗留方法，它实际上在将它传递给客户端之前在 jsp 页面中呈现已经存在的 json 字符串。这不知何故搞砸了回应。因此，响应类型也是 text/html。

一旦我将响应切换为实际的 application/json MIME 类型流，一切都很好。