WebDesigning 3月号掲載のサンプルです。もっともシンプルなものとしてサーバー上にあるテキスト（プレーンテキスト）を読み込みページ内に表示させるスクリプトです。
以下のものは、Safari, Firefox, Mozilla, Netscape 6, iCab 3以降で動作します。（IEでは動作しません）
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>news.txtを読み込み表示する</title>
<style type="text/css"><!--
#result {
width:400px;
height:auto;
border:1px solid black;
}
--></style>
<script type="text/javascript"><!--
function loadTextFile(filename)
{
httpObj = new XMLHttpRequest();
httpObj.onload = displayData;
httpObj.open("GET",filename,true);
httpObj.send(null);
}
function displayData()
{
document.getElementById("result").innerHTML = httpObj.responseText;
}
// --></script>
</head>
<body onload="loadTextFile('news.txt')">
<h1>news.txtを読み込み表示する</h1>
<div id="result"></div>
<p>
ここは本文です。更新情報の縦幅が自動調整されレイアウトもバッチリ。<br>
</p>
</body>
</html>
news.txtの内容が読み込まれページ内に表示されます。news.txtのファイルですが、日本語が含まれる場合には、UTF-8のBOM (Byte Order Mark)付きにしないとSafariで文字化けが発生します（連載記事参照）。また、上記のサンプルではWindows版のInternet Explorer (以下IE)では動作しません（Mac版IE5ではAjaxは動作せず対象外）。そこで、IEとそれ以外のブラウザでも動作するようにXMLHttpsRequest()の部分を書き換え以下の赤字のようにします。呼び出されるのは通信処理を行うオブジェクトを返す関数です。
【サンプルを実行】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>news.txtを読み込み表示する</title>
<style type="text/css"><!--
#result {
width:400px;
height:auto;
border:1px solid black;
}
--></style>
<script type="text/javascript"><!--
function loadTextFile(filename)
{
httpObj = createXMLHttpRequest();
httpObj.onreadystatechange = displayData;
httpObj.open("GET",filename,true);
httpObj.send(null);
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
document.getElementById("result").innerHTML = httpObj.responseText;
}
}
function createXMLHttpRequest()
{
var XMLhttpObject = null;
try{
XMLhttpObject = new XMLHttpRequest();
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
return XMLhttpObject;
}
// --></script>
</head>
<body onload="loadTextFile('news.txt')">
<h1>news.txtを読み込み表示する</h1>
<div id="result"></div>
<p>
ここは本文です。更新情報の縦幅が自動調整されレイアウトもバッチリ。<br>
</p>
</body>
</html>
【サンプルを実行】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>news.txtを読み込み表示する</title>
<style type="text/css"><!--
#result {
width:400px;
height:auto;
border:1px solid black;
}
--></style>
<script type="text/javascript"><!--
function loadTextFile(filename)
{
httpObj = createXMLHttpRequest();
httpObj.onreadystatechange = displayData;
httpObj.open("GET",filename+"?cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
document.getElementById("result").innerHTML = httpObj.responseText;
}
}
function createXMLHttpRequest()
{
var XMLhttpObject = null;
try{
XMLhttpObject = new XMLHttpRequest();
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
return XMLhttpObject;
}
// --></script>
</head>
<body onload="loadTextFile('news.txt')">
<h1>news.txtを読み込み表示する</h1>
<div id="result"></div>
<p>
ここは本文です。更新情報の縦幅が自動調整されレイアウトもバッチリ。<br>
</p>
</body>
</html>