jQueryのajax()を中断する方法

jQueryのajax()を中断する方法

Posted at December 6,2013 1:55 AM
Tag:[abort, Ajax, jQuery]

jQueryのajax()を中断する方法を紹介します。

1.問題点

次のように、ajax()メソッドでHTMLを取得するコードがあります。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('#execute').click(function(){
	$.ajax({
	    url: "http://user-domain/foo.cgi",
	    type: "GET",
            dataType: 'html',
        })
        .done(function( data ) {
            $('#foo').html(data);
	    })
        .fail(function( data ) {
            // ...
        });
    });
});
</script>
<input type="button" id="execute" value="検索" />
<div id="foo"></div>

実行したリクエストについて中断したいケースがありますが、ajax()を中断する方法が分かりません。

2.実行中のajax()を中断する

リクエストを中断するには、ajax()の返却値であるjqxhrオブジェクトを変数に保持し、この変数に対してabort()メソッドを実行します。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var jqxhr;
    $('#execute').click(function(){
        jqxhr = $.ajax({
            url: "http://user-domain/foo.cgi",
            type: "GET",
            dataType: 'html',
        })
        .done(function( data ) {
            $('#foo').html(data);
	    })
        .fail(function( data ) {
            // ...
        });
    });
    $('#stop').click(function(){
        jqxhr.abort();
    });
});
</script>
<input type="button" id="execute" value="検索" />
<input type="button" id="stop" value="停止" />
<div id="foo"></div>

3.直前に実行したajax()を中断する

2項は現在実行中のajax()を中断する方法ですが、ajax()を連続して実行する際、直前に実行したajax()を中断するケースの方が実用的かと思います。

たとえば検索キーワードを変更してフォームボタンを連続でクリックした場合などです。

直前に実行したajax()を中断するには、ajax()実行前にjqxhrオブジェクトを判定し、オブジェクトが存在すればabort()を実行するようにします。

<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var jqxhr;
    $('#execute').click(function(){
        if (jqxhr) {
            jqxhr.abort();
        }
        var text = $('#text').val();
	    jqxhr = $.ajax({
	        url: "http://user-domain/foo.cgi",
            data: {
                text: text
            },
            type: "POST",
            dataType: 'html',
        })
        .done(function( data ) {
            $('#foo').html(data);
	    })
        .fail(function( data ) {
            // ...
        });
    });
});
</script>
<input type="text" id="text" />
<input type="button" id="execute" value="検索" />
<div id="foo"></div>

中断しない場合、実行した回数分、「id="foo"」のエリアに検索結果が表示されますが、中断すれば最後の1回分しか表示されません。

4.CGIのサンプル

参考までに、2項および3項のCGIサンプル(Perl)を示します。sleepの部分で待ち合わせするようにしています。

#!/usr/bin/perl
use strict;
use CGI;
 
sleep 5;
my $q = new CGI();
print $q->header(-charset=>"utf-8");
print $q->param('text');
print $q->end_html;

abort()で中断しないと前回の検索結果を表示してしまいますが、中断することで最新の実行結果のみを表示させることができます。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)