実は、Ajaxのウラにこそ勝算がある：Web 2.0で変わるWebプログラミングの常識（3/5 ページ）

» 2006年08月25日 08時00分 公開
[大澤文孝，ITmedia]
前のページへ 1|2|3|4|5 次のページへ

　例えば、次のように「callback=resultcallback」を指定してみるとよく分かるだろう。

http://api.search.yahoo.com/WebSearchService/V1/webSearch?appid=YahooDemo&query=apple&results=3&output=json &callback=resultcallback

　すると、次の文字列が得られる（これも同じく実際には改行が含まれない）。


resultcallback({"ResultSet":
  {"type":"web",
  "totalResultsAvailable":242000000,
  "totalResultsReturned":3,
  "firstResultPosition":1,
  …略…,
  "Result":[
    {"Title":"Apple",
     "Summary":"Macintosh hardware, software, and Internet tools. Offering Quicktime info, developer resources, and other items related to Apple computers.",
     "Url":"http:\/\/www.apple.com\/",
     …略…
    },
    {"Title"、"Summary"、など次の結果…},
    …略…
  }
}
);

　この文字列をscriptタグを使って読み込んで実行すれば、「呼び出し結果が、resultcallbackメソッドへと引き渡されて実行される」という動作になる。

　つまり開発者は、resultcallbackという名前のメソッドを用意しておき、その引数を処理することで、Yahoo! Search APIの検索結果を取得して処理ができるわけだ。

　実際にその処理を書いたのが、リスト5だ。リスト5は完全にJavaScriptだけで処理されており、サーバ側に用意すべきものは含まれない（図3）。

図3■リスト5の実行結果
リスト5■動的にscriptタグを作り、Yahoo! Search APIを呼び出す例（動作保証はWindows版IE6のみ）

<html>
<head>
<!-- 動的に埋め込むためのプレースホルダ -->
<script type="text/javascript" charset="utf-8" id="import">
</script>
<script type="text/javascript">
<!--
function resultcallback(result)
{
	// 結果数
	var resultCount = result['ResultSet']['totalResultsReturned'];
	// 元のノード
	var originalnode = document.getElementById('result');
	// 結果を入れるノードを作る
	var resultnode = document.createElement('div');
	resultnode.id = 'result';
	
	// 結果数だけ繰り返してノードを作る
	for (var i = 0; i < resultCount; i++)
	{
		var subnode = document.createElement('div');
		subnode.innerText = result['ResultSet']['Result'][i]['Title'] + 
			"／" + result['ResultSet']['Result'][i]['Url'];
		resultnode.appendChild(subnode);
	}
	// 結果のノードを差し替える
	originalnode.parentNode.replaceChild(resultnode, originalnode);
}
function search()
{
	// 動的にscriptタグを作ってYahoo APIを呼び出す
    // appidは環境に応じて変更すること
	var baseurl = 
      "http://api.search.yahoo.com/WebSearchService/V1/webSearch?appid=YahooDemo";
	// クエリ文字列
	baseurl += "&query=";
	baseurl += encodeURIComponent(document.getElementById('searchtext').value);
	// 結果数（ここでは10件）、JSON、JSONコールバック関数
	// ここではコールバックを「resultcallback」に
	baseurl += "&results=10&output=json&callback=resultcallback";
	// scriptタグの埋め込み
	// （IE6の場合のみ動作する。FirefoxなどではDomツリーの作り直しが必要）
	document.getElementById('import').src = baseurl;
}
-->
</script>
</head>
<body>
<form>
検索文字列：<input type="text" id="searchtext"/><br/>
<input type="button" onClick="javascript:search();" value="検索"/>
</form>
<!-- 結果を埋め込むプレースフォルダ -->
<div id="result">
</div>
</body>
</html>

　リスト5には、scriptタグのプレースフォルダとして、次のように「id= import」としたものを用意してある（importという名前は例として筆者が決めたものであり、どのような名前でも構わない）。


<script type="text/javascript" 
  charset="utf-8" id="import">
</script>
前のページへ 1|2|3|4|5 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ