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

見た目にインパクトが大きいAjax利用のWebアプリケーション。しかし、その見た目を支える要となるものは、背後にある有益な情報処理と活用方法だ。Ajaxのインパクトに負けないWebアプリはどのように作られるのか？

[大澤文孝，ITmedia]

　次に挙げるのが、ユーザーが「検索」ボタンをクリックした際に、Yahoo! Search APIのURLが作成されるものだ。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　このURLでは、「output=json&callback=resultcallback」を指定しているため、前述したように、検索結果を引数としてresultballbackメソッドを呼び出すJavaScriptの文字列が返される。

　さてこのように生成したURLを、先に用意しておいた、scriptタグのプレースフォルダのsrc属性に差し込む。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　するとこのURLで示されるWebサービスが実行され、その結果が埋め込まれる。つまり、結果として戻ってきたJavaScriptが実行されるのだ。

　src属性に設定するだけで実行されるのは、ブラウザ環境としてIE 6（Windows版）だけだ。ほかのブラウザでは、DOMツリーの作り直しが必要となる。その詳細は後述しよう。

　結果として戻ってくるJavaScriptは、すでに説明したように、次のようなresultcallbackメソッドの呼び出しとなる（このresultcallbackは、URLパラメータのcallbackで決めたものであり、任意のものに変更できる）。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　さらにYahoo! Search APIからの戻り値は、

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

という構造になっており、

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

と指定して、得られた検索結果の総数も分かる。

　実際の結果は、result['ResultSet']['Result'][要素番号]として取得できるので、この処理をループして、結果のDOMツリーを生成すればよい。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　このようにして作成したDOMツリーを、HTMLコンテンツに差し替えれば、図3に示した出力ができあがる。

　ここでは簡単な例としてinnerTextを使った構成としたため、IE 6以外のブラウザ（たとえばFirefox）ではうまく動作しない。それに、実際には、得られた文字列をHTMLエンコードする処理も必要だ。