Ajaxのキソのキソまとめ

　リクエストを作成するには、オブジェクトのopenメソッドに最低2つのパラメータを渡す必要がある。パラメータは単純なものが大部分なので、すぐに理解できるだろう。

     xmlhttp.open(Method, Url [, Async] [, User] [, Password])

　Methodパラメータではリクエストメソッドを指定する。ここでは「POST」「GET」「HEAD」のいずれかを指定すればよい。本稿ではGETのみを使用する。

　Urlはリクエスト送信先のURL文字列である。ただし、自分の好きなページどこへでもリクエストを送信できるわけではない。サンドボックスのしくみによって、リクエストの作成を行ったページと同じドメインにしかアクセスできないようになっているのである。

　Asyncは、Ajaxを可能にしているパラメータである。オプションのパラメータとして定義されているものの、本稿での目的を考えるとこのパラメータは必要不可欠であり、trueに設定しなければいけないものだ。もしここがfalseに設定されていると、応答を受信するまでスクリプトが止まってしまう。ちなみに、このパラメータのデフォルト値はtrueであるので、設定を行わないという選択肢も確かに存在する。しかし、可読性や保守の問題を考えると、明示的にこのパラメータを設定することを強く推奨する。

　UserとPasswordは、認証が必要なアプリケーションを作成した場合に利用される。

     xmlhttp.onreadystatechange = myReturnMethod;

　最後に残されていることは、リクエストを送信することだ。とりあえずは単純さを優先させることとし、何もデータを追加せずにリクエストを送信しよう。

    xmlhttp.send(null);

　さて、次のような単純な例を用いてここまでの流れをまとめてみよう。

     xmlhttp.open("GET", "/some_dir/myfile.html", true);
     xmlhttp.onreadystatechange = myReturnMethod;
     xmlhttp.send(null);

通信中の状態

　先ほど、リクエストの状態が変化した都度呼び出されるメソッドを定義する必要がある、と述べた。また、onreadystatechangeプロパティでその設定を行えるとも述べた。ここで気をつけなければいけないことは、私は「状態が変化した都度」と述べたわけであって、「完了した場合」とは述べていないということだ。この2つは全く異なっているのである。この違いは、例で説明するのがもっとも分かりやすいだろう。今まで我々が学習したことをすべて組み合わせて、次のような例を作成した。次ページに示すコードを一つのファイルに入力して欲しい。