Ajaxのキソのキソまとめ

文:Chris Duckett(Builder AU) 翻訳校正:原井彰弘
2008-01-07 07:00:00
  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

Asyncをtrueに設定した場合には、メソッドを一つ定義する必要がある。このメソッドはリクエストの状態が変化した都度呼び出されるもので、XMLHttpRequestオブジェクトのonreadystatechangeプロパティで設定する。
     xmlhttp.onreadystatechange = myReturnMethod;

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

    xmlhttp.send(null);

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

     xmlhttp.open("GET", "/some_dir/myfile.html", true);
     xmlhttp.onreadystatechange = myReturnMethod;
     xmlhttp.send(null);
このように、わずか3行でAjaxの世界へ足を踏み入れることが可能なのだ。複雑な概念や入り組んだロジックは必要ないのである。

通信中の状態

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

  • コメント(1件)
#1 anonymous   2010-01-22 04:50:21
Ajaxをやり直していましたが、入り口としての説明はここが一番理解し易いと思いました。
他のところの説明では理由を省いているところも散見されましたが、ここの説明はきちんと理由を説明しながら解説しています。Ajax関連の本よりも分りやすかったです。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]