builder Top
RIA/Ajax
- Flash
- GWT
- Thermo
- Ajax
- RIA
- ...

Ajaxのキソのキソまとめ

文：Chris Duckett（Builder AU）
翻訳校正：原井彰弘

2008/01/07 07:00

Ajaxの基礎―リクエストの作成方法や結果の取得方法―などを実際のコードで学んでみよう。

<script>
    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;
        }
      }
    }

    function goAjax() {
             alert("Initial Ready State is:"+xmlhttp.readyState);

         xmlhttp.onreadystatechange = myReturnMethod;
         xmlhttp.open("GET", "another_file.html", true);
         xmlhttp.send(null);
     }

     function myReturnMethod() {
          alert("New Ready State is:"+xmlhttp.readyState);
     }
</script>
<button onclick="javascript:goAjax()">Let's try it!</button>

　この例では、リクエストを受けるファイルの中身はまだ利用しないので、ファイルは自分の好きな文字列で埋めて構わない。ファイルが見つかりさえすればよいのである。

　ボタンを押すと、readyStateの警告メッセージが何度も表示され、最後には4が表示されることと思う。ブラウザによって扱い方が異なるのだが、Safariでは0から4までを正確にカウントする。一方、Firefoxでは1が2回表示されるものの、0は最初に動作したときしか表示されない。幸い、我々にとって興味があるのはreadyStateの値が4のときのみなのだが、完璧を期すためにそれぞれの値が実際に何を意味するのか見てみよう。

0：uninitialized（初期化前） -- オブジェクトに何もデータが含まれていない状態。openが呼び出される前。
1：loading（データの読み込み中） -- sendが呼び出される前。
2：loaded（読み込み完了） -- リクエストが送信された後。
3：interactive（インタラクティブ） -- リクエストが処理され、部分的にはデータを入手できる可能性がある状態。ただし、まだ完了していないためデータを安全に利用することはできない。
4：complete（完了） -- リクエストが完了し、得られたデータは安全に利用できる状態。

　これらの新たに得られた知識をもとにすると、リクエストが完了したときのみ警告メッセージを表示するように、myReturnMethodを書き換えることが可能になる。

     function myReturnMethod() {
         if (xmlhttp.readyState==4){
              alert("New Ready State is:"+xmlhttp.readyState);
         }
     }

応答ステータス

　先ほどの例を用いて、今度はopenメソッドのUrlパラメータに存在しないファイルを指定してみよう。

xmlhttp.open("GET", "filethatdoesnotexist.html", true);

　このコードをもう一度実行してみると、意外なことに先ほどの例と全く同様に動作するのである。いったい何が起こっているのだろうか？

　もし仮にこのリクエストが通常のHTTPリクエストであれば、404エラーが表示されるところである。実はAjaxの場合も同様で、statusプロパティを用いるとその値を調べることが可能なのである。statusプロパティは読み取り専用で、リクエストのHTTP状態コードを保持している。例の場合、その値は404だ。通常のHTTPリクエストで使われている状態コードが、Ajaxの場合でも同様に使用できるのである（注意して欲しいのは、この例を正しく動作させるにはHTTPサーバにページをリクエストする必要があるということだ。ファイルシステムから読み取った場合、状態コードは常に未定義になってしまう）。

　つまり、リクエストが成功したかどうかを判断するためにはif文を加える必要があるのである。リクエストが成功した場合は、応答コード200が返される。リクエストが成功しなかった場合は、必要に応じてエラーに対処することが可能である。

     function myReturnMethod() {
         if (xmlhttp.readyState==4){
             if (xmlhttp.status == 200) {
                 alert("Request successfully completed");
             }
             else if(xmlhttp.status == 404) {
                 alert("Requested file not found");
             }
             else {
                 alert("Error has occurred with status code:  
"+xmlhttp.status);
             }
         }
     }