jQuery ajax (jsonp) bỏ qua thời gian chờ và không kích hoạt sự kiện lỗi

Để thêm một số xử lý lỗi cơ bản, tôi muốn viết lại một đoạn mã sử dụng $ .getJSON của jQuery để lấy một số ảnh từ Flickr. Lý do của việc này là $ .getJSON không cung cấp khả năng xử lý lỗi hoặc làm việc với thời gian chờ.

Vì $ .getJSON chỉ là một trình bao bọc xung quanh $ .ajax, tôi đã quyết định viết lại điều này và gây ngạc nhiên bất ngờ, nó hoạt động hoàn hảo.

Bây giờ niềm vui bắt đầu mặc dù. Khi tôi cố tình gây ra lỗi 404 (bằng cách thay đổi URL) hoặc khiến mạng hết thời gian chờ (do không được kết nối với các mạng xen kẽ), sự kiện lỗi hoàn toàn không kích hoạt. Tôi bối rối không biết mình đang làm gì sai. Giúp đỡ được nhiều đánh giá cao.

Đây là mã:

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

});

Tôi muốn nói thêm rằng câu hỏi này đã được hỏi khi jQuery ở phiên bản 1.4.2

jQuery 1.5 trở lên hỗ trợ tốt hơn cho việc xử lý lỗi với các yêu cầu JSONP. Tuy nhiên, bạn cần sử dụng $.ajaxphương pháp thay thế $.getJSON. Đối với tôi, điều này hoạt động:

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

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

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

Thời gian chờ dường như thực hiện thủ thuật và gọi trình xử lý lỗi, khi không có yêu cầu thành công nào sau 10 giây.

Tôi cũng đã làm một bài đăng blog nhỏ về chủ đề này.

Đây là một hạn chế đã biết với việc triển khai jsonp gốc trong jQuery. Văn bản dưới đây là từ IBM DeveloperWorks

JSONP là một kỹ thuật rất mạnh để xây dựng các mashup, nhưng thật không may, nó không phải là phương pháp chữa trị cho tất cả các nhu cầu giao tiếp giữa các miền của bạn. Nó có một số nhược điểm cần được xem xét nghiêm túc trước khi cam kết nguồn lực phát triển. Đầu tiên và quan trọng nhất, không có lỗi xử lý cho các cuộc gọi JSONP. Nếu tính năng chèn tập lệnh động hoạt động, bạn sẽ được gọi; nếu không, không có gì xảy ra. Nó chỉ âm thầm thất bại. Ví dụ: bạn không thể bắt được lỗi 404 từ máy chủ. Bạn cũng không thể hủy bỏ hoặc bắt đầu lại yêu cầu. Tuy nhiên, bạn có thể hết thời gian chờ sau một khoảng thời gian hợp lý. (Các phiên bản jQuery trong tương lai có thể có tính năng hủy bỏ các yêu cầu JSONP.)

Tuy nhiên, có một trình cắm jsonp có sẵn trên GoogleCode hỗ trợ xử lý lỗi. Để bắt đầu, chỉ cần thực hiện các thay đổi sau đối với mã của bạn.

Bạn có thể tải xuống hoặc chỉ cần thêm tham chiếu tập lệnh vào trình cắm.

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

Sau đó, sửa đổi lệnh gọi ajax của bạn như được hiển thị bên dưới:

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

Một giải pháp nếu bạn gặp khó khăn với jQuery 1.4:

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

Đây có thể là một hạn chế "đã biết" của jQuery; tuy nhiên, nó dường như không được ghi chép đầy đủ. Tôi đã dành khoảng 4 giờ hôm nay để cố gắng tìm hiểu lý do tại sao thời gian chờ của tôi không hoạt động.

Tôi đã chuyển sang jquery.jsonp và nó hoạt động như một sự quyến rũ. Cảm ơn bạn.

Có vẻ như đã được giải quyết kể từ jQuery 1.5. Tôi đã thử mã ở trên và tôi nhận được cuộc gọi lại.

Tôi nói "dường như là" bởi vì tài liệu về lỗi gọi lại cho jQuery.ajax () vẫn có lưu ý sau:

Lưu ý: Trình xử lý này không được gọi cho các yêu cầu tập lệnh miền chéo và JSONP.

Bạn có thể tìm thấy plugin jquery-jsonp jQuery trong câu trả lời của Jose Basilio trên GitHub .

Thật không may, tài liệu hơi khó hiểu, vì vậy tôi đã cung cấp một ví dụ đơn giản:

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

Quan trọng Bao gồm callbackParameter trong lệnh gọi $ .jsonp () nếu không, tôi thấy rằng hàm gọi lại không bao giờ được đưa vào chuỗi truy vấn của lệnh gọi dịch vụ (hiện tại kể từ phiên bản 2.4.0 của jquery-jsonp).

Tôi biết câu hỏi này đã cũ, nhưng vấn đề xử lý lỗi khi sử dụng JSONP vẫn chưa được 'giải quyết'. Hy vọng rằng bản cập nhật này sẽ hỗ trợ những người khác vì câu hỏi này được xếp hạng hàng đầu trong Google về "xử lý lỗi jquery jsonp".

Điều gì về nghe sự kiện lỗi của kịch bản? Tôi đã gặp sự cố này và đã giải quyết nó bằng cách vá phương thức của jquery nơi thẻ tập lệnh được tạo. Đây là đoạn mã thú vị:

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

Bạn nghĩ gì về giải pháp này? Nó có khả năng gây ra sự cố tương thích không?