jQuery ajax (jsonp) mengabaikan waktu tunggu dan tidak mengaktifkan peristiwa kesalahan

Untuk menambahkan beberapa penanganan kesalahan dasar, saya ingin menulis ulang sepotong kode yang menggunakan $ .getJSON jQuery untuk menarik beberapa foto dari Flickr. Alasan untuk melakukan ini adalah karena $ .getJSON tidak menyediakan penanganan kesalahan atau bekerja dengan waktu tunggu.

Karena $ .getJSON hanyalah pembungkus sekitar $ .ajax saya memutuskan untuk menulis ulang hal itu dan kejutan kejutan, itu bekerja dengan sempurna.

Sekarang kesenangan dimulai. Ketika saya dengan sengaja menyebabkan 404 (dengan mengubah URL) atau menyebabkan jaringan menjadi waktu tunggu (dengan tidak terhubung ke interwebs), peristiwa kesalahan tidak menyala, sama sekali. Saya bingung dengan apa yang saya lakukan salah. Bantuan sangat dihargai.

Berikut kodenya:

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

});

Saya ingin menambahkan bahwa pertanyaan ini diajukan ketika jQuery berada di versi 1.4.2

jQuery 1.5 dan yang lebih tinggi memiliki dukungan yang lebih baik untuk penanganan kesalahan dengan permintaan JSONP. Namun, Anda perlu menggunakan $.ajaxmetode ini, bukan $.getJSON. Bagi saya, ini berhasil:

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

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

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

Waktu tunggu tampaknya berhasil dan memanggil penangan kesalahan, ketika tidak ada permintaan yang berhasil setelah 10 detik.

Saya membuat posting blog kecil tentang subjek ini juga.

Ini adalah batasan yang diketahui dengan implementasi jsonp asli di jQuery. Teks di bawah ini berasal dari IBM DeveloperWorks

JSONP adalah teknik yang sangat ampuh untuk membangun mashup, tetapi, sayangnya, ini bukan solusi untuk semua kebutuhan komunikasi lintas domain Anda. Ada beberapa kekurangan yang harus dipertimbangkan secara serius sebelum menggunakan sumber daya pembangunan. Pertama dan terpenting, tidak ada penanganan error untuk panggilan JSONP. Jika penyisipan skrip dinamis berfungsi, Anda akan dipanggil; jika tidak, tidak ada yang terjadi. Itu hanya gagal secara diam-diam. Misalnya, Anda tidak dapat menemukan kesalahan 404 dari server. Anda juga tidak dapat membatalkan atau memulai ulang permintaan. Anda dapat, bagaimanapun, waktu tunggu setelah menunggu waktu yang wajar. (Versi jQuery mendatang mungkin memiliki fitur batal untuk permintaan JSONP.)

Namun ada plug-in jsonp yang tersedia di GoogleCode yang menyediakan dukungan untuk penanganan kesalahan. Untuk memulai, cukup lakukan perubahan berikut pada kode Anda.

Anda dapat mengunduhnya, atau hanya menambahkan referensi skrip ke plugin.

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

Kemudian ubah panggilan ajax Anda seperti yang ditunjukkan di bawah ini:

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

Solusi jika Anda terjebak dengan jQuery 1.4:

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

Ini mungkin merupakan batasan jQuery yang "diketahui"; Namun, tampaknya tidak didokumentasikan dengan baik. Saya menghabiskan sekitar 4 jam hari ini mencoba memahami mengapa waktu tunggu saya tidak berfungsi.

Saya beralih ke jquery.jsonp dan itu bekerja dengan sangat baik. Terima kasih.

Tampaknya diselesaikan pada jQuery 1.5. Saya sudah mencoba kode di atas dan mendapatkan panggilan balik.

Saya mengatakan "sepertinya" karena dokumentasi callback kesalahan untuk jQuery.ajax () masih memiliki catatan berikut:

Catatan: Penangan ini tidak dipanggil untuk skrip lintas domain dan permintaan JSONP.

Plugin jquery-jsonp jQuery yang disebutkan dalam jawaban Jose Basilio sekarang dapat ditemukan di GitHub .

Sayangnya dokumentasinya agak sederhana, jadi saya telah memberikan contoh sederhana:

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

Penting Sertakan callbackParameter dalam panggilan $ .jsonp () jika tidak, saya telah menemukan bahwa fungsi callback tidak pernah disuntikkan ke dalam string kueri panggilan layanan (saat ini pada versi 2.4.0 dari jquery-jsonp).

Saya tahu pertanyaan ini sudah lama, tetapi masalah penanganan kesalahan menggunakan JSONP masih belum 'terselesaikan'. Mudah-mudahan pembaruan ini akan membantu orang lain karena pertanyaan ini adalah peringkat teratas di Google untuk "penanganan kesalahan jquery jsonp".

Bagaimana dengan mendengarkan acara onerror skrip? Saya memiliki masalah ini dan menyelesaikannya dengan menambal metode jquery tempat tag skrip dibuat. Ini sedikit kode yang menarik:

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

Apa pendapat Anda tentang solusi ini? Apakah itu mungkin menyebabkan masalah kompatibilitas?