AJAX でサーバにあるファイルの内容を表示したい。

Ajax （エイジャックス）とは、Asynchronous JavaScript + XML の略で、JavaScript からブラウザのバックグラウンドで HTTP リクエストの通信をして、非同期に通信が行えるようにする技術のこと。Gmail や Google Maps が良い例。
この技術のキモは XMLHttpReqeuest という JavaScript から呼べるオブジェクトである。IE や Firefox には実は XMLHttpRequest というオブジェクトが実装されており、これを使うことによって表示されているページの裏で、＊ユーザーの操作とは非同期に＊ HTTP 通信を行うことができる。
HTTP 通信自体はその性質上、決して非同期になることはない。ブラウザ（クライアント）からリクエストしたらサーバからレスポンスが返ってくるだけである。ただし、そのレスポンスはいつ返ってくるかわからないから、通常ブラウザは結果が返ってくるまで待つ必要があるが、XMLHttpRequest.onreadystatechange = foo などのように、コールバック関数（メソッド）を指定しておけばサーバからのレスポンスが返ってきた時に呼び出される関数を指定できる。
セキュリティ上の理由により JavaScript (XMLHttpRequest) からアクセスできる URL は HTML のダウンロード元と同じドメインに限定される（Java のアプレットで言うサンドボックスモデルと同じ意味）。
多くのサイトで XMLHttpRequest を使った POST の方法は解説されているため、ここではシンプルに HTTP プロトコルの GET メソッドの使い方を提示してみた。
Note: Mac OS X Safari (Safari/412.5)　では、SSL / TLS の https:// で XMLHttpRequest.open できないことが判明 (2005/09/06 追記)




<script type="text/javascript">
<!--
// ^^^^^ 単に <script> と書いても良い。

var xmlhttp;

// 特に IE に対応するために、XMLHttpRequest オブジェクトをブラウザによって作成
function createXmlHttp() {

try {
    return new ActiveXObject ("Msxml2.XMLHTTP");
} catch(e) {
    try {
        return new ActiveXObject ("Microsoft.XMLHTTP");
    } catch(e1) {
        try {
            return new XMLHttpRequest();
        } catch(e2) {
            return null;
        }
    }
}
}

// メイン部分。HTML  タグの onload のところで関連付けられている。
// よって、ブラウザが HTML を読み込むと同時にこの関数（メソッド）が実行される。
function getContent() {

if ((xmlhttp = createXmlHttp()) == null) {
    window.alert("XMLHTTP Initialization Failed.");
} else {
    xmlhttp.abort();    // 連続して HTTP 通信する場合は必ず呼び出す。
}

// 1. handleHttpEvent() のように指定すると動かないので注意。
xmlhttp.onreadystatechange = handleHttpEvent;

// 2. 第3パラメータの true / false は、true = 同期, false = 非同期
// なお、セキュリティ上の理由により open で指定できる URL は
// HTML のダウンロード元と同じドメインに限定される。
// （Java のアプレットで言うサンドボックスモデルと同じ意味）
xmlhttp.open('GET', 'https://perltips.twinkle.cc/ajax_result.txt', true);

// 3. ここはオプショナル。
xmlhttp.setRequestHeader("Content-Type", "text/html");

// 4. GET のとき: send(null) / POST のとき: send(a variable)
xmlhttp.send(null);
}

// コールバック関数。
// 上の xmlhttp.onreadystatechange = handleHttpEvent; で関連付けられている。
function handleHttpEvent() {

// readyState の番号の意味は以下の通り。
// 0 = uninitialized
// 1 = loading
// 2 = loaded
// 3 = interactive
// 4 = complete
if ( xmlhttp.readyState == 1) {
    // "data" とは、<body> の中の、<span id="data"> の部分
    // よって、この部分に "Loading..." が表示される（表示は一瞬だけとなる）
    document.getElementById("data").innerHTML = "Loading...";
}
else if ( xmlhttp.readyState == 2) {
    // "data" とは、<body> の中の、<span id="data"> の部分
    // よって、この部分に "Loaded." が表示される（表示は一瞬だけとなる）
    document.getElementById("data").innerHTML = "Loaded";
}
else if (xmlhttp.readyState == 4
     &&  xmlhttp.status == 200) {    // 200 は、HTTP プロトコルにおける正常終了
    document.getElementById("data").innerHTML = xmlhttp.responseText;
}
}

// -->
</script>


<body onload="getContent()">

サーバ側のファイル (ajax_result.txt) は以下の通り。


This is the server-side HTML.

参考になるサイト・リンク

AJAX でサーバにあるファイルの内容を表示したい。

Comments

Perl で、Google の PageRank を表示する方法