TopJavaScriptjQuery > 2013年12月
2013年12月19日

jQuery.getScript()のまとめ

December 19,2013 1:55 AM
Tag:[, ]
Permalink

jQuery.getScript()について、逆引きリファレンスっぽくまとめてみました。

1.getScript()とは?

getScript()は、JavaScriptファイルを非同期で取得するためのメソッドです。

$.getScript( "http://user-domain/foo.js", function( script, textStatus, jqxhr ) {
    //...
});

クロスドメインに対応しているので、外部サーバのJavaScriptファイルを取得することも可能です。

getScript()は、次のajax()メソッドのショートハンドになります。

$.ajax({
    url: url,
    dataType: "script",
    success: success
});

2.送信先URLを指定するには?

送信先URLは第1パラメータに設定します。

$.getScript( 'http://user-domain/foo.js', ...

3.結果の受信は?

getScript()の第2パラメータのコールバック関数で結果を受信します。

$.getScript( "http://user-domain/foo.js", function( script, textStatus, jqxhr ) {
    console.log( textStatus );
    console.log( jqxhr.status );
});

「script」は返却されたJavaScriptファイル、「textStatus」はテキストステータス、「jqxhr」はjqxhrオブジェクトになります。

あるいは「done」「fail」「always」オプションでも受信できます。

$.getScript( "http://user-domain/foo.js" )
    .done(function( script, textStatus ) {
        console.log( textStatus );
    })
    .fail(function( jqxhr, settings, exception ) {
        console.log( jqxhr.status );
    })
    .always(function( script, settings, exception ) {
        console.log( textStatus );
    });
});

「done」オプションは通信が成功したとき、「fail」オプションは通信に失敗したとき、「always」オプションは通信が完了したときに起動されます。

4.取得したJavaScriptファイルの扱い方は?

script要素で取得した場合と同様、取得成功後はJavaScriptファイルに含まれる関数を起動することができます。

foo.js

function test( message ){
    alert( message );
}
$.getScript( "http://user-domain/foo.js" )
    .done(function( script, textStatus ) {
        test( textStatus );
    })
});

5.キャッシュされたデータを受信したくないのですが?

getScript()はデフォルトでキャッシュオフ(false)が設定されています。

ajaxSetup()で「true」を設定すればキャッシュされなくなるようです。

$.ajaxSetup({
  cache: true
});

6.同期で通信したいのですが?

getScript()は非同期のみです。

同期で通信したい場合はajax()を利用し、さらに「async」オプションを設定します。「false」を設定すれば、jQuery.ajax()の後方の処理が待ち合わせされます。

7.ステータスコードで処理を振り分けたいが?

コールバックの「statusCode」で振り分けることができます。

8.すぐに使えるサンプルは?

サンプルを作ってみました。

$.getScript( "http://user-domain/foo.js" )
    .done(function( script, textStatus ) {
        // ...
    })
    .fail(function( jqxhr, settings, exception ) {
        // ...
    })
    .always(function( script, settings, exception ) {
        // ...
    });
});

それぞれのコールバックを分割することもできます。変数jqxhrのスコープに気をつけてください。

var jqxhr = $.getScript( "http://user-domain/foo.js" );
jqxhr.done(function( script, textStatus  ) {
    // ...
});
jqxhr.fail(function( jqxhr, settings, exception ) {
    // ...
});
jqxhr.fail(function( script, settings, exception ) {
    // ...
});

9.参考サイト

参考サイトは以下です。ありがとうございました。

jQuery.getScript()
Comments [0] | Trackbacks [0]
2013年12月11日

jQueryでajax()の重複実行を回避する方法

December 11,2013 1:55 AM
Tag:[, ]
Permalink

jQueryでajax()の重複実行を回避する方法を紹介します。

1.問題点

次のような、ajax()メソッドを使って「http://user-domain/foo.cgi」にアクセスし、実行結果を取得するコードがあります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.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()の重複を回避するためには、ajax()実行時に返却されるjqxhrオブジェクトを利用します。

ajax()実行前にjqxhrオブジェクトを判定し、オブジェクトが存在する場合はajax()を実行しないようにします(赤色部分を追加)。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    var jqxhr;
    $('#execute').click(function(){
        if (jqxhr) {
            return;
        }
        jqxhr = $.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>

これで初回にクリックしたリクエストだけが処理されます。

ついでにfoo.cgiのサンプルも掲載しておきます。時間がないので重複実行が分かるようなレスポンスを返却するところまで実装できていません、すいません。

#!/usr/bin/perl
 
use strict;
use CGI;
 
my $q = new CGI();
 
print $q->header(-charset=>"utf-8");
print $q->param('text');
print $q->end_html;
Comments [0] | Trackbacks [0]
2013年12月 6日

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

December 6,2013 1:55 AM
Tag:[, , ]
Permalink

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

Comments [0] | Trackbacks [0]
2013年12月 5日

jQuery.ajax()で取得したHTMLの一部を抜き出す方法

December 5,2013 1:23 AM
Tag:[, ]
Permalink

jQuery.ajax()で取得したHTMLの一部を抜き出す方法を紹介します。

1.問題点

次のように、ajax()メソッドで取得したHTMLを丸ごと埋め込むサンプルはネットで多くみかけます。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $.ajax({
        url: 'http://user-domain/foo.html',
        dataType: 'html',
    })
    .done(function(data) {
        $("#bar").html(data);
    })
    .fail(function(data) {
        // ...
    });
</script>
<div id="bar"></div>

が、取得したHTMLの一部だけを抜き出して利用したい場合、どのように記述すればよいか分かりません。

2.取得したHTMLの一部を抜き出す(その1)

たとえば、取得するページ「http://user-domain/foo.html」の内容が以下のような内容とします。

<!doctype html>
<html>
  <head>
  <meta charset="utf-8" />
  <title>hoge</title>
  </head>
  <body>
    <div>
      <p id="hoge">hoge</p>
      <p id="fuga">fuga</p>
    </div>
  </body>
</html>

この中から

hoge

というテキストだけを抜き出したい場合、done()メソッド内で引数のdataを「$(data)」という風に指定し、さらにfind()を使えば取得できるようです。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $.ajax({
        url: 'http://user-domain/foo.html',
        type: 'GET',
        dataType: 'html',
    })
    .done(function(data) {
        $(data).find('p').each(function(){
            if ($(this).is('#hoge')) {
                $("#bar").html($(this).text());
                return false;
            }
        });
    })
    .fail(function( data ) {
        // ...
    });
});
</script>
<div id="bar"></div>

idセレクタで指定する場合、次のように記述してもOKです。

    .done(function(data) {
        $("#bar").html($(data).find('#hoge').text());
    })

3.取得したHTMLの一部を抜き出す(その2)

セレクタのコンテキストとして$(data)またはdataを与えても抜き出せるようです。

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

または

    .done(function(data) {
        $("#bar").html($('#hoge', data).html());
    })

4.注意事項

サンプルを作って試したところ、期待する動作になる場合とそうでない場合がありました。

たとえばサンプルのHTMLにあるdiv要素をfind()で指定しても正常にパースできないようです。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3