检测 JSONP 问题
如果不想下载依赖,可以自己检测错误状态。这简单。
您将只能通过使用某种超时来检测 JSONP 错误。如果在特定时间内没有有效响应,则假设有错误。不过,错误基本上可以是任何东西。
这是检查错误的简单方法。只需使用一个success
标志:
var success = false;
$.getJSON(url, function(json) {
success = true;
// ... whatever else your callback needs to do ...
});
// Set a 5-second (or however long you want) timeout to check for errors
setTimeout(function() {
if (!success)
{
// Handle error accordingly
alert("Houston, we have a problem.");
}
}, 5000);
正如 dawnrider 在评论中提到的,您也可以使用 clearTimeout 代替:
var errorTimeout = setTimeout(function() {
if (!success)
{
// Handle error accordingly
alert("Houston, we have a problem.");
}
}, 5000);
$.getJSON(url, function(json) {
clearTimeout(errorTimeout);
// ... whatever else your callback needs to do ...
});
为什么?继续阅读...
简而言之,JSONP 的工作原理如下:
JSONP 不像常规 AJAX 请求那样使用 XMLHttpRequest。相反,它会<script>
在页面中注入一个标签,其中“src”属性是请求的 URL。响应的内容包含在一个 Javascript 函数中,然后在下载时执行。
例如。
JSONP 请求: https://api.site.com/endpoint?this=that&callback=myFunc
Javascript 会将此脚本标签注入到 DOM 中:
<script src="https://api.site.com/endpoint?this=that&callback=myFunc"></script>
将<script>
标签添加到 DOM时会发生什么?显然,它被执行了。
所以假设对这个查询的响应产生了一个 JSON 结果,如:
{"answer":42}
对于浏览器来说,这与脚本的源代码相同,因此它会被执行。但是当你执行这个时会发生什么:
<script>{"answer":42}</script>
嗯,没什么。它只是一个对象。它不会被存储、保存,也不会发生任何事情。
这就是 JSONP 请求将其结果包装在一个函数中的原因。必须支持 JSONP 序列化的服务器会看到callback
您指定的参数,并返回以下信息:
myFunc({"answer":42})
然后改为执行:
<script>myFunc({"answer":42})</script>
......这更有用。在本例中,代码中的某处是一个名为 的全局函数myFunc
:
myFunc(data)
{
alert("The answer to life, the universe, and everything is: " + data.answer);
}
而已。这就是 JSONP 的“魔力”。然后构建超时检查非常简单,如上所示。发出请求,然后立即开始超时。X 秒后,如果您的标志仍未设置,则请求超时。