jQuery ajax(jsonp)는 타임아웃을 무시하고 오류 이벤트를 발생시키지 않습니다.

jQuery ajax(jsonp)는 타임아웃을 무시하고 오류 이벤트를 발생시키지 않습니다.

기본적인 오류 처리를 추가하기 위해 jQuery의 $.getJ를 사용한 코드를 다시 쓰고 싶었습니다.Flickr의 사진을 가져오게 해 주세요.이렇게 하는 이유는 $.getJ가SON은 에러 처리 또는 타임아웃 처리를 제공하지 않습니다.

$.getJ 이후SON은 단지 $ajax의 포장지일 뿐입니다.저는 그것을 다시 쓰기로 결정했고 깜짝 놀랐습니다.그것은 흠잡을 데 없이 작동합니다.

하지만 이제 재미는 시작이야.의도적으로 (URL을 변경함으로써) 404를 발생시키거나 (인터웹에 접속하지 않음으로써) 네트워크를 타임아웃시켜도 에러 이벤트는 전혀 발생하지 않습니다.나는 내가 무엇을 잘못하고 있는지 모르겠다.도움에 감사드립니다.

코드는 다음과 같습니다.

$(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초 후에도 요구가 정상적으로 실행되지 않으면 오류 핸들러를 호출하는 것으로 보입니다.

나는 이 주제에 대한 블로그 투고도 했다.

이것은 jQuery의 네이티브 jsonp 구현에 관한 기존의 제한입니다.아래 텍스트는 IBM DeveloperWorks에서 가져온 것입니다.

JSONP는 매시업을 구축하기 위한 매우 강력한 기술이지만 유감스럽게도 모든 도메인 간 통신 요구를 해결할 수 있는 것은 아닙니다.개발 자원을 투입하기 전에 고려해야 할 몇 가지 단점이 있습니다.우선, JSONP 콜의 에러 처리는 없습니다.다이내믹 스크립트 삽입이 기능하면 호출됩니다.동적 스크립트 삽입이 기능하지 않으면 아무 일도 일어나지 않습니다.그냥 소리 없이 실패한다.예를 들어, 서버로부터 404 에러를 검출할 수 없습니다.또한 요청을 취소하거나 재시작할 수 없습니다.단, 적절한 시간을 기다린 후 타임아웃할 수 있습니다.(향후 jQuery 버전에는 JSONP 요청에 대한 중단 기능이 있을 수 있습니다.)

그러나 Google Code에는 오류 처리를 지원하는 jsonp 플러그인을 사용할 수 있습니다.시작하려면 코드를 다음과 같이 변경하십시오.

다운로드하거나 플러그인에 스크립트 참조만 추가할 수 있습니다.

<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()의 오류 콜백 문서에는 다음과 같은 주의사항이 남아 있기 때문에 "sums to be"라고 말합니다.

주의: 이 핸들러는 크로스 도메인스크립트 및 JSONP 요구에 대해서는 호출되지 않습니다.

Jose Basilio의 답변에 언급된 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"
        }
    });

중요 콜 $.jsonp()에 callback Parameter를 포함합니다.그렇지 않으면 콜백 함수는 서비스 콜의 쿼리 문자열에 삽입되지 않습니다(현재 jquery-jsonp 버전 2.4.0).

오래된 질문인 것은 알지만, JSONP를 사용한 에러 처리 문제는 아직 해결되지 않았습니다.이 질문이 Google 내에서 "jquery jsonp 오류 처리"에 대한 상위권이기 때문에 이 업데이트가 다른 사용자에게 도움이 되기를 바랍니다.

스크립트의 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;
}

이 솔루션에 대해 어떻게 생각하십니까?호환성 문제가 발생할 가능성이 있습니까?

언급URL : https://stackoverflow.com/questions/1002367/jquery-ajax-jsonp-ignores-a-timeout-and-doesnt-fire-the-error-event