jQueryのよく使いそうなAjax関係のAPIをまとめてみました
ページの更新性を高めたり、
ページの読み込みを早くしたり、ページ操作のストレスを軽減したりする目的で、
Ajaxが使われる機会はとても増えてきています。
jQueryはこのAjaxの機能を、とても使いやすくしてくれます。
ただ、その記述方法は目的によっていくつかあり、
その記述方法は昔のjQueryのバージョンとは変化してます。
そこで、今のjQuery(1.8以降)でのAjaxの基本的な使い方をまとめてみました。
「$.ajax()」: Ajax全般を扱う
通信を行うファイルの形式を選ばない、汎用的な方法です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | $(function(){ /*---------------- Ajax全般 ----------------*/ //最小限 $.ajax({ url: "module.html" }).done(function(data){ //ajaxの通信に成功した場合 alert("success!"); $(".example").html(data); }).fail(function(data){ //ajaxの通信に失敗した場合 alert("error!"); }); //または $.ajax({ url: "module.html" }).then(function(data){ //ajaxの通信に成功した場合 alert("success!"); $(".example").html(data); }, function(data){ //ajaxの通信に失敗した場合 alert("error!"); }); //主なオプション $.ajax({ url: "module.html", cache: false, //falseにすると、ajaxの内容をキャッシュしないようにする。defaultはtrue。省略可。 data: { //サーバーにGETで渡す情報。渡す必要がなければ省略可。 "key" : "value" }, statusCode: { //HTTPコードが応答された場合に実行する内容を指定。必要なければ省略可。 404: function(){ alert("Page not found."); } }, type: "html", //xml, json, jsonp, text, script, htmlから該当のものを記入。省略した場合はxml,json,script,htmlから自動判別。空白区切りで複数指定可(その中から自動判別)。 user: "sterfield", //認証リクエストがある場合のユーザー名。認証がなければ省略可。 password: "XXXXXX" //認証リクエストがある場合のパスワード。認証がなければ省略可。 }).done(function(data, textStatus, jqXHR){ alert("success!"); $(".example").html(data); }).fail(function(data, textStatus, errorThrown){ alert(textStatus); //エラー情報を表示 console.log(errorThrown.message); //例外情報を表示 }).always(function(data, textStatus, returnedObject){ //以前のcompleteに相当。ajaxの通信に成功した場合はdone()と同じ、失敗した場合はfail()と同じ引数を返します。 alert(textStatus); }); }); |
jQueryの古いバージョンから使うことの出来る方法ですが、
その記述ルールが、バージョンを経るごとに変化しています。
以前はsuccess, error, completeというオプションで処理を行っていたものが、
現在はsuccess→.done()、error→.fail()、complete→.always()というjQuery.Deferredの記述形式を用いたものに変化しています。
.done()、.fail()の代わりに、.then(function(){}, function(){})という記述の仕方も可能で、
昔の$.ajax()の記述方法と比べると、若干シンプルになっています。
オプションも基本はURLだけを指定していればよく、ファイル形式などは自動で判別してくれます。
「$.get()」：$.ajax()の簡略型
エラーの情報などを重視しない場合は、こちらの書き方で十分です。
|
1 2 3 4 5 6 7 8 9 | $(function(){ /*------------------------------------------------ ページを読み込む ------------------------------------------------*/ $.get("module.html", data, function(data){ //指定のURLのページを読み込み、コールバック関数の引数としてページの内容を渡します。getJSONの第２引数のdataは、サーバーにGETで渡す情報です。 alert("success!"); $(".example").html(data); }); }); |
プロパティが少ないこと以外は、$.ajax()と同じです。
「$(セレクタ).load()」：要素に外部のHTML(PHP)の要素を読み込む
特定の要素内に、外部ファイルの特定要素を読み込みたいときなどは、こちらの書き方がシンプルで使いやすいです。
|
1 2 3 4 5 6 7 8 | $(function(){ /*------------------------------------------------ 要素に外部のHTML(PHP)の要素を読み込む ------------------------------------------------*/ $(".example").load("module.html .target", function(){ //最初のセレクターで指定した要素内に、load()のURLおよびセレクタから取得した要素を読み込みます。 alert("success!"); //読み込み後に実行 }); }); |
セレクタで指定した要素内に、.load()の第１引数として指定したURLとそのHTML内のセレクタで指定された要素を読み込みます。
$.ajax()や$.get()だと少し複雑な処理が必要となる、
外部ファイルからの特定要素の抽出を自動でしてくれるので、
とても便利です。
「$.getJSON()」：JSONを読み込む
JSONファイルの読み込みならこちらの方法が断然シンプルで扱いやすいです。
|
1 2 3 4 5 6 7 8 | $(function(){ /*------------------------------------------------ JSONを読み込む ------------------------------------------------*/ $.getJSON("example.json", data, function(json){ //指定のURLのJSONを読み込み、コールバック関数の引数としてJSONの値を渡します。getJSONの第２引数のdataは、サーバーにGETで渡す情報です。 var jsonData = json; }); }); |
「$.getScript()」：JavaScriptを読み込む
JavaScriptファイルを動的に読み込むときはこちらが便利です。
|
1 2 3 4 5 6 7 8 | $(function(){ /*------------------------------------------------ JavaScriptを読み込む ------------------------------------------------*/ $.getScript("example.js", function(){ alert("Script loaded and executed."); }); }); |
こうやってまとめてみると、jQueryの昔のバージョンと比べると、
かなり記述に必要な項目が簡略化されて、
Ajaxが扱いやすくなっていることがわかりました。
用途による使い分けもわかりやすくなっていますので、
是非参考になさってください。
参考サイト
jQuery モダンAjaxな書き方を目指して 〜Deferredを使ったAJAX〜 – Hack Your Design!
jQuery.ajax() | jQuery API Documentation
$.ajax() | jQuery 1.9 日本語リファレンス | js STUDIO
jQuery.get( url, data, callback ) – jQuery 日本語リファレンス
Author Profile
SHARE
