jQuery ajax (jsonp) bir zaman aşımını yok sayar ve hata olayını tetiklemez

Bazı temel hata işlemeyi eklemek için, Flickr'dan bazı fotoğrafları çekmek için jQuery'nin $ .getJSON'unu kullanan bir kod parçasını yeniden yazmak istedim. Bunu yapmanın nedeni, $ .getJSON'un hata işleme sağlamaması veya zaman aşımlarıyla çalışmamasıdır.

$ .GetJSON sadece $ .ajax civarında bir paketleyici olduğundan, bir şeyi yeniden yazmaya ve sürpriz sürprizi yapmaya karar verdim, kusursuz çalışıyor.

Şimdi eğlence yine de başlıyor. Kasıtlı olarak bir 404'e (URL'yi değiştirerek) neden olduğumda veya ağın zaman aşımına uğramasına (interweb'lere bağlanmayarak) neden olduğumda, hata olayı hiç çalışmıyor. Neyi yanlış yaptığımı bilemiyorum. Yardım çok takdir edilmektedir.

İşte kod:

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

});

Bu sorunun jQuery 1.4.2 sürümündeyken sorulduğunu eklemek isterim.

jQuery 1.5 ve sonraki sürümler, JSONP isteklerinde hata işleme için daha iyi desteğe sahiptir. Ancak $.ajaxbunun yerine yöntemi kullanmanız gerekir $.getJSON. Benim için bu işe yarıyor:

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

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

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

10 saniye sonra başarılı bir istek olmadığında zaman aşımı hile yapıyor ve hata işleyicisini çağırıyor gibi görünüyor.

Ben de bu konuda küçük bir blog yazısı yazdım .

Bu, jQuery'deki yerel jsonp uygulamasında bilinen bir sınırlamadır. Aşağıdaki metin IBM DeveloperWorks'ten alınmıştır

JSONP, melez uygulamalar oluşturmak için çok güçlü bir tekniktir, ancak maalesef, tüm etki alanları arası iletişim ihtiyaçlarınız için bir çare değildir. Geliştirme kaynaklarını uygulamaya koymadan önce dikkate alınması gereken bazı dezavantajları vardır. Öncelikle ve en önemlisi, JSONP çağrıları için herhangi bir hata işleme yoktur. Dinamik komut dosyası ekleme çalışırsa, çağrılırsınız; değilse, hiçbir şey olmaz. Sadece sessizce başarısız oluyor. Örneğin, sunucudan bir 404 hatası yakalayamazsınız. İsteği iptal edemez veya yeniden başlatamazsınız. Ancak makul bir süre bekledikten sonra zaman aşımına uğrayabilirsiniz. (Gelecekteki jQuery sürümlerinde JSONP istekleri için bir durdurma özelliği olabilir.)

Ancak bir jsonp eklenti mevcut hayat var GoogleCode hata işleme için destek sağlar. Başlamak için kodunuzda aşağıdaki değişiklikleri yapmanız yeterlidir.

Ya indirebilir ya da eklentiye bir komut dosyası referansı ekleyebilirsiniz.

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

Ardından, ajax aramanızı aşağıda gösterildiği gibi değiştirin:

$(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 ile takıldıysanız bir çözüm:

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

Bu, jQuery'nin "bilinen" bir sınırlaması olabilir; ancak, iyi belgelenmiş görünmüyor. Bugün, zaman aşımımın neden çalışmadığını anlamaya çalışmak için yaklaşık 4 saat harcadım.

Jquery.jsonp'a geçtim ve harika çalıştı. Teşekkür ederim.

JQuery 1.5'ten itibaren çözülmüş görünüyor. Yukarıdaki kodu denedim ve geri aramayı alıyorum.

"Öyle görünüyor" diyorum çünkü jQuery.ajax () için hata geri aramasının dokümantasyonu hala aşağıdaki nota sahip:

Not: Bu işleyici, etki alanları arası komut dosyası ve JSONP istekleri için çağrılmaz.

Jquery-jsonp jQuery eklentisi belirtilen Jose Basilio en cevabı şimdi bulunabilir GitHub .

Maalesef belgeler biraz spartan, bu yüzden basit bir örnek verdim:

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

Önemli CallbackParameter'ı $ .jsonp () çağrısına dahil edin, aksi takdirde callback işlevinin hiçbir zaman hizmet çağrısının sorgu dizesine enjekte edilmediğini gördüm (jquery-jsonp 2.4.0 sürümünden itibaren geçerli).

Bu sorunun eski olduğunu biliyorum, ancak JSONP kullanarak hata işleme sorunu hala 'çözülmedi'. Bu sorunun Google'da "jquery jsonp hata işleme" açısından en üst sırada yer alması nedeniyle bu güncellemenin başkalarına yardımcı olacağını umuyoruz.

Senaryonun onerror olayını dinlemeye ne dersiniz? Bu sorunu yaşadım ve jquery'nin komut dosyası etiketinin oluşturulduğu yöntemine yama yaparak çözdüm. İşte ilginç kod parçası:

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

Bu çözüm hakkında ne düşünüyorsunuz? Uyumluluk sorunlarına neden olma ihtimali var mı?