Open Source Web Development Tutorials - Dev Shed

Active Client Pageの構築に必要なAjax機能
（2009/02/03公開）

関連記事
Ajax手法によるActive Client Page
Ajax入門：基本中の基本

Active Client Pageの構築に必要なAjax機能

　この記事は、Ajax手法によるActive Client Pageに関する4回連載記事の第2回です。今回は、ACPで使うために必要なAjax機能に関する解説に続き、Ajax手法の原理について紹介します。

XMLHttpRequestオブジェクト

　Web開発者は、XMLHttpRequestオブジェクトを使用して、ページがロードされた後で、サーバーからのデータを使ってそのページを更新できます。

　XMLHttpRequestオブジェクトは、Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0/Firefox、Opera 8+、Netscape 7でサポートされています。

Ajaxブラウザ

　Ajaxの中核となるのはXMLHttpRequestオブジェクトです。各ブラウザは、それぞれ違う手法でXMLHttpRequestオブジェクトを作成します。Internet ExplorerがActiveXObjectを使うのに対して、ほかのブラウザはXMLHttpRequestと呼ばれる組み込みのJavaScriptオブジェクトを使用します。

　JavaScriptでのAjaxリクエストはすべて、XMLHttpRequestコンストラクタ関数の呼び出しで始まります。

new XMLHttpRequest() //IE7、Firefox、Safariなど;
new ActiveXObject("Msxml2.XMLHTTP") //IE5+の新しいバージョン;
new ActiveXObject("Microsoft.XMLHTTP") //IE5+の古いバージョン;
new XDomainRequest() //IE8+のみ。IE7のXMLHttpRequest()オブジェクトよりも「セキュア」で多機能な方法です;

　IE6やそれ以前では、XMLHttpRequest()がサポートされていない代わりにAjaxリクエスト用の独自のActiveXObjectを使います。このオブジェクトを作って、各種のブラウザに対応するため、tryおよびcatchステートメントを使います。これは、この種の問題に対処するための一般的な方法です。以下で詳しく説明します。

<html>
<body>
<script type="text/javascript">function AjaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support Ajax!");
}
}
}
}
</script>
</body>
</html>

解説

　この説明で、Ajaxリクエストを処理するために作成した関数はAjaxFunctionという名前です。

　最初に、関数内にXMLHttpRequestオブジェクトを保持するための変数xmlHttpを作る必要があります。

　次に、XMLHttp=new XMLHttpRequest()を使ってオブジェクトの作成を試みます。この方法はFirefox、Opera、Safariブラウザで使うものです。この方法が失敗した場合、xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")を試みます。これはInternet Explorer 6.0+用の方法です。この方法も失敗した場合は、Internet Explorer 5.5+用の方法であるxmlHttp=new ActiveXObject("Microsoft.XMLHTTP")を試みます。

　この3つの方法がすべて失敗した場合、ユーザーの使っているブラウザは非常に古いものなので、ブラウザがAjaxをサポートしていないことを示す通知を表示します。

　注：上に示したブラウザ固有のコードは、長くて非常に複雑なものです。しかし、XMLHttpRequestオブジェクトを作るときには常にこのコードが使えます。上のコードは、Internet Explorer、Opera、Firefox、Safariという一般的なすべてのブラウザと互換性があります。