はったりエンジニアの備忘録

jQuery で Ajax 処理を書いているとき、API 通信の一部のリクエストだけ JSON が返ってこなくなる現象にハマりました。

jQuery.ajax() は返ってきたステータスコードを見て成否をチェックしていますが、301 Moved Permanently や 302 Found でも成功したとみなされ success の処理が走るようです。

jQuery.ajax({
    url: '/api/',
    dataType: 'json',
    success: function(data) {
        // ステータスコードが 301 や 302 でも実行される
        console.log('OK');
    }
});

今回ハマった箇所では http のリクエストを https へ 302 でリダイレクトしていました。結果的に success まで確実に処理は走っているけど API の結果が返ってこない状態になりました。こういう場合、jQuery 側でリダイレクト先に再度リクエストを投げてくれるわけではありません。

jQuery 1.4 から成功時に受け取る引数が増えており、これを使ってステータスコードをチェックできます。第 3 引数には XMLHttpRequest オブジェクトが入っており詳細な情報が取得できます。

jQuery.ajax({
    url: '/api/',
    dataType: 'json',
    success: function(data, status, xhr) {
        if (xhr.status === 200) {
            // ステータスコードが 200 の場合
        } else {
            // ステータスコードが 200 以外の場合
        }
    }
});

気になったので jQuery 本体のソースコードを確認してみると…。

if ( status >= 200 && status < 300 || status === 304 ) {...}

このように 200 番台と 304 しかチェックしておらず、それ以外のステータスコードをどう処理するかはユーザーに任せられているようです。