AjaxでXMLHTTPや、Ajax.Updater、Ajax.Requestを使う

Sec.0　まずは通信用の関数を用意します。

// HTTP通信用、共通関数
function createXMLHttpRequest(cbFunc)
{
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;
}
}
}
if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;
return XMLhttpObject; }


xmlhttp.jsという名前で保存しましょう。





　　　  
Sec.1　非同期でデータを取得する

【サンプル】

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>非同期でデータを取得する</title>

//①Sec.0で作ったファイルをincludeします
<script type="text/javascript" src="xmlhttp.js"></script>　 <script type="text/javascript"><!--

② ①でインクルードした通信用の関数を使います
function getFile(fName)
{
　　httpObj = createXMLHttpRequest(readComplete);　//
　　if (httpObj)
　　 {
　 　　httpObj.open("GET",fName,true);//③非同期通信をしない場合はfalseにします
　 　　httpObj.send(null);
　　 }
}

function readComplete()
{
　　//④通信に成功しファイルの読み込みが完了した時の処理を書きます
　　 if ((httpObj.readyState == 4) && (httpObj.status == 200))　
　　{
　　$("result").innerHTML = httpObj.responseText;//⑤サーバから取得したデータを格納します
　　 }else{
　　 //⑥読み込み中は　Loading...　と表示させます。
　　$("result").innerHTML = "<b>Loading...</b>";　
　　}
}
// -->
</script>
</head>
<body>
<h1>サーバー上のファイルを読み込む</h1>
<form name="ajaxForm">
<input type="button" onClick="getFile('file.html')"><br>
</form>
<div id="result"></div>　//⑦結果を表示させるための箱を用意します
</body>
</html>


どうですか？簡単でしょ？
とりあえず細かな事は置いといて流れを理解しましょう。




Sec.2　非同期でデータを取得する(Prototype.jsを使う)

【サンプル】

まずはここでPrototype.jsをダウンロードしましょう

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>サーバー上のHTMLファイルを読み込む</title>
<script type="text/javascript" src="prototype.js"></script>　//①Prototype.jsをincludeします
<script type="text/javascript"><!--

function getFile(fName)
{　　
//②パラメータは他にも指定できますが、ここでは最低限のものを使います。
new Ajax.Request(fName, { method: 'get',
onSuccess: readComplete,　　//③読み込みに成功した時はreadComplete関数を呼び出します
onFailure:readError　　　　　　//④読み込みに失敗した時の処理です
 });
}

function readComplete()
{
　　$("result").innerHTML = httpObj.responseText;　//⑤取得した内容を編集します
}

function readError() { $("result").innerHTML = "通信に失敗しました";}
// -->
</script>
</head>
<body>
<h1>非同期でデータを取得する(Prototype.jsを使う)</h1>
<form name="ajaxForm">
<input type="button" value="file.htmlファイルを読み込み" onClick="getFile('file.html')"><br>
</form>
<div id="result"></div>　//⑥結果を表示させるための箱を用意します
</body>
</html>




Sec.3　UPDATERを使う(Prototype.jsを使う)

【サンプル】

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>prototype.jsサンプル</title>
<script src="prototype.js" type="text/javascript"></script>//①prototype.jsをインクルードします
<script type="text/javascript"><!--
function readText()
{
　 var URL = "file.html?cache="+(new Date()).getTime();
　 new Ajax.Updater("result",URL, { method: "get" });
}
// --></script>
</head>
<body>
<h1>UPDATERでデータを取得する(Prototype.jsを使う)</h1>
<form method="get" name="ajaxForm" onsubmit="readText();return false;">
<input type="submit" value="file.htmlを読み込み"><br>
</form>
<div id="result"></div>
</body>
</html>


どうでしょうか？これで処理の流れはつかんでいただけたと思います。Sec1、Sec2はサーバーから
取得したデータを加工する場合に使います。フォーマット済みのファイルを読み込む場合はSec3が
いいでしょう。Sec1、Sec2が理解できれば次の章へ進みましょう。次の章ではXMLファイルを扱います。


Point1：　取得したデータを加工する場合はSec1、Sec2を使う
Point2：　フォーマット済みのデータはSec3を使う