jQuery ajax (jsonp) ละเว้นการหมดเวลาและไม่เริ่มเหตุการณ์ข้อผิดพลาด

ในการเพิ่มการจัดการข้อผิดพลาดพื้นฐานฉันต้องการเขียนโค้ดใหม่ที่ใช้ $ .getJSON ของ jQuery เพื่อดึงภาพถ่ายบางส่วนจาก 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)

อย่างไรก็ตามมีปลั๊กอิน jsonp ในGoogleCodeที่ให้การสนับสนุนสำหรับการจัดการข้อผิดพลาด ในการเริ่มต้นเพียงทำการเปลี่ยนแปลงต่อไปนี้กับรหัสของคุณ

คุณสามารถดาวน์โหลดหรือเพิ่มการอ้างอิงสคริปต์ไปยังปลั๊กอิน

<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 error management"

สิ่งที่เกี่ยวกับการฟังเหตุการณ์ 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;
}

คุณคิดอย่างไรกับการแก้ปัญหานี้? มีแนวโน้มที่จะทำให้เกิดปัญหาความเข้ากันได้หรือไม่?