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

[大澤文孝，ITmedia]

　次に挙げるのが、ユーザーが「検索」ボタンをクリックした際に、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エンコードする処理も必要だ。