Webページにおけるヘッダやフッタ部分の統一方法としてJavaScriptを使う方法を先日紹介しました。

【Web日誌】SSIやPHPを使わずにヘッダやフッタを統一する (2016/6/25(土) 午後 7:48)
http://blogs.yahoo.co.jp/a32kita/14384075.html

今回はその続きです。
先日紹介した方法ではやや問題があります。
それは、HTMLソースの記述が大変しにくいということです。

hoge.js

// test script

function getTestSource() {
return "試験的なHTMLソースです。<br>2行目<br>3行目<br><font color=\"red\">これは赤字</font><br>";
}

このようにHTMLソースを文字列として返す関数を定義する場合、HTMLソース中の改行やダブルクオーテーション記号などはすべてエスケープシーケンスで記述しなくてはいけないため、HTMLソースがとても難読的になってしまいます。
この問題を解決するためにXmlHttpRequestというものを用います。

XmlHttpRequest

XmlHttpRequest(以下「XHR」)はJavaScriptでサーバ上にある他のコンテンツを動的に読み込むために使用する技術です。
正しくは指定したURLにリクエストを送信し、レスポンス本文を文字列データとして変数に取得する技術、という説明が正しいのですが、ここでは割愛致します。

イメージ 1
画像:XmlHttpRequestの流れ

画像では、foo.htmlからJavaScriptを使用してXHRでサーバにtest.txtの内容を取得するリクエストを送信しています。
XHRで取得したデータは、文字列データとして変数に格納することが出来ます。
あとは前回使用したdocument.write()メソッドなどを用いて、ページ上に出力するだけです。

Twitterのウェブクライアントなどでも定期的にJavaScriptでこのXHRを使用してサーバにリクエストを送信することで、新着ツイートの問い合わせなどをおこなっております。

実際のコード

それぞれのファイルを保存する際の文字コードは、UTF-8を使用してください。

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta name="robots" content="none">
       
        <!-- xhr.jsを参照する -->
        <script src="xhr.js"></script>
       
        <title>XHR Test</title>
    </head>
    <body>
        XmlHttpRequestの試験<br>
        (メインスレッド内で同期的にXHRを使用します。)<br>
        <br>
        <script>
        <!--
            // data.txtの内容をresultへ取得する
            var result = getFileText("data.txt");
           
            // resultの内容をページ上に表示する
            document.write(result);
        -->
        </script>
        <br>
        以上。
    </body>
</html>

xhr.js
// XHRを使用して、指定したURLのリソースを文字列データとして取得する関数
// 404や403などコンテンツの取得に失敗した場合は、nullが返ります。
function getFileText(datapath) {
    // XHRの準備
    var request = null;
    if(window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        try {
            request = new ActiveXObject("Msxml2.XMLHTTP.6.0");
        } catch(e) {
            try {
                request = new ActiveXObject("Msxml2.XMLHTTP.3.0");
            } catch(e) {
                try {
                    request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch(e) {
                    // XHRが使用できない
                    return null;
                }
            }
        }
       
    }
    
    request.open("GET", datapath, false);
    request.send(null);

    if (request.status === 200) {
        return request.responseText;
    } else {
        return null;
    }
}

data.txt
これはテキストデータです。<br>
2行目<br>
3行目<br>
<br>
<font color="red">エスケープシーケンスを使用せずにHTMLを記述できます。</font><br>


イメージ 2
画像:index.htmlの表示例

xhr.jsのgetFileText関数は極力汎用化しました。
コピペすれば、そのまま使用できます。

サーバ上に実際にアップロードしました。

XHR Test (2016年6月26日 22:28)
http://www.a32kita.tk/other/blogext/web/xhrtest01/

XHRの制約

XmlHttpRequestには次のような制限が行われています。
・別ドメイン上のコンテンツをXHRを用いて読み込むことはできない
・ローカル上では使用できない(ブラウザによっては一部対応)
回避方法はいろいろあるようなんですけどね。
ちなみにFirefoxではローカル上でもXmlHttpRequestを使用できるようです。