[解決済み] jQuery ajax (jsonp)がタイムアウトを無視してエラーイベントを発生させない件
2023-04-05 15:30:43
質問
基本的なエラー処理を追加するために、Flickrから写真を取り込むためにjQueryの$.getJSONを使用するコードの一部を書き直したいと思っています。これを行う理由は、$.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秒後に成功したリクエストがない場合、エラーハンドラを呼び出すというトリックを実行するようです。
私は少し ブログ記事 を書きました。
関連
-
[解決済み] JSONとJSONPの違いは何ですか?
-
[解決済み] セレクトボックスのオプションをすべて削除してから、オプションを1つ追加して、jQueryで選択するにはどうすればよいですか?
-
[解決済み] jQueryでdata属性で要素を選択する
-
[解決済み] jQuery select onChangeの値を取得する。
-
[解決済み] Ajaxリクエストが200 OKを返すが、successではなくerrorイベントが発生する
-
[解決済み] jQuery hasAttrで要素に属性があるかどうかをチェックする【重複あり
-
[解決済み] jQuery チェックボックスの変更とクリックイベント
-
[解決済み】jQueryとAjaxでBasic認証を使用する。
-
[解決済み] jQuery $.ajaxエラーの応答テキストを取得する方法は?
-
[解決済み】jQueryでRSSをパースする。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jQueryのSELECT要素で特定のオプションを選択するにはどうすればよいですか?
-
[解決済み] jQueryを使って「Please Wait, Loading...」というアニメーションを作成するにはどうすればよいですか?
-
[解決済み] jQuery.ajaxでmultipart/formdataを送信する。
-
[解決済み] GoogleのCDNからjQuery UI CSSをダウンロードする
-
[解決済み] jQueryは要素のレンダリングされた高さを取得しますか?
-
[解決済み] jQueryでフォームフィールドをクリアする
-
[解決済み] jQueryを使用して配列から特定の値を削除する方法
-
[解決済み】jQueryで入力不可属性をトグルする。
-
[解決済み] jQuery / JavaScriptでJSONデータをパースする方法は?
-
[解決済み] Jqueryのコードはヘッダーとフッターのどちらに入れるべきですか?