JSON（TwitterAPI）をJSで読み込む

最近何かとAPIを使ったサービスが増えてきて自分も何か作りたい！！と思ったので、APIの戻り値としてよく使われるJSONデータの扱いに慣れておきましょうなメモ。最初は読み込みから

JSONとは

Ajax（非同期通信）で最近よく使われるJavaScript Object Notationというフォーマットです。
JSONはTwitterAPIの戻り値などでよく使用されます。
JSでAPIを使用したクライアントを作ってみたいのでその一歩として、
TwitterAPIをJSで読み込んでみたいと思います。

読み込んでみる

今回JQueryを使用しようと思います。
Jqueryを使用しない場合、
XMLHttpRequestオブジェクト（非同期通信の制御オブジェクト）を作成し、
コールバック（通信の状態の戻り→通信完了・通信中）の登録後、非同期通信を開始→eval()にて解析→オブジェクト化という手順を踏む必要があります。

Jqueryを使えばそこら辺をあまり意識しないで、
JSONを使用することができます。

使用する、メソッド
$.getJSON(url, data, callback);

callbackでは、data（JSONオブジェクト）とstatus（リクエスト結果、success・error等）が返ってきます。
http://stacktrace.jp/jquery/api/ajax/jquery.ajax.html#status

サンプル

こちらは、TwitterのsearchAPIを使って「地震」のキーワードを５件表示するサンプルです。
ちなみに、callback=?形式のパラメータを送信クエリに付与すると、別ドメインのデータをJSONPを使用して取得することができます。
クロスドメインに関して詳しくは下記で
http://gihyo.jp/dev/serial/01/web20sec/0003

<script type="text/javascript">
$.getJSON('http://search.twitter.com/search.json?callback=?',
  {
    q: "#地震"
  },test);


function test(data, status){
	if(status == "success"){
		for(var i = 0;i < 5;i++){
			$("#search").after("<p>" + data.results[i].text + "</p>");
			}
	}else{
		alert("取得に失敗しました");
	
	}
  }

</script>

</head>

<body>

<div id="search">
</div>

実行例

先のサンプルを実行した例はこちらです