jQuery ajax (jsonp) ігнорує час очікування та не запускає подію помилки

Щоб додати деяку основну обробку помилок, я хотів переписати фрагмент коду, який використовував jQuery $ .getJSON для витягування деяких фотографій з Flickr. Причиною цього є те, що $ .getJSON не забезпечує обробку помилок або роботу з таймаутами.

Оскільки $ .getJSON - це просто обгортка навколо $ .ajax, я вирішив переписати річ і здивувати сюрприз, це працює бездоганно.

Тепер веселощі починаються. Коли я навмисно викликаю 404 (шляхом зміни URL-адреси) або змушує таймаут мережі (не підключаючись до мереж), подія помилки взагалі не запускається. Я втрачаю те, що роблю не так. Допомога дуже вдячна.

Ось код:

$(document).ready(function(){

    // var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne"; // correct URL
    var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne_______"; // this should throw a 404

    $.ajax({
        url: jsonFeed,
        data: { "lang" : "en-us",
                "format" : "json",
                "tags" : "sunset"
        },
        dataType: "jsonp",
        jsonp: "jsoncallback",
        timeout: 5000,
        success: function(data, status){
            $.each(data.items, function(i,item){
                $("<img>").attr("src", (item.media.m).replace("_m.","_s."))
                          .attr("alt", item.title)
                          .appendTo("ul#flickr")
                          .wrap("<li><a href=\"" + item.link + "\"></a></li>");
                if (i == 9) return false;
            });
        },
        error: function(XHR, textStatus, errorThrown){
            alert("ERREUR: " + textStatus);
            alert("ERREUR: " + errorThrown);
        }
    });

});

Я хотів би додати, що це питання було задано, коли jQuery був у версії 1.4.2

jQuery 1.5 і вище мають кращу підтримку для обробки помилок із запитами JSONP. Однак вам потрібно використовувати $.ajaxметод замість $.getJSON. Для мене це працює:

var req = $.ajax({
    url : url,
    dataType : "jsonp",
    timeout : 10000
});

req.success(function() {
    console.log('Yes! Success!');
});

req.error(function() {
    console.log('Oh noes!');
});

Здається, тайм-аут робить трюк і викликає обробник помилок, коли через 10 секунд немає успішного запиту.

Я також зробив невеликий допис у блозі на цю тему.

Це відоме обмеження для власної реалізації jsonp у jQuery. Нижче наведено текст IBM DeveloperWorks

JSONP - це дуже потужна техніка для створення мішапів, але, на жаль, це не лікувальний засіб для всіх ваших потреб міждоменного спілкування. У нього є деякі недоліки, які необхідно взяти до уваги перед виділенням ресурсів для розвитку. Перше і головне, немає обробки помилок для дзвінків JSONP. Якщо динамічна вставка сценарію працює, вам телефонують; якщо ні, нічого не відбувається. Це просто мовчки не вдається. Наприклад, ви не можете виявити помилку 404 із сервера. Ви також не можете скасувати або перезапустити запит. Тим не менш, ви можете зробити час очікування після очікування розумного часу. (Майбутні версії jQuery можуть мати функцію переривання для запитів JSONP.)

Однак на GoogleCode доступний плагін jsonp який забезпечує підтримку обробки помилок. Для початку просто внесіть наступні зміни у свій код.

Ви можете або завантажити його, або просто додати посилання на сценарій до плагіна.

<script type="text/javascript" 
     src="http://jquery-jsonp.googlecode.com/files/jquery.jsonp-1.0.4.min.js">
</script>

Потім змініть свій дзвінок ajax, як показано нижче:

$(function(){
    //var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne"; // correct URL
    var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne_______"; // this should throw a 404  
    $.jsonp({
        url: jsonFeed,
        data: { "lang" : "en-us",
                "format" : "json",
                "tags" : "sunset"
        },
        dataType: "jsonp",
        callbackParameter: "jsoncallback",
        timeout: 5000,
        success: function(data, status){
            $.each(data.items, function(i,item){
                $("<img>").attr("src", (item.media.m).replace("_m.","_s."))
                          .attr("alt", item.title)
                          .appendTo("ul#flickr")
                          .wrap("<li><a href=\"" + item.link + "\"></a></li>");
                if (i == 9) return false;
            });
        },
        error: function(XHR, textStatus, errorThrown){
            alert("ERREUR: " + textStatus);
            alert("ERREUR: " + errorThrown);
        }
    });
});

Рішення, якщо ви застрягли в jQuery 1.4:

var timeout = 10000;
var id = setTimeout( errorCallback, timeout );
$.ajax({
    dataType: 'jsonp',
    success: function() {
        clearTimeout(id);
        ...
    }
});

Це може бути "відоме" обмеження jQuery; однак, здається, це недостатньо добре задокументовано. Сьогодні я провів близько 4 годин, намагаючись зрозуміти, чому мій тайм-аут не працює.

Я перейшов на jquery.jsonp, і це спрацювало сподобалось. Дякую.

Здається, це буде вирішено станом на jQuery 1.5. Я спробував наведений вище код і отримав зворотний дзвінок.

Я кажу "здається", оскільки документація зворотного виклику помилки для jQuery.ajax () все ще містить таку примітку:

Примітка: Цей обробник не викликається для міждоменних сценаріїв та запитів JSONP.

JQuery-JSONP JQuery плагін згадується в Хосе Базиліо відповідь тепер можна знайти на GitHub .

На жаль, документація дещо спартанська, тому я навів простий приклад:

    $.jsonp({
        cache: false,
        url: "url",
        callbackParameter: "callback",
        data: { "key" : "value" },
        success: function (json, textStatus, xOptions) {
            // handle success - textStatus is "success"   
        },
        error: function (xOptions, textStatus) {
            // handle failure - textStatus is either "error" or "timeout"
        }
    });

Важливо Включіть callbackParameter у виклик $ .jsonp (), інакше я виявив, що функція зворотного виклику ніколи не вводиться в рядок запиту виклику служби (поточна станом на версію 2.4.0 jquery-jsonp).

Я знаю, що це питання застаріле, але проблема обробки помилок за допомогою JSONP все ще не вирішена. Сподіваємось, це оновлення допоможе іншим, оскільки це питання займає перше місце в Google за „обробку помилок jquery jsonp”.

А як щодо прослуховування події сценарію onerror? Я мав цю проблему і вирішив її, виправивши метод jquery там, де був створений тег скрипта. Ось цікавий біт коду:

// Attach handlers for all browsers
script.onload = script.onreadystatechange = function( _, isAbort ) {

    if ( isAbort || !script.readyState || /loaded|complete/.test( script.readyState ) ) {

        cleanup();

        // Callback if not abort
        if ( !isAbort ) {
            callback( 200, "success" );
        }
    }
};

/* ajax patch : */
script.onerror = function(){
    cleanup();

    // Sends an inappropriate error, still better than nothing
    callback(404, "not found");
};

function cleanup(){
    // Handle memory leak in IE
    script.onload = script.onreadystatechange = null;

    // Remove the script
    if ( head && script.parentNode ) {
        head.removeChild( script );
    }

    // Dereference the script
    script = undefined;
}

Що ви думаєте про це рішення? Чи це може спричинити проблеми сумісності?