デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.getJSON( )サーバーからjsonデータを取得

構文

サーバーからjsonデータを取得返値:jqXHRオブジェクト
jQuery.getJSON( url [,object] [function])ver1.0〜
・url:読む込むデータのurl
・object:サーバに送るデータを設定。値の型はobjectオブジェクト。
・function:通信が「成功」したら実行される処理を設定。以下の引数を受け取る
 ・第1引数:取得したデータ
 ・第2引数:状態(success、error、notmodified、timeout、parsererror)
 ・第3引数:jqXHRオブジェクト

機能

jQuery.getJSONメソッドはjQuery.getメソッドをjsonに限定しただけのメソッドで、jQuery.getメソッドの引数typeに"json"を設定したのと全く同じ機能になります。ですので、先にjQuery.getメソッドを理解するようにして下さい。引数の意味はすべてjQuery.getメソッドと同じです

解説

jsonデータについて

jsonデータはjavaScriptをベースにした「データ記述言語」です。データの型としては文字列/数値/ブール値など扱えますが、ポイントとなるのは配列とObjectオブジェクトでしょう。これらgetJSONメソッドで読み込むと、javaScript側でeval関数などを使わなくても(文字列ではなく)データとして利用できるのです。
→参考(wikipedia:JSON

ただし以下の様にjavaScriptのobjectオブジェクトと異なる点があり注意しなければなりません

JSONデータの注意点
・シングルクォートは使えません
・objectオブジェクトのプロパティも文字列として設定します(ダブルクォートで囲む)。
・文字コードは「UTF-8」

今回読み込むデータは(data/simple.json)です。nameプロパティ(値はjhon)とageプロパティ(値は18)の2つのプロパティを持ったobjectオブジェクトです。

{"name":"john", "age":18}

objectオブジェクトのプロパティにダブルクォートが付くのは違和感がありますが、こうしないといけません。間違いやすいので注意しましょう。

jsonデータを取得する(Objectオブジェクトの例)

読み込むデータが「json」に限定されるだけで、利用方法はjQuery.getメソッドと全く同じです。
サンプル(getJSON/01.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。

jQueryは以下の様に記述され、buttonをクリックするとjQuery.getJSONメソッドを利用してjsonデータを読み込みます。読込が完了したら引数に設定したfunction「getFunc」が実行されます。

$("button").click(function(){
	$.getJSON("../data/simple.json", getFunc);
});

getFuncは以下の様に記述されています。ポイントは2行目の「myData.name」です。myDataは引数で渡される受信データ(つまりjsonデータ)ですが、これに直接プロパティを指定して値が取得できるのです。

function getFunc(myData){
	$("div").text("私の名前は"+myData.name);
};

シンプルなデータのやり取りに便利かもしれません。またパース(文字列を解析してデータに再構築)する速度はXMLより高速だそうです。

jsonデータを取得する(配列の例)

続いて配列の例を確認します。読み込むデータは(data/simple2.json)で、以下の様な配列となっています。

["zero","one","two"]

ではサンプル(getJSON/02.html)を開いて、body内の構成はgetJSON/01.htmlと同じことを確認して下さい。 jQueryも殆ど同じで、まずは読み込むデータを以下の様に「simple2.json」に変更しています。

$("button").click(function(){
	$.getJSON("../data/simple2.json", getFunc);
});

getFuncは以下の様に記述され、受け取ったデータ「myData」の0番目の要素をdiv要素に表示するようにしています。

function getFunc(myData){
	$("div").text("0番目の要素は→"+myData[0]);
};

buttonをクリックすると「0番目の要素は→zero」と表示されることから、きちんと配列として扱えているのが確認できます。

関連項目

json以外のデータを読み込む場合はjQuery.getメソッドを利用してください。
javaScriptを読み込んで実行したい場合はjQuery.getScriptメソッドを利用してください。
文字列をjsonに変換する場合はユーティリティのjQuery.parseJSONメソッドを利用してください。

メモ

promiseオブジェクトのメソッドを利用

仕組みはgetメソッドと同じなので、同じようにdeferredオブジェクトのコールバックで紹介しているメソッドが利用できます(promiseオブジェクトなので状態を変化させるメソッドは利用できません)。

サンプル(getJSON/test01.html)を開いてjQueryが以下の様に記述されているのを確認してください。

読み込もうとしている「test.json」は存在しないため読込に失敗します。失敗した時の処理はdeferredオブジェクトfailメソッドを利用して設定しアラートで「FAIL!」と表示するようにしました

$("button").click(function(){
	$.getJSON("../data/test.json").fail(function(){
		alert("FAIL!");
	});
});

結果としてbuttonをクリックすると、アラートで「FAIL!」と表示されるためpromiseオブジェクトのメソッドが利用できる事を確認できます。