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 にはそれぞれ呼び出しが成功したときに呼び出す関数オブジェクトをセットします。
コード例は次の通りです。
$('#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);
}
});
});
サーバーから JSON 文字列を取得して、作ったデータを div 要素にセットする
実際のアプリケーションでは、サーバーからデータを取得する時は HTML よりも軽量の JSON で行う方が望ましい場合が多々あります。
サーバーから JSON を期待する場合は、前述の通り dataType オプションに "json" とします。すると、success オプションに渡す関数オブジェクトのパラメータには、 html (json) 文字列ではなく、JSON 文字列を評価した後のオブジェクトが渡されます。
また、パラメータを追加する場合は data オプションに、名前と値のペアを渡せばサーバー側でその名前で受け取れます。
次の具体例をみてください。
この例ではテキストボックスに入力した二つの値をサーバーに送って、サーバーからそのデータのそのまま返します。サーバーからは 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 関連記事はこちらです。