IE7時代のAjax入門 -1.IE7とXMLHttpRequest-

■ 自動更新によるIE7の配布

2月13日よりいよいよXPユーザにもIE7が自動更新で配布される。これを機にブラウザをIE7に変更するユーザも多いだろう。タブブラウジング機能の追加やセキュリティの向上等のメジャーな変更の他にAjax関連で地味な変更がある。それはJavaScriptオブジェクトとしてのXMLHttpRequestの実装である。

これを踏まえて、Ajaxの入門をいまさらながら書いてみたいと思う。「Ajaxとは何であるか」とか「Ajaxで何ができるのか」といった難しいことは他のサイトに譲り、ここではとにかく「Ajaxで何かを作ってみる」ことを主眼に置いて進めることにする。

■ Ajaxの基本

Ajaxの肝はズバリXMLHttpRequestである。元々はIEのActiveXオブジェクト(XMLHTTP)として実装されていたものだが、これがFirefox等でXMLHttpRequestというJavaScriptのオブジェクトとして実装された。IE7では従前のActiveXオブジェクトとして生成する方法に加え、Firefoxと同一のコードでXMLHttpRequestを利用できるようになった。

この変更は地味なようだがセキュリティ的には意味がある。つまり、セキュリティポリシー上ActiveXの利用が禁止されていたか、あるいはActiveXの利用を躊躇していたユーザが、ブラウザの設定を変更せずにAjaxが利用可能となるのである。XMLHttpRequestは以下のようなコードを書くことによって利用できる。

// Firefox、IE7
var xmlHttp = false;
xmlHttp = new XMLHttpRequest();

では、このXMLHttpRequestをどうするのかというと、これを利用してサーバと通信するのである。サーバと通信して何かうれしいのかというと、ページの遷移によらずにページ内容の部分的な更新が可能になる。

何かのWebアプリケーションを書いたことがある方ならお分かりと思うが、基本的にWebページの更新はブラウザからサーバにリクエストを行い、サーバで情報の取得およびHTML生成まで行って、それをブラウザで表示することによって行われる。これがXMLHttpRequestを使うと、サーバへのリクエストはWebページのリクエストとは無関係に(非同期に)行うことができる。

■ XMLHttpRequestの生成

では早速コードを書いてみよう。IE7とFirefoxにブラウザを限定するなら先ほどのままでも良いが、現時点ではIE6はまだ多数派なのでこれに対応したコードを書く。(実際、僕もXPではまだIE6を利用するだろう。ちなみにこの記事で使用するIE7はLet's note W5AのVistaのもの。)

var xmlHttp = false;

// Firefox、IE7
if(window.XMLHttpRequest) {
	xmlHttp = new XMLHttpRequest();
	alert("XMLHttpRequestを生成しました");
} else if(window.ActiveXObject) {
	// IE6以前
	try {
		xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		alert("Msxml2.XMLHTTPを生成しました");
	} catch(e) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		alert("Microsoft.XMLHTTPを生成しました");
	}
}

上記のコードではwindow.XMLHttpRequestがtrueの場合にはXMLHttpRequestが、そうでなくかつwindow.ActiveXObjectがtrueの場合にはXMLHTTPが生成される。IE7とFirefoxでは最初のif節が実行され、XMLHttpRequestが生成される。ActiveXでMsxml2.XMLHTTPとMicrosoft.XMLHTTPの2つのケースがあるのは、後者がIE6よりも前のブラウザへの対応である。そうした必要がないという場合は、削ってしまってもかまわない。

■ コールバック関数の記述

先ほどのJavaScriptに続けて以下の関数を記述する。

function getData(url) {
	xmlHttp.open("GET",url);
	xmlHttp.onreadystatechange = function() {
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
			alert(xmlHttp.responseText.substr(0,10));
		}
	}
	xmlHttp.send(null);
}

openメソッドではPOST/GET/PUTの別とURLを指定する。この例では単純にGETである。onreadystatechangeプロパティには状態が変わったときのコールバック関数を指定する。sendメソッドでリクエストを送信する。するとXMLHttpRequestの状態が変わるたびにonreadystatechangeで指定した関数がコールバックされる。

このコールバック関数の中ではreadyStateとstatusを見ている。readyState=4は受信完了を示し、statusはいわゆるHTMLステータスなのでstatus=200ならばOKということになる。つまり、任意のURLにリクエストを送信し、正常にレスポンスを受信したときに処理を行うということになる。

上記のコードではresponseTextで受信したファイルをテキスト形式で取り出し、10文字分取り出してalertで表示させている。

■ HTMLの記述

HTMLのbodyには以下のformを記述する。

<form>
	<input type="text" value="" name="urlText">
	<input type="button" value="html取得" onClick="getData(urlText.value); return false;">
</form>

テキストボックスはURLを記述するためのものである。先ほど書いたfunctionにURLを渡す必要があるのでname="urlText"としておく。ボタンを押下すると指定したURLにリクエストを送信して取得したファイルの情報の一部が表示される。ボタンを押下したときにはurlText.valueを指定してgetDataを呼び出す仕組みになっている。

■ いよいよAjax

すべてをHTMLファイルに記述したらを完了である。ちなみにこのHTMLファイルはUTF-8で記述するのが無難である。このHTMLファイルをブラウザで開くと、まずどのオブジェクトを作成したかがダイアログで表示され、ページ上にはテキストボックスとボタンが1つずつ表示されているはずである。

テキストボックスに適当なURLを入力し、ボタンを押下すると取得したHTMLの一部が表示されるはずである。これで基本的なAjaxのプログラムを書いたことになる。

以下に今回作成したサンプルを置いた。ただし、リンクをそのまま利用する場合、指定できるURLはHTMLが置いてあるサイト内に限る。(警告は出るだろうが)もし、異なるサイトのURLを指定したいならHTMLファイルをダウンロードしてローカルに置いて開く必要がある。これはXMLHttpRequestの仕様である。


<Ajaxのサンプル>
ajaxtest.html

<The XMLHttpRequest Object>
http://www.w3.org/TR/XMLHttpRequest/
(2008/01/12)

新着情報
【iOS Objective-C, Swift Tips】アプリアイコンにバッジを表示(Swift)
【iOS Objective-C, Swift Tips】画像の向きを指定して保存する(Swift)
【iOS Objective-C, Swift Tips】UIImagePickerControllerの表示を日本語にする(Swift)

Copyright(C) 2004-2012 モバイル開発系(K) All rights reserved.
[Home]