今回は、jQueryのAjaxとAjaxリクエストについての最初の表にあるAjax Requests の分類の中で ふたつめの表の2番目のメソッドload( url, data, callback )を紹介します。

これまで、9回にわたって ajax( options )を 紹介してきましたが、今回のloadメソッドは、それを圧倒的に簡易化した便利メソッドです。今回は、その第1引数urlと第2引数dataを試してみます。

jQueryの取得などについては下記リンクをご参照ください。

load( url )

第1引数で渡すurlは、前回紹介した、ajaxメソッドのurlオプションと同様に、HTTP通信のリクエスト先を指定するものです。

load( url, data, callback )の第2引数以降は省略可能ですので、load( url )のようにURLを渡すだけで使えます。

簡単さが魅力のメソッドですから、説明は後にして、 試してみましょう。下記リンクをクリックするとサンプルページが開きます。

test1

ボタンをクリックすると「ここが書き換わります」と書いてある場所が「テストです」に変わります。

ソースを見てみましょう。
<div>ボタンを押してみてください。

  <button id="a">load</button>

  <p id="my1">ここが書き換わります</p>

</div>

<script type="text/javascript">
jQuery(function($){

  $("#a")
    .click(function () {
       $("#my1").load( "./msg.txt" );
    });
     
});
</script>
サーバー側 ./msg.txt
テストです
id名がaのボタンをクリックするとmsg.txtを読み込んで id名my1の要素へ出力します。簡単ですね。

もちろん、このメソッドは後ろにcssメソッドなどをチェーン接続することも可能です。試してみましょう。

test2

ボタンをクリックするとtest1と同様に「テストです」に変わり、背景色も付きます。

ソースはこうです。
<div>ボタンを押してみてください。
  <button id="a">load</button>
  <p id="my1">ここが書き換わります</p>
</div>

<script type="text/javascript">
jQuery(function($){

  $("#a")
    .click(function () {
       $("#my1")          .load( "./msg.txt" )           .css( "background","gold" );
    });
     
});
</script>
.load( "./msg.txt" ) の後ろへ.css( "background","gold" )をつなげています。

このように、loadメソッドが、他のAjaxメソッド関連メソッドと大きく違っているのは、$(セレクタ).load( url )といった書き方でいわゆるメソッドチェーンの中に接続できるということです。

これに対して、たとえば、ajaxメソッドは$.ajax( options )のようにjQuery(あるいは、$ショートカット)直下のメソッドで、戻り値が、jQueryオブジェクトではなく、XHRオブジェクトになっています。

また、loadメソッドは、サーバーからのレスポンスの出力先として$(セレクタ)で選択された要素(サンプルで言えば、"#my1"の要素)が使われますので、このわずか、$(セレクタ).load( url )という書き方だけで、Ajaxの送受信と出力まで完結してしまう簡便さが魅力です。


では、次ページではload( url セレクタ ) を試します。