
Ajaxのキソのキソまとめ
リクエストを作成するには、オブジェクトの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つは全く異なっているのである。この違いは、例で説明するのがもっとも分かりやすいだろう。今まで我々が学習したことをすべて組み合わせて、次のような例を作成した。次ページに示すコードを一つのファイルに入力して欲しい。
- 新着記事
- 特集
- ブログ
- 企画特集
-
漫画で解説:IoTはじめの一歩
-
リモート、オフィス、オンサイト
-
その先へ
-
ゼロトラストに向けた道のりを支援
-
企業のリスクマネージメント対策に
-
連載!プロが語るストレージ戦略
-
コスト・運用の壁を崩す!
-
クラウド時代に理想のセキュリティ
-
クラウド活用 虎の巻
-
明日からではもう遅い?!
-
セキュリティの今を知る
-
次期自治体ネットワーク強靭化へ
-
第4回CNBFミートアップレポート
-
エンジニアのためのREHL8まとめ
-
デジタルを当たり前と言えるか?
-
未来のセキュリティイノベーターへ
-
性能の大幅向上を実現!
-
部分最適だけではダメ
-
特集:IT最適化への道
-
連載!プロが語るストレージ戦略
-
M365 活用のセキュリティ対策
-
次の一手はこれだ!
-
いまあるデータで身近な業務をDX
-
データの散在と非常率運用がネック
-
SoRとSoEをつなぐDX推進の要
-
DX時代のアプリケーションセキュリティ
-
ネットワークもサービスとして使う
-
IDaaSって何?
-
厳しい目が向けられる内部不正
-
ビッグデータ最前線!
-
ハイブリッドクラウドとAI
-
いまさら聞けない「PPAP」
-
連載!プロが語るストレージ戦略
-
SECCON2020レポート第二弾!
他のところの説明では理由を省いているところも散見されましたが、ここの説明はきちんと理由を説明しながら解説しています。Ajax関連の本よりも分りやすかったです。