Webページにおけるヘッダやフッタ部分の統一方法としてJavaScriptを使う方法を先日紹介しました。
今回はその続きです。
先日紹介した方法ではやや問題があります。
それは、HTMLソースの記述が大変しにくいということです。
hoge.js
このようにHTMLソースを文字列として返す関数を定義する場合、HTMLソース中の改行やダブルクオーテーション記号などはすべてエスケープシーケンスで記述しなくてはいけないため、HTMLソースがとても難読的になってしまいます。
この問題を解決するためにXmlHttpRequestというものを用います。
正しくは指定したURLにリクエストを送信し、レスポンス本文を文字列データとして変数に取得する技術、という説明が正しいのですが、ここでは割愛致します。
画像:XmlHttpRequestの流れ
画像では、foo.htmlからJavaScriptを使用してXHRでサーバにtest.txtの内容を取得するリクエストを送信しています。
XHRで取得したデータは、文字列データとして変数に格納することが出来ます。
あとは前回使用したdocument.write()メソッドなどを用いて、ページ上に出力するだけです。
Twitterのウェブクライアントなどでも定期的にJavaScriptでこのXHRを使用してサーバにリクエストを送信することで、新着ツイートの問い合わせなどをおこなっております。
index.html
xhr.js
data.txt
画像:index.htmlの表示例
xhr.jsのgetFileText関数は極力汎用化しました。
コピペすれば、そのまま使用できます。
サーバ上に実際にアップロードしました。
・別ドメイン上のコンテンツをXHRを用いて読み込むことはできない
・ローカル上では使用できない(ブラウザによっては一部対応)
回避方法はいろいろあるようなんですけどね。
ちなみにFirefoxではローカル上でもXmlHttpRequestを使用できるようです。
【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にリクエストを送信し、レスポンス本文を文字列データとして変数に取得する技術、という説明が正しいのですが、ここでは割愛致します。
画像: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>
画像: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を使用できるようです。
コメント