Ajaxページの作成
それでは、これまで説明した方法を使ってAjaxのページを作ってみましょう。次のサンプルは、XMLHttpRequesオブジェクトを作成した基本的なAjaxのサンプルです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Ajax_1</title> <script type="text/javascript"> //<![CDATA[ var xmlHttp = null; if (window.XMLHttpRequest) { //IE7以上,Mozilla,Opera,Safari //その他XMLHttpRequestオブジェクト対応ブラウザ用の処理 xmlHttp = new XMLHttpRequest(); } else { if (window.ActiveXObject) { // ActiveXを使うIE5.xやIE6用の処理 xmlHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0'); } } function RoadHtml() { if (!xmlHttp) return; xmlHttp.open('GET','test.html'); xmlHttp.send(null) xmlHttp.onreadystatechange=function() { if (xmlHttp.readyState==4 && xmlHttp.status == 200) { document.getElementById('view1').innerHTML = xmlHttp.responseText; } } } //]]> </script> <style type="text/css"> <!-- #view1{ width: 400px; height:100px; background-color:tan; } --> </style> </head> <body> <form id="Ajax_Form"> <input type="button" id="change" value="変更!!" onClick="RoadHtml()"> </form> <div id="view1"> ここにHTMLファイルを読み込みます。 </div> </body> </html>
また、後から読み込み表示するHTMLファイル「test.html」は「Sample_2.html」と同じディレクトリに置いてください。
以下のスクリーンショットは、ボタンをクリックし外部からHTMLファイルを読み込んで表示している様子を示したものです。
サンプルではフォームの「変更!!」ボタンをクリックした時、指定したスタイルシート内に外部からHTMLファイルを読み込んでいます。それではサンプルを見ていきましょう。
XMLHttpRequesインスタンス生成
XMLHttpRequesオブジェクトのインスタンスの作成部分は、12～24行目（var xmlHttp = null;～RoadHtml関数の直前までとなります。この処理は、サンプルのHTMLファイルが読み込まれた時に実行されます。ここではXMLHttpRequesオブジェクトにxmlHttpというオブジェクト名をつけています。以降は、このオブジェクト名を使ってXMLHttpRequesオブジェクトの機能を呼び出していくことになります。
画面要素の設定
ボタンフォームの設定は、49行目、HTMLファイルを読み込むスタイルシートの設定は53～55行目となります。ボタンフォームには、イベントハンドラを使ってフォームをクリックした時、関数「RoadHtml」の処理を行うようにしています。この関数はスタイルシートにHTMLファイルを読み込む処理を設定したものです。そして、表示するスタイルシートには「view1」というid名を設定しています。
RoadHtml関数
関数RoadHtmlの処理は、25行目～34行目となります。RoadHtmlの処理は、大きく分けて、「サーバに対してリクエストを送る処理」「サーバから送られてきたデータを表示する処理」があります。では、順番に関数の処理を見ていきましょう。
XMLHttpRequestサポートの判定
関数の処理の1行目、if (!xmlHttp) returnは、ブラウザがXMLHttpRequestオブジェクトをサポートしていないなど、何らかの理由でXMLHttpRequestオブジェクトが生成されていなかった時の処理です。サンプルHTMLファイルが読み込まれた時にxmlHttpという名前のXMLHttpRequestオブジェクトが作成されますが、このオブジェクトが存在した時のみ以降の処理が実行されます。
リクエストの送信
そして次のxmlHttp.open('GET','test.html')とxmlHttp.send(null)が、実際にサーバに対し、HTTPを使ってリクエストを送る部分となります。ここではXMLHttpRequestオブジェクトのopenメソッドを使い、Webサーバに対してHTMLファイル「test.html」を取って来るように設定しています。今回はサーバ側に送るデータが無いので、次のsendメソッドには「null」の値を設定しています。
以上がサーバに対しリクエストを送る処理になります。そして次からが、サーバから送られてきたデータを表示する処理となります。
送られてきたデータの処理
サーバから送られてきたデータに対する処理は29～34行目となります。
xmlHttp.onreadystatechange=function() { if (xmlHttp.readyState==4 && xmlHttp.status == 200) { document.getElementById('view1').innerHTML = xmlHttp.responseText; } }
XMLHttpRequestオブジェクトのonreadystatechangeプロパティは、リクエストの処理状態を値に持つreadyStateプロパティの値が変化した時をイベントとして取得し、以降に設定した処理を実行します。サンプルでは、29行目でxmlHttp.onreadystatechange=function()として、匿名関数を使い、リクエストの処理状態が変化した時にfunction()ブロック内の処理を処理を実行するようにしています。
この匿名関数の処理では、まず始めにXMLHttpRequestオブジェクトのreadyStateプロパティとstatusプロパティの値を調べることにより、リクエストの処理が正常に終了したことを判定しています。プロパティはそれぞれ、
- readyStateプロパティ――リクエストの処理状態コード
- statusプロパティ――サーバから送られるHTTPステータスコード
を値に持っています。サンプルでは、if文の条件式をxmlHttp.readyState==4 && xmlHttp.status == 200として、readyStateプロパティの値が「4」かつstatusプロパティの値が「200」の時、if文の処理を実行するようにしています。
readyStateプロパティの値の「4」は、すべてのデータを受け取って利用可能になったことを表し、statusプロパティの値の「200」はリクエストが正常に処理されたことを表します。つまり、このif文の条件式では「リクエストの処理が正常に終わり」「データが利用可能になった時」に真となり、if文の処理が実行されます。
if文内でのdocument.getElementById('view1').innerHTML = xmlHttp.responseTextは、送られてきたデータであるHTMLファイルを指定した場所に書き出す処理です。この処理のうち、xmlHttp.responseTextの部分が送られてきたデータの部分です。XMLHttpRequestオブジェクトのresponseTextプロパティは、サーバからレスポンスとして帰って来たデータをテキストとして持っています。
サンプルでは要素内にHTML形式でコンテンツを書き出すinnerHTMLプロパティを使って、このデータを書き出しています。書き出す先はid名「view1」を設定したdiv要素内となります。
以上の処理により、div要素内にHTMLファイル「test.html」が表示されます。
まとめ
今回はクロスブラウザスクリプトの手法の1つとして、実行するスクリプトをブラウザがサポートしているかどうかを調べ、それに合わせて用意したスクリプトを実行する方法について、前回に引き続き解説しました。実際にクロスブラウザスクリプトを実現するためにはこの手法単独ではなく、それ以前に紹介した、「ブラウザの種類やバージョンを判断し、それに合わせたスクリプトを実行する方法」も組み合わせながら使っていくことになります。
クロスブラウザスクリプトは、現在ではそれほど特殊な技術ではありません。例えばAjaxのサイトでは、クロスブラウザスクリプトの技術が多かれ少なかれ必ず使われています。
本来のJavaScriptの理想的な姿としては、1つのスクリプトを書けばすべてのブラウザで同じように動くべきなのでしょう。しかし、その理想が現実となっていない現状では、クロスブラウザスクリプトのテクニックはサイトを構築する上での重要なテクニックの1つと言えるでしょう。
