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

[大澤文孝，ITmedia]

企業のAjaxサービスも同じ仕組み

　近年はAjax人気が高まったため、Google Mapsなどをはじめ、各企業がAjaxサービスを提供している。

　基本的にはこれらのAjaxサービスも、クロスドメインの制限を超えるために、ここで解説したようなscriptタグによる動的な読み込みを駆使しているケースが多い。

　従来は、サーバから呼び出すWebサービスが主流であったが、今後は、WebサービスだけでなくJavaScriptを使って簡単に呼び出せるAjaxサービスが続々と提供されるようになるだろう。

　例えばGoogleでは、従来はWebサービスから検索するSearch APIをAjaxからでも検索できるように改良した「Google AJAX Search API βを提供している。

XMLとXMLHttpRequestに縛られないAjax

　今回示したように、もはや、AjaxはXMLという縛りから離され、また、XMLHttpRequestオブジェクトで呼び出さなければならないという初期の構造からも大きく変わってきている。

　そのためAjaxという用語は、ページの遷移をともなわず、JavaScriptでサーバからデータを引っ張ってくるアプリケーション全般を示すように変化してきている。

　特に送受信するデータ形式は、XMLにこだわらずに「クライアントが使いやすい形式にする」というのが、今の流行だ。今回、第3回から解説したJSONもそうだが、Webサービスにもその流れがあり、例えば、Yahoo.comのAPIでは、PHPのシリアル化した文字列（serialize関数の結果であり、unserialize関数を使ってパースできる）を返す「Serialized PHP」と呼ばれるデータ形式をサポートしている。

互換性を解決するために不可欠なライブラリ

　さてリスト5に示したscriptタグによって、動的に読み込ませる方法はややトリッキーなもののために、うまく動作するかどうかは、Webブラウザに強く依存する。

　実際のところ前述したようにリスト5に示すプログラムは、Firefoxでは動かない。これをFirefoxで動かすためには、次のようにDOMツリーを更新するようプログラムを工夫する必要がある。

// 古いノード
var originalscriptnode = 
  document.getElementById('import');
// 新しくノードを作る
var newscriptnode = document.createElement('script');
// 新しいノードの設定
newscriptnode.src = baseurl;
newscriptnode.charset= 'utf-8';
newscriptnode.id = 'import';
// 差し替える
originalscriptnode.parentNode.replaceChild(
  newscriptnode, originalscriptnode);

　またここには解決法を示さないが、リスト5でinnerTextプロパティを使って結果を設定している部分も、しっかりとDOMツリーで処理しなければ反映されない。

　実は、Ajaxの最大の問題点は、Webブラウザの互換性であることは第1回目でも触れた通りだ。

　その問題を解決するのが、JavaScriptの各種ライブラリというわけだ。JavaScriptの各種ライブラリは、ユーザーが利用しているブラウザを判断して適切に動くように構成されている。そのため、ライブラリを使うことで互換性の問題に比較的悩まされことなく、幅広いWebブラウザで動作するアプリケーションを作ることができるのだ。

　第5回目では、JavaScriptプログラミングで頻用される各種ライブラリの使い方を解説しよう。