Ajaxのキソのキソまとめ
翻訳校正:原井彰弘
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オブジェクトにその役割を果たしてもらうこと、つまり、リクエストを作成することだ。それでは、早速始めよう。
- ホワイトペーパー
- 企画特集
ESBでIT投資の無駄を劇的に解消する
インターネット上の悪意を未然に防ぐには?
◆エン・ジャパン厳選求人☆毎週更新◆
ストレージメディア特設サイト開設
パンデミック対策特集
中小企業のセキュリティリスクとは?
集積度も性能も、業界最高水準のブレードPC
仮想環境を実現するソリューション特集
SOA、BPM、SaaS −今、企業に必要なこと
セキュリティ&ユーザ事例【SIer Club】
そのストレージで仮想化に対応できますか?
今注目の「サジェスト検索」−デモ掲載中
御社のログ活用しませんか!?
ロリポップ!がリニューアル
【徹底対談】運用管理ツールの賢い使い方
- サービス・ドリヴン・データセンター
- エンタープライズにおけるSUSEの強み
- サーバー監視・運用のコストを削減するには
- ■ストレージ容量50%削減保証■
- 話題のタグ
Windows 7はLinuxへの切替が簡単:注目の仮想ディスクフォーマット「VHD」
iPhone OS 3.0で変わった「絵文字」
OSSのクラウド基盤「Eucalyptus」を使う(4)--インストール〜ノード構築
俳優経験者が指南する「人前で上手く話すためのティップス10選」
「うるまでるびペイント」登場:絵は上手下手ではなく制作過程に楽しみが
待てば回路の日和あり--「iPhone 3GS」発売、しかし――