jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報

Ajax

スポンサーリンク

jQuery を利用することで Ajax (エイジャックス) のコードもかなり簡易化することが可能です。

一般には Ajax を利用するに際して jQuery を利用する動機としてはブラウザの違いを吸収するということに加えて、ネットワークを介する呼び出しとなることから煩雑になりがちなエラー処理をスマートに行うということがあげられます。

ここでは具体例を通して使い方をみていきます。

jQuery 1.8 以降でそれ以前の Ajax メソッド (success, error, complete) は deprecated というステータスになりました。 こちらの新しい Ajax 利用方法を参考にしてください。

サーバーから HTML を取得して、 div 要素にセットする

ここではボタンをクリックした時に、バックエンドでサーバーから HTML 文書を取得し、その HTML をそのまま div 要素にセットする例を考えます。

jQuery を利用したコードは次のようになります。

$('#button1').click(function(){
  $.ajax({
    url: "ajax-test.html",
    dataType: "html",
    cache: false,
    success: function(data, textStatus){
      // 成功したとき
      // data にサーバーから返された html が入る
    },
    error: function(xhr, textStatus, errorThrown){
      // エラー処理
    }
  });
});

パラメータについて簡単に説明します。 url は裏で呼び出しを行う先の URL です。 dataType はサーバーから返されることを期待するデータフォーマットです。 "html" を指定すると HTML として、 "json" を指定すると JSON です。 "json" の場合は後述の success ファンクションに、評価済みのオブジェクトが渡されます。 cache を false にするとブラウザ、サーバー及び中間のプロキシサーバー等でのキャッシュを防ぐために、 URL にランダムな値が追加されます。

success、 error にはそれぞれ呼び出しが成功したときに呼び出す関数オブジェクトをセットします。

実際にデモを動かしてみましょう。

この例では裏側で HTML を取得してそれを div 要素にセットしています。

コードは次の通りです。

$('#button1').click(function(){
  $.ajax({
    url: "ajax-test.html",
    dataType: "html",
    cache: false,
    success: function(data, textStatus){
      $('#div1').html(data);
    },
    error: function(xhr, textStatus, errorThrown){
      alert('Error! ' + textStatus + ' ' + errorThrown);
    }
  });
});

ここで、エラーが発生した場合を試すために 404 Not Found となる適当な URL を指定して呼び出してみます。すると次のようになります。

サーバーから JSON 文字列を取得して、作ったデータを div 要素にセットする

実際のアプリケーションでは、サーバーからデータを取得する時は HTML よりも軽量の JSON で行う方が望ましい場合が多々あります。

サーバーから JSON を期待する場合は、前述の通り dataType オプションに "json" とします。すると、success オプションに渡す関数オブジェクトのパラメータには、 html (json) 文字列ではなく、評価後のオブジェクトが渡されます。

また、パラメータを追加する場合は data オプションに、名前と値のペアを渡せばサーバー側でその名前で受け取れます。

次の具体例をみてください。

Param1:
Param2:

この例ではテキストボックスに入力した二つの値をサーバーに送って、サーバーからそのデータのそのまま返します。サーバーからは JSON でデータを返します。

  $.ajax({
    url: "ajax-test.php",
    type: "POST",
    cache: false,
    dataType: "json",
    data: {
      param1: $('#text1').val(),
      param2: $('#text2').val()
    },
    success: function(o){
      $('#div3').html(o.data1 + " - " + o.data2);
    },
    error: function(xhr, textStatus, errorThrown){
      alert('Error');
    }
  });

success ではいきなり o.data1 のようにしてデータを取得しています。これは JSON 文字列を jQuery が既に評価してから success に渡しているから可能なのです。

jQuery AJAX 関連記事

その他の AJAX 関連記事はこちらです。

スポンサーリンク
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール
スポンサーリンク

© 2011-2013 Keisuke Oyama jQuery 入門