次に挙げるのが、ユーザーが「検索」ボタンをクリックした際に、Yahoo! Search APIのURLが作成されるものだ。
var baseurl =
"http://api.search.yahoo.com/WebSearchService/
V1/webSearch?appid=YahooDemo";
baseurl += "&query=";
baseurl +=
encodeURIComponent(
document.getElementById('searchtext').value);
// 結果数、JSON、JSONコールバック関数
// ここではコールバックを「resultcallback」に
baseurl +=
"&results=10&output=json&callback=resultcallback";
このURLでは、「output=json&callback=resultcallback」を指定しているため、前述したように、検索結果を引数としてresultballbackメソッドを呼び出すJavaScriptの文字列が返される。
さてこのように生成したURLを、先に用意しておいた、scriptタグのプレースフォルダのsrc属性に差し込む。
document.getElementById('import').src = baseurl;
するとこのURLで示されるWebサービスが実行され、その結果が埋め込まれる。つまり、結果として戻ってきたJavaScriptが実行されるのだ。
src属性に設定するだけで実行されるのは、ブラウザ環境としてIE 6(Windows版)だけだ。ほかのブラウザでは、DOMツリーの作り直しが必要となる。その詳細は後述しよう。
結果として戻ってくるJavaScriptは、すでに説明したように、次のようなresultcallbackメソッドの呼び出しとなる(このresultcallbackは、URLパラメータのcallbackで決めたものであり、任意のものに変更できる)。
resultcallback({"ResultSet":{"type":"web","totalResultsAvailable":242000000,…略…}});
さらにYahoo! Search APIからの戻り値は、
{"ResultSet":
{"type":"web",
"totalResultsAvailable":242000000,
"totalResultsReturned":3,
"firstResultPosition":1,
…略…,
"Result":[
{結果1}
{結果2}
}
}
という構造になっており、
var resultCount =
result['ResultSet']['totalResultsReturned'];
と指定して、得られた検索結果の総数も分かる。
実際の結果は、result['ResultSet']['Result'][要素番号]として取得できるので、この処理をループして、結果のDOMツリーを生成すればよい。
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);
}
このようにして作成したDOMツリーを、HTMLコンテンツに差し替えれば、図3に示した出力ができあがる。
ここでは簡単な例としてinnerTextを使った構成としたため、IE 6以外のブラウザ(たとえばFirefox)ではうまく動作しない。それに、実際には、得られた文字列をHTMLエンコードする処理も必要だ。
Copyright © ITmedia, Inc. All Rights Reserved.