非同期通信でページ上に読み込んだデータを表示する

書式

new Ajax.Updater( {success:element},
url, {
method: mtype,
parameters: pars,
requestHeaders : header,
contentType : mimeType,
insertion : insType,
evalScripts : flag,
onFailure:errFunc
}
);

element : ID名またはオブジェクト
url : リクエストURL
mtype : メソッド (get, post, put, propfind) 【省略可能】
pars : パラメータ【省略可能】
header : HTTPヘッダーの配列【省略可能】
mimeType【省略可能】
insertion : 挿入方法。以下のいずれか【省略可能】
(Insertion.Before, Insertion.Top, Insertion.Bottom, Insertion.After)
flag : スクリプトをeval()で評価するか(true:する, false:しない)【省略可能】
errFunc : 通信失敗時の処理【省略可能】

説明

非同期通信でページ上に読み込んだデータを表示するにはAjax.Updater()を使います。最初のパラメータに表示するオブジェクトを指定します。Ajax.Updater("result")とすると
として定義されている領域に読み込んだデータ内容が表示されます。ただし、直接オブジェクトを指定するとエラーの場合、正しく処理されません。読み込みが成功した場合のみ表示するにはAjax.Updater({success:"result"})のようにsuccessを指定します。また、エラー発生時に処理を行いたい場合にはonFailureで処理を指定します。

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function ajaxReq(url){
var msec = (new Date()).getTime();
new Ajax.Updater( {success:"result"},
url, {
method: "get",
parameters: "cache="+msec,
onFailure:function(httpObj){
$("result").innerHTML = "エラーで読み込めませんでした";
}
}
);
}
// --></script>
</head>
<body>
<h1>非同期通信でページ上に読み込んだデータを表示する</h1>
<form>
<input type="button" value="テキストファイルを読み込み" onClick="ajaxReq('sample.txt')">
<input type="button" value="存在しないファイルを読み込み" onClick="ajaxReq('19690215.txt')">
</form>
<div id="result"></div>
</body>
</html>