小粋空間  -  a cheap joke and a play on words site

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

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

１．問題点

次のように、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()を中断する方法が分かりません。

２．実行中の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>

３．直前に実行したajax()を中断する

２項は現在実行中の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回分しか表示されません。

４．CGIのサンプル

参考までに、２項および３項の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()で中断しないと前回の検索結果を表示してしまいますが、中断することで最新の実行結果のみを表示させることができます。