检测JSONP问题
如果您不想下载依赖项,则可以自己检测错误状态。这很简单。
您将只能通过使用某种超时来检测JSONP错误。如果在一定时间内没有有效的响应,则假定有一个错误。该错误基本上可以是任何东西。
这是检查错误的一种简单方法。只需使用一个success
标志:
var success = false;
$.getJSON(url, function(json) {
success = true;
});
setTimeout(function() {
if (!success)
{
alert("Houston, we have a problem.");
}
}, 5000);
就像注释中提到的thedawnrider一样,您也可以改用clearTimeout:
var errorTimeout = setTimeout(function() {
if (!success)
{
alert("Houston, we have a problem.");
}
}, 5000);
$.getJSON(url, function(json) {
clearTimeout(errorTimeout);
});
为什么?继续阅读...
简而言之,这就是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秒钟后,如果您的标记仍未设置,则请求超时。