サーバー上にあるHTMLデータを読み込みページ内に表示するサンプルです。これはサーバー側にCGIプログラムなどを必要としない最もシンプルなものと言えます。
まず、最初にサーバーと通信するためのXMLHttpオブジェクトを作成します。ここでは動作させるブラウザを
Windows版、Internet Explorer 6、Firefox、Netscape 6以降、Opera 8
Macintosh版、Safari、Firefox、Netscape 6以降
としています。Windows版のInternet Explorer 6とそれ以外ではオブジェクトが異なるためサンプルの緑色の部分のようにtry...catchを使ってオブジェクトが利用できない場合にnullを返すようにしています。
次にHTMLデータをサーバーから取得します。これは青字の部分になります。サンプルでは押されたボタンに応じて1.html、2.html、3.htmlという名前のHTMLファイルを読み込んでいます。
サーバーとの通信が開始されるとsetPageData関数が呼び出されます。ステータスが4の場合には読み込み完了という事になります。読み込みが完了してもファイルが取得できていないと困ります。正常にファイルが取得できた場合にはステータスコードが200になりますので、この２つの条件を満たした場合にHTMLのデータを表示します。Internet Explorer以外ではonreadystatechangeでなくonloadを利用することができます。このイベントはデータが完全に読み込まれた場合に発生します。プログラムは簡単になりますが、Internet Explorer 6では動作しないので多くのブラウザで動作させる場合にはサンプルのようにonreadystatechangeを使うことになります。
HTMLのデータを読み込む場合にはresponseTextを使います。getElementsByTagNameを使ってタグの情報を取得しresponseTextの内容をタグのinnerHTMLプロパティに設定すればページ上にHTMLデータを表示させることができます。
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ajax test</title>
<script language="javascript"><!--
function getPage(pageURL) {
xmlhttp = createXMLHttp();
if (xmlhttp)
{
xmlhttp.onreadystatechange = setPageData;
xmlhttp.open('GET', pageURL);
xmlhttp.send(null);
}else{
alert("XMLHttpRequest失敗");
}
}
function setPageData()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("disp").innerHTML = xmlhttp.responseText;
}
}
// XMLHttpsオブジェクト作成
function createXMLHttp()
{
try {
return new ActiveXObject ("Microsoft.XMLHTTP");
}catch(e){
try {
return new XMLHttpRequest();
}catch(e) {
return null;
}
}
return null;
}
// --></script>
</head>
<body>
<form>
<input type="button" value="1ページ" onClick="getPage('1.html')">
<input type="button" value="2ページ" onClick="getPage('2.html')">
<input type="button" value="3ページ" onClick="getPage('3.html')">
</form>
<div id="disp"></div>
</body>
</html>