Ajaxとは

ジュンジュンです。
以前のブログ記事の再録ですよ。

Ajaxとは、Asynchronous JavaScript + XMLの略で、JavaScriptの組み込みクラスXMLHttpRequestを利用した非同期通信のことを指します。Ajaxは技術そのものではなく、DHTMLとXMLHttpRequest、サーバサイド・プログラム（Perl、PHP、etc...）などの既存技術を連携させたアプローチのことです。

具体的にどのようなものかというと、Ajaxが世に広まるきっかけとなったGoogle Maps（http://maps.google.co.jp/）やGoogle Suggest（http://www.google.com/webhp?complete=1&hl=en）を直接ためしてみるのが一番です。Google Mapsでは、Flashで作られているかのように、ページを更新することなく地図をズームアップしたり移動することができます。Google Suggestでは、文字を入力した瞬間に検索候補が提示されるため、検索ボタンをクリックすることなく検索候補を見ることが出来ます。

ここに挙げた仕組みはAjaxが命名される前から実現されていましたが、Googleのような大手サイトが使ったことにより、多くのサイトで使われるようになりました。

Ajaxを使ってみる

Ajaxの最初のAはAsynchronous、非同期という意味。サーバ処理待ちをしない非同期リクエストが可能というのがAjaxの一番の特徴です。非同期通信では、ページが読み直されることなく、連続的に作業を続けられます。

Ajaxのスクリプトでは、非同期のレスポンスは、コールバック関数で受信します。

oj.onreadystatehange = function(){
    if ( oj.readyState == 4 ){
        //受信時に処理
    }
}

oj.onreadystatechange = callback
function callback(){
    if ( oj.readyState == 4 ){
        //受信時に処理
    }
}

上記コードは、リクエストの処理状態を表すreadyState値が変わったときに発生するイベントをトリガとして、readyState値が4にコールバックが発生するようにしてあります。

参考サイト
Ajaxを勉強しよう