Ajaxのキソのキソまとめ

Ajaxパワーの活用方法

　Ajaxは、ウェブアプリケーションの開発方法や利用方法を大きく変えた破壊的な技術だ。Ajaxによってインタラクティブなページの作成が可能になったのである。Ajaxは現在もウェブの流行の最先端を走り続けている。

　Ajaxという用語は比較的最近生まれたものだが、Ajaxを支えている技術は以前から存在していた。ブラウザに送られたウェブページの内容をあとから変更する機能自体は、何年も前からあったのである。たとえば、JavaScriptでiframeのsrc属性を変更するのもそのような技術の一つだ。

　しかし、XMLHttpRequestオブジェクトが主要なブラウザで実装され、GmailやGoogle Mapsが公開され始めると、開発者はそれをきっかけとしてウェブページの構築方法をもう一度考えるようになったのである。

XMLHttpRequestオブジェクト

　Ajaxを可能にしている技術として重要なのは、XMLHttpRequestオブジェクトである。XMLHttpRequestオブジェクトを用いることによって、非同期でリクエストを送信して、その結果を思うがままに扱えるようになったのだ。多くのブラウザでは、以下のようなコードでXMLHttpRequestオブジェクトを作成できる。

     var xmlhttp = false;
     try {
       xmlhttp = new XMLHttpRequest();
     } catch (e) {
       alert("cannot create object");
     }

　当たり前のことではあるが、残念ながら「多くのブラウザ」の中にはIEは含まれていない。Microsoftのブラウザを扱うには特別なテクニックが必要となるのである。しかも面白いことに、MSXMLパーサのバージョンによって以下のように2つのケースを考慮しなければいけない。

     var xmlhttp = false;
     try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (othermicrosoft) {
        try {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (failed) {
          xmlhttp = false;
     }

　上記の2つのコードを以下のように組み合わせると、主要なブラウザすべてでXMLHttpRequestオブジェクトを作成できるようになる。

    var xmlhttp = false;
    try {
      xmlhttp = new XMLHttpRequest();
    } catch (trymicrosoft) {
      try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (othermicrosoft) {
        try {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (failed) {
          xmlhttp = false;
        }
      }
    }

作成のタイミング

　XMLHttpRequestを作成する準備は整ったので、次は「いつXMLHttpRequestオブジェクトを作成すべきか？」ということを考えてみよう。まだリクエストの発行は行っていないものの、XMLHttpRequestオブジェクトのインスタンス化はすべてのリクエストに先駆けて行うことが可能だということが、お分かりいただけると思う。もしそのような手法をとらない場合は、必要になった時点でメソッド中でオブジェクトを作成しなければならない。

　必要になった時点でオブジェクトを作成した場合の問題点は、果たしてクライアントが本当にXMLHttpRequestオブジェクトを作成できるのかどうか、ということがそれまで分からないことである。作成できないユーザがサイトを訪れた場合、もしそのことがすぐに分かれば、ユーザへの対応がずっと簡単になるのだ。

　たとえば、ユーザに対して「Ajaxは利用できない」ということを知らせずにウェブアプリケーションのフォームに記入をさせ、「送信」ボタンをクリックした段階で初めてそれを伝えるのは、ユーザにただ時間の無駄遣いだけをさせてしまうことであり、決してよいことではない。

　しかし、もしページの読み込みの段階でXMLHttpRequestの作成が試みられれば、ユーザとのインタラクションが始まる前にAjaxを用いないページへリダイレクトを行うなどの対応が可能になるのである。

リクエストを作成する

　ページが読み込まれた段階でオブジェクトが作成される設計でページを作成したとする。次に行うべきことは、XMLHttpRequestオブジェクトにその役割を果たしてもらうこと、つまり、リクエストを作成することだ。それでは、早速始めよう。