AJAXを使っているのでクライアント上では正常に動作しません。
動作を確認するには、サーバーかローカル･サーバーが必要です。
【HTMLファイル】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
<link rel="preload" href="sample.txt" as="script">
<!--
preloadで先読みすれば、ロードの時間を短縮できる可能性がある。
-->
<title></title>
</head>
<body>
<button type="button" onclick="AJAX_Display()">Click!</button><br>
<div id="idDisplay"></div>
</body>
<script>
function AJAX_Display() {
let wDisplay = document.getElementById("idDisplay");
let sFileName = "sample.txt"
let sCharset = "UTF-8"; // 文字エンコード
// 文字エンコードが間違っていると、全角文字が文字化けします。
let oAJAX = new XMLHttpRequest();
oAJAX.overrideMimeType('text/plain; charset=' + sCharset);
oAJAX.open("GET", sFileName, true);
oAJAX.onload = function () {
console.log("oAJAX.onload");
if (this.readyState === 4 && this.status === 200) {
console.log("this.readyState: " + this.readyState);
console.log("this.status: " + this.status);
let res = oAJAX.responseText;
wDisplay.innerHTML = res;
}
};
oAJAX.send(null);
}
</script>
</html>
【sample.txt】
<span style="background-color: #0f0;" >HELLO WORLD！</span><br>
|
|
掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．
