| ポイント |
<![CDATA[
xmlhttp.onreadystatechange = check;
xmlhttp.open("GET", filename);
xmlhttp.send(null);
]]>
|
| 説 明 |
HTMLファイルをXMLHttpRequestを使って取得するにはopen()でGETコマンドと取得するファイル名を指定します。データの読み込みは非同期のためreadyStateChangeイベントを定義してデータの取得状況を関数で把握するようにします。データの読み込みが完了した場合にはWebサーバーからのステータスコードが200になるので、読み込みが完了し完全にデータを受け取った場合にページ内に表示します。受け取ったデータはxmlhttp.responseTextに入っています。
このサンプルでは簡略化のためエラー処理が省かれています。実務に利用する場合にはInternet Explorerへの対応とエラー処理、ステータスコード別の処理などを記述する必要があります。
その他のAjaxに関するサンプルはAjaxのページを参照してください。
|
| サンプル |
<![CDATA[
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>HTML繝輔ぃ繧､繝ｫ繧貞叙蠕励☆繧?</title>
<script language="javascript"><!--
gCompleteCode = 4;
gHTTPStatusOK = 200;
function getIndex(filename) {
xmlhttp = new XMLHttpRequest();
if (xmlhttp)
{
xmlhttp.onreadystatechange = check;
xmlhttp.open("GET", filename);
xmlhttp.send(null);
}
}
function check()
{
if (xmlhttp.readyState == gCompleteCode && xmlhttp.status == gHTTPStatusOK)
{
document.getElementById("htmlData").innerText = xmlhttp.responseText;
}
}
// --></script>
</head>
<body>
<a href="javascript:getIndex('index.html')">縺薙?繝?ぅ繝ｬ繧ｯ繝医Μ蜀??index繝輔ぃ繧､繝ｫ隱ｭ縺ｿ霎ｼ縺ｿ</a>
<div id="htmlData"></div>
</body>
</html>
]]>
|
| 補足説明 |
同一ドメイン名のサーバーのデータのみ取得できます。
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
HTMLファイルを取得する
