Обнаружение проблем 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);
Как упоминалось в комментариях рассвета, вместо него можно использовать 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 не использует XMLHttpRequest, как обычные запросы AJAX. Вместо этого он вставляет тег <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 секунд, если ваш флаг все еще не был установлен, время запроса истекло.