非同期通信を行う

書式

new Ajax.Request(url, {
method: mtype,
parameters: pars,
postBody : data,
requestHeaders : header,
asynchronous : asyncflag,
contentType : mimeType,
onCreate : createFunc,
onLoading : loadFunc,
onLoaded : loadedFunc,
onSuccess : succFunc,
onFailure : errFunc,
onComplete : compFunc,
onException : excFunc,
});

url : リクエストURL
mtype : メソッド (get, post, put, propfind) 【省略可能】
pars : パラメータ【省略可能】
data : メソッドが"post"の場合の送信データ【省略可能】
header : HTTPヘッダーの配列【省略可能】
asyncflag : 非同期通信フラグ (true : 非同期, false : 非同期)【省略可能】
mimeType【省略可能】
createFunc : 非同期通信オブジェクトが作成された時の処理【省略可能】
loadFunc : 読み込み開始時の処理【省略可能】
loadedFunc : 読み込み終了時の処理【省略可能】
succFunc : 読み込み成功時の処理【省略可能】
onFailure : 通信失敗時の処理【省略可能】
onComplete : 通信完了時の処理【省略可能】
excFunc : 例外発生時の処理【省略可能】

説明

 非同期通信を行うにはAjax.Request()を使います。URLはサーバー上のファイルやCGIへのパスを指定します。CGIへパラメータを送信する場合はURLにURLパラメータとして指定するか、parametersで指定します。通信方法はmethodで指定します。通常はgetまたはpostになります。methodは省略できますが、省略した場合にはpostが使われます。
 成功時にはonSuccessで定義した処理を行います。失敗した場合にはonFailureで定義した処理を行います。onCompleteは通信が成功しても失敗しても、通信が完了したらonCompleteで定義した処理を行います。これらの処理先の関数には非同期通信オブジェクトがパラメータとして渡されます。このオブジェクトのresponseTextには読み込まれたテキストデータが入ります。XMLデータの場合にはresponseTextにはプレーンテキストとしてのXMLデータ、responseXMLにはXMLオブジェクトとしてのデータが入ります。responseXMLでデータを取得すればDOM (ドキュメントオブジェクトモデル) にアクセスできるメソッドやプロパティが利用できます。

サンプルコード [実行]

<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.Request(url, {
method: "get",
parameters: "cache="+msec,
onCreate:function(httpObj){
alert(httpObj+"が作成されました");
},
onSuccess:function(httpObj){
$("result1").innerHTML = httpObj.responseText;
$("result2").innerHTML = httpObj.responseXML;
},
onFailure:function(httpObj){
$("result1").innerHTML = "エラーで読み込めませんでした";
}
});
}
// --></script>
</head>
<body>
<h1>非同期通信でデータを読み込む</h1>
<form>
<input type="button" value="テキストファイルを読み込み" onClick="ajaxReq('sample.txt')">
<input type="button" value="存在しないファイルを読み込み" onClick="ajaxReq('19690215.txt')">
<input type="button" value="CGIデータを取得" onClick="ajaxReq('uptime.cgi')">
<input type="button" value="XMLデータを取得" onClick="ajaxReq('sample.xml')">
</form>
<div id="result1"></div>
<div id="result2"></div>
</body>
</html>