89

基本的なエラー処理を追加するために、jQueryの$.getJSONを使用して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のときに尋ねられたことを付け加えたいと思います

4

7 に答える 7

86

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秒後に成功したリクエストがない場合、タイムアウトはトリックを行い、エラーハンドラーを呼び出すようです。

私もこの件について少しブログ投稿をしました。

于 2011-02-25T19:38:26.917 に答える
67

これは、jQuery のネイティブ jsonp 実装の既知の制限です。以下のテキストは、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);
        }
    });
});
于 2009-06-16T17:10:38.747 に答える
12

jQuery 1.4 に行き詰まっている場合の解決策:

var timeout = 10000;
var id = setTimeout( errorCallback, timeout );
$.ajax({
    dataType: 'jsonp',
    success: function() {
        clearTimeout(id);
        ...
    }
});
于 2011-06-20T17:46:15.443 に答える
8

これは、jQuery の「既知の」制限である可能性があります。ただし、十分に文書化されていないようです。今日、タイムアウトが機能しない理由を理解するために約 4 時間を費やしました。

jquery.jsonpに切り替えたところ、魅力的に機能しました。ありがとうございました。

于 2010-01-13T06:34:29.060 に答える
2

jQuery 1.5 で解決されたようです。上記のコードを試してみましたが、コールバックを受け取りました。

jQuery.ajax()のエラー コールバックのドキュメントには、まだ次の注記があるため、「そう思われる」と言います。

注: このハンドラは、クロスドメイン スクリプトおよび JSONP リクエストでは呼び出されません。

于 2011-02-07T20:45:36.560 に答える
1

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() の呼び出しに callbackParameter を含めます。そうしないと、サービス呼び出しのクエリ文字列にコールバック関数が挿入されないことがわかりました (jquery-jsonp のバージョン 2.4.0 以降)。

この質問が古いことは知っていますが、JSONP を使用したエラー処理の問題はまだ「解決」されていません。この質問は「jquery jsonpエラー処理」でGoogle内でトップにランクされているため、この更新が他の人に役立つことを願っています.

于 2012-10-22T08:25:12.080 に答える