Ajax（エージャックス：Asynchronous JavaScript + XML）は，JavaScriptを利用して非同期通信を行い，XMLデータでサーバーとのやりとりを行うものです．※Adaptive Path社のJesse James Garrett氏が自身のコラムでAjaxという名前を冠したことで急速に認知されました．よく知られているところでは，Googleが公開しているGoogle MapsやGmailなどがAjaxを利用しています．このAjaxは，急速に広がるにつれてRIA（Rich Internet Application）として捉えられることが一般的になりましたね．
AjaxはJavaやFlashなどと異なり，新しいアプリケーションやプラグインなどを利用したものではなく，HTML，CSS（スタイルシート），JavaScriptなどの既存技術を組み合わせたものです．これらを組み合わせ，さらにHTTP通信を行っているのがAjaxを利用したページになります．既存技術を利用したものですが，その実現には超えるべき障害が多く，上級者でも苦労します．
それにしても，なぜ既存技術を組み合わせただけの技術が急速に広まったのでしょうか？それにはいろいろな理由がありますが，致命的なデメリット（ブラウザによって動作が不統一，デザイナーとプログラマの棲み分けの不透明さ）により使い物にならないと思われていた既存技術が実用レベルにまで引き上げられたからです．その代表格がGoogle Mapsです．
今までアプリケーションは，パッケージやダウンロードして購入するものでしたが，Google MapsのようなAjaxを利用したアプリケーションでは，APIが公開され自分の好きなようにカスタマイズすることが可能です．欲しい機能を選択し，不足分はどこかの誰かが用意したものを読み込んで利用するか，無ければ自分で追加すれば良いのです．
一般的なレベルでAjaxを扱う場合，つぎの知識や技術が必要になります．
- HTML
- スタイルシート
- JavaScript
- XML
- サーバー側のプログラム (CGIやデータベースなど)
Ajaxはいろいろな知識と技術が必要です．多くの環境でテストするためにWindowsだけでなくMacintoshやUNIX（Linuxなどの互換OS含）の環境も揃えるほうが無難でしょう．動作対象となるブラウザもInternet Explorer，Firefox，Safari (WebKitを利用したブラウザ含)，Operaなどが挙げられます．さらに，クライアント側の環境だけではなく，サーバー側の環境も重要です．従来のCGIと全く同じ手法が利用でき，全く手を加えずに済む事もありますが，複雑なものであればサーバー側のプログラムとクライアント側のプログラムで調整を行う必要がでてきます．特に他のサイトの情報を取得し利用する場合など，他のサーバーから自前のサーバーにデータを持ってきて，クライアント側に渡す必要がある場合，うまく連携させ少ないコストでサイトを構築することが肝心です．
※上級者でも苦労する，といったのはこういった理由からです．
Ajaxではデータのやり取りはJavaScriptが行います．ソケット通信を行うオブジェクトなどは用意されていません（ちなみにAdobe AfterEffectsにはソケット通信を行うオブジェクトが用意されておりメール送受信や簡易サーバーを作ることが可能）．その代わりにJavaScriptでは，HTTPサーバーとやりとりするためのオブジェクトが用意されています．そのオブジェクトが Internet Explorerとそれ以外のブラウザで異なっており，Internet ExplorerではActive X（2種類のXMLHTTPオブジェクト）を使って行い，他のブラウザではXMLHttpRequestオブジェクトを使って通信を行っています．
では，実際に動かしてみましょう．つぎのプログラム（HTML）の“読み込み”ボタンをクリックすると，サーバのdata.txtを読み込み，その内容をテキストエリアに表示します．
<html>
<head>
<title>XMLHttpRequest()の動作</title>
<script type="text/javascript"><!--
function loadTextFile()
{
httpObj = new XMLHttpRequest();
httpObj.onload = displayData;
httpObj.open("GET","data.txt",true);
httpObj.send(null);
}
function displayData()
{
document.ajaxForm.result.value = httpObj.responseText;
}
// --></script>
</head>
<body>
<h1>XMLHttpRequest()の動作 (IE以外)</h1>
<form name="ajaxForm">
<input type="button" value="読み込み" onClick="loadTextFile()"><br>
<textarea name="result" cols="50" rows="10"></textarea>
</form>
</body>
</html>
以降，少しずつAjaxプログラムを紹介していこうと思います．
あ，酒瓶あるけど飲んでないよ^^;
0 件のコメント:
コメントを投稿