非同期通信を行う

 yuiではConnection Managerにより非同期通信を行うことができます。非同期通信を行う場合には以下のライブラリが必要です。
非同期通信を行うにはasyncRequest()を使います。最初のパラメータはgetまたはpostを指定します。二番目のパラメータはURLになります。三番目はコールバック関数で非同期通信処理が行われる際に呼び出される関数になります。四番目のパラメータはpostメソッドの場合に送信するデータを指定します。getメソッドの場合にはnullを指定します(もし、nullで不具合が発生するようなら""を指定してみてください)。
以下のサンプルは同じディレクトリ内にあるsample.txtファイルを読み込んでページ上に表示するものです。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>非同期通信を行う</title>
<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/connection.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
var callback =
{
success:function(httpObj) {
document.getElementById("result").innerHTML = httpObj.responseText;
}
}
conObj = YAHOO.util.Connect.asyncRequest("get", "sample.txt", callback, null);
}
// --></script>
</head>
<body>
<h1>yuiで非同期通信を行います</h1>
<div id="result"></div>
</body>
</html>

 コールバック関数部分は以下のように書くこともできます。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>非同期通信を行う</title>
<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/connection.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
conObj = YAHOO.util.Connect.asyncRequest("get", "sample.txt",
{
success:function(httpObj) {
document.getElementById("result").innerHTML = httpObj.responseText;
}
}
,
null);
}
// --></script>
</head>
<body>
<h1>yuiで非同期通信を行います</h1>
<div id="result"></div>
</body>
</html>

[目次へ]

(2006.6.8)