前項ではサーバー上のテキストファイルを読み込みました。ここではHTMLファイルを読み込みページ上に表示します。HTMLファイルだからといっても特別な処理は不要です。テキストファイルを読み込むのと同じです。唯一異なるのがページ上に表示する際にinnerHTMLプロパティに読み込んだデータ(responseText)を入れるという点です。以下のスクリプトは2種類のHTMLファイルを読み込み表示します（サンプルを
実行する）。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>サーバー上のHTMLファイルを読み込む</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadHTMLFile(fName)
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = httpObj.responseText;
}else{
$("result").innerHTML = "<b>Loading...</b>";
}
}
// --></script>
</head>
<body>
<h1>サーバー上のHTMLファイルを読み込む</h1>
<p>HTMLファイルを読み込みます</p>
<form name="ajaxForm">
<input type="button" value="data.htmlファイルを読み込み" onClick="loadHTMLFile('data.html')"><br>
<input type="button" value="body.htmlファイルを読み込み" onClick="loadHTMLFile('body.html')"><br>
</form>
<div id="result"></div>
</body>
</html>
この2種類のHTMLファイルですが、data.htmlはheadタグなどを含むものです。つまり通常ブラウザに表示するページ内容と同じです。もう１つのHTMLファイルはbodyタグの範囲内で定義されるタグのみ記述しています。どちらでも問題なく内容が表示されるようです。場合によっては1ページまるごとタグを記述してあると問題が出るかもしれません（試していませんので、確証はありません）。
HTMLファイルの内容がページ内に表示されるならば、インラインフレーム (iframeタグ) で表示した場合とどう違うのか疑問に思う人もいるでしょう。以下のスクリプトはAjaxを使わずに従来の手法（インラインフレーム）でHTMLファイルの内容を表示するものです（サンプルを
実行する）。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>サーバー上のHTMLファイルをインラインフレームに読み込む</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadHTMLFile(fName)
{
$("result").src = fName;
alert($("result").document);
alert($("result").innerHTML);
}
// --></script>
</head>
<body>
<h1>サーバー上のHTMLファイルをインラインフレームに読み込む</h1>
<p>HTMLファイルをインラインフレームに読み込みます</p>
<form name="ajaxForm">
<input type="button" value="data.htmlファイルを読み込み" onClick="loadHTMLFile('http://g2.ngw.jp/~openspc/ajax/data.html')"><br>
<input type="button" value="body.htmlファイルを読み込み" onClick="loadHTMLFile('http://g2.ngw.jp/~openspc/ajax/body.html')"><br>
</form>
<iframe src="data.html" id="result"></iframe>
</body>
</html>
見た目はそっくりですがインラインフレームを使用したものは異なるドメインのページ（XMLデータ等も含む）の場合、内容を読み出したり操作することはできません。これに対してAjaxを使った場合には（CGI経由で）異なるドメインのページを表示させた場合、同一のドキュメント内に配置されるため、内容を読み出したり操作することが容易にできます。Ajaxを使えば表示したデータはページに対して等価（対等の立場）ですが、インラインフレーム内は別世界ということです。これはFlashムービーファイル内に表示された文字をページ検索で行う事ができないのと同様です。Ajaxを使えば別々だったデータも読み込んでページ内容の一部として利用することができるわけです。
HTMLファイルをデータとして読み込んで利用する場合には、かなり不便です。というのもHTMLファイルの多くは構造化されておらず、データとして非常に扱いにくいためです。また、HTMLファイルにはHTML 3.2, 4.01、XHTMLなど種類がいくつもあります。最近、HTMLファイルをXMLのように構造化して作成する、というのが言われますが、従来のままではデータとして再利用できずに不便であるというのがあります。構造化、構造化と言われて記述してみても、実際にプログラムで読み込んで取り出せる（再利用可能な）データとして利用できなければ魅力半減、価値半減です。HTMLを構造化するならばプログラムを作って、使い物になるかどうかというのを確認するというのは有益な方法ではないかと思います。
しかし、今更HTMLファイルをマークアップしなおしたりする手間を考えるのであれば、データを変換して素直にXMLを使う方が良いでしょう。AjaxでもresponseTextでは文字コードなどの障害がありますが、規格がしっかりしているXMLを利用する場合には問題は減ります（でも処理速度は落ちます）。次項ではXMLファイルを読み込んでファイル内容を表示してみます。
[
9:サーバー上のXMLファイルを読み込むへ]
[
目次へ]
(2005.12.23, 2006.11.10)