Yahoo UI Libraryには非同期通信を行なうための命令が用意されています。Yahoo UI Libraryという名前からするとユーザーインターフェースに特化したような印象がありますが、非同期通信機能などもしっかりと装備されています。
Yahoo UI Libraryで非同期通信を行なうにはYAHOO.util.Connect.asyncRequest()を使います。()の中には以下の順番でパラメータを指定します。
| 送信方法 (getやpost。サーバーによっては他の命令も可能) |
| 読み込むファイルのURLやCGIのURL |
| 通信時に処理する関数（コールバック関数） |
| 送信方法でpostを指定した場合に実際に送信するデータ |
最初のパラメータでgetを指定した場合、4番目のパラメータはnullを指定しておきます。
例えば以下のサンプルのようにsample.txtファイルを読み込むにはYAHOO.util.Connect.asyncRequest("get", "sample.txt", callbackFunc, null)のように書きます。ここで通信が成功するか失敗するとcallbackFunc内に指定した関数が呼ばれます。通信が成功した場合、successプロパティに設定した関数が実行されます。この場合、関数には非同期通信オブジェクトがパラメータとして渡されます。読み込まれた内容はresponseTextに入ります。読み込むファイルがXMLの場合はresponseXMLを使うことでDOM操作が可能になります。
以下のサンプルはsample.txtを読み込みページ上に表示するものです。ローカル上では動作しないのでサーバーにアップロードしてテストしてみてください。（サンプル01を実行する）
【サンプル】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/connection/connection-min.js"></script>
<script type="text/javascript"><!--
function loadText(){
callbackFunc = {
success:function(httpObj){
YAHOO.util.Dom.get("contents").innerHTML = httpObj.responseText;
}
}
YAHOO.util.Connect.asyncRequest("get", "sample.txt", callbackFunc, null);
}
// --></script>
</head>
<body>
<h1>非同期通信で文字を表示します</h1>
<form>
<input type="button" value="文字を読み込んで表示" onClick="loadText()">
</form>
<div id="contents"></div>
</body>
</html>
上記の方法でテキストファイルでもHTMLファイルでもXMLファイルでも読み込むことができます。ただし、画像データなどを直接読み込むことはできません。ページ上に画像やムービーを表示させたいのであれば読み込むファイルにHTMLタグを書いておきます。
通信に成功した場合には上記のサンプルで問題ありませんが、通信は失敗することもあります。通信が正常に行なわれなかった場合にはコールバックにfailureを指定しエラー時に発生する関数を指定します。この関数には非同期通信オブジェクトがパラメータとして渡されます。
以下のサンプルは読み込むファイルが存在しない場合にエラーメッセージを画面上に表示します。（サンプル02を実行する）
callbackFunc = {
success:function(httpObj){
YAHOO.util.Dom.get("contents").innerHTML = httpObj.responseText;
},
failure:function(httpObj){
YAHOO.util.Dom.get("contents").innerHTML = "読み込めませんでした";
}
}
YAHOO.util.Connect.asyncRequest("get", "sample.txt", callbackFunc, null);
[
目次へ]