jQuery ajax (jsonp) ignora um tempo limite e não dispara o evento de erro

Para adicionar algum tratamento básico de erro, eu queria reescrever um trecho de código que usava $ .getJSON do jQuery para puxar algumas fotos do Flickr. O motivo para fazer isso é que $ .getJSON não fornece tratamento de erros ou trabalha com tempos limite.

Já que $ .getJSON é apenas um invólucro em torno de $ .ajax, decidi reescrever a coisa e surpresa surpresa, funciona perfeitamente.

Agora a diversão começa. Quando eu deliberadamente causo um 404 (alterando a URL) ou faço a rede atingir o tempo limite (por não estar conectada às interwebs), o evento de erro não dispara. Não sei o que estou fazendo de errado. A ajuda é muito apreciada.

Aqui está o código:

$(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);
        }
    });

});

Eu gostaria de acrescentar que esta pergunta foi feita quando o jQuery estava na versão 1.4.2

jQuery 1.5 e superior têm melhor suporte para tratamento de erros com solicitações JSONP. No entanto, você precisa usar o $.ajaxmétodo em vez de $.getJSON. Para mim, isso funciona:

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

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

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

O tempo limite parece funcionar e chamar o manipulador de erros, quando não houver solicitação bem-sucedida após 10 segundos.

Eu fiz uma pequena postagem no blog sobre esse assunto também.

Esta é uma limitação conhecida com a implementação jsonp nativa em jQuery. O texto abaixo é do IBM DeveloperWorks

JSONP é uma técnica muito poderosa para construir mashups, mas, infelizmente, não é a cura para todas as suas necessidades de comunicação entre domínios. Ele tem algumas desvantagens que devem ser levadas em consideração antes de comprometer os recursos de desenvolvimento. Em primeiro lugar, não há tratamento de erros para chamadas JSONP. Se a inserção de script dinâmico funcionar, você será chamado; se não, nada acontece. Ele simplesmente falha silenciosamente. Por exemplo, você não consegue detectar um erro 404 do servidor. Nem você pode cancelar ou reiniciar o pedido. Você pode, no entanto, atingir o tempo limite após aguardar um período de tempo razoável. (As versões futuras do jQuery podem ter um recurso de anulação para solicitações JSONP.)

No entanto, há um plug-in jsonp disponível no GoogleCode que fornece suporte para tratamento de erros. Para começar, basta fazer as seguintes alterações em seu código.

Você pode baixá-lo ou apenas adicionar uma referência de script ao plug-in.

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

Em seguida, modifique sua chamada ajax conforme mostrado abaixo:

$(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);
        }
    });
});

Uma solução se você estiver preso ao jQuery 1.4:

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

Esta pode ser uma limitação "conhecida" do jQuery; entretanto, não parece estar bem documentado. Passei cerca de 4 horas hoje tentando entender por que meu tempo limite não estava funcionando.

Mudei para jquery.jsonp e funcionou como um encanto. Obrigado.

Parece estar resolvido a partir do jQuery 1.5. Tentei o código acima e recebo o retorno de chamada.

Digo "parece ser" porque a documentação do retorno de chamada de erro para jQuery.ajax () ainda tem a seguinte observação:

Nota: Este manipulador não é chamado para script de domínio cruzado e solicitações JSONP.

O plugin jquery-jsonp jQuery mencionado na resposta de Jose Basilio agora pode ser encontrado no GitHub .

Infelizmente, a documentação é um tanto espartana, então forneci um exemplo simples:

    $.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"
        }
    });

Importante Inclua o callbackParameter na chamada $ .jsonp (), caso contrário, descobri que a função de retorno de chamada nunca é injetada na string de consulta da chamada de serviço (atual a partir da versão 2.4.0 de jquery-jsonp).

Eu sei que esta questão é antiga, mas o problema de tratamento de erros usando JSONP ainda não foi 'resolvido'. Esperamos que esta atualização ajude outras pessoas, pois esta questão é a melhor classificada no Google em "tratamento de erros jquery jsonp".

Que tal ouvir o evento onerror do script? Eu tive esse problema e resolvi corrigindo o método jquery onde a tag de script foi criada. Aqui está a parte interessante do código:

// 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;
}

O que você acha desta solução? É provável que cause problemas de compatibilidade?