元来JavaScriptを用いてデータの交換を行うためにはまずHTMLフォームを作成しなければらなず、ユーザは情報を受け取る、又は送るために「送信ボタン」を押し、サーバからのレスポンスを待ち、ようやく結果がロードされ表示されるという手順を踏まえなければなりませんでした。
このようにサーバーが毎回新しいページを生成しなければならず、元来のウェブアプリケーションは遅くなりがちでした。
しかし、Ajaxを用いれば、JavaScriptはXMLHttpRequestオブジェクトを使いサーバと非同期通信を行うことができます。このオブジェクトにより、ページを再読み込みすることなく、JavaScriptはサーバとデータ通信をすることが可能となります。
XMLHttpRequestオブジェクトとはJavaScript等のスクリプト言語に用いられるDOM APIで、
サーバにHTTPやHTTPSリクエストを直接送り、データを読み込みます。GoogleサジェストもXMLHttpRequestオブジェクトを使用しており、Googleのサーチバーに文字を打ち込むとJavaScriptが予測したリストを返します。
今回は名前と時間を記入する欄のあるHTMLを作成し、名前の記入を開始するとAjaxが自動で時間を記入するというサンプルを作成していきます。
まず "testAjax.htm" というHTMLファイルを作成し下記コードを書きこみます。
<html>
<body>
<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>
* DOM =ドキュメントオブジェクトモデル
* API =アプリケーションプログラミングインターフェイス
* 非同期通信 =非同期通信とは、データの通信に際して送信側と受信側で厳密にクロック周波数や位相を一致させないで通信する方式のことで、送信者と受信者の両方がオンラインである必要がなく、片方が接続しているだけで通信が成立します
現時点ではただのHTMLです。
チュートリアル２ではXMLHttpRequestオブジェクトについて解説していきます。