スポンサードリンク

Yahoo! User Interface Library - Connection Manager

Connection Managerとは

Ajaxを行うためのユーティリティーです。ブラウザ毎の仕様の違いを吸収)してくれます。

詳しくはhttp://developer.yahoo.com/yui/connection/のオリジナルを読まれるのがよいと思います。

Connection Manageを使う前準備

必要なのは2つのファイルです。もちろんインストールは済ませておく必要があります。

<script type="text/javascript" src="your install path/yahoo-min.js"></script>
<script type="text/javascript" src="your install path/connection-min.js"></script>

このページではさらにEventを使っています。

<script type="text/javascript" src="your install path/event-min.js"></script>

Ajaxする

とりあえず動くものを書いてみる

サンプル

data/found.txtにリクエストして、内容をalertで表示させます

var callback = {
    success: function (o) {
        alert("'" + o.responseText + "' という文字列が返ってきました");
    },
    failure: function (o) {
        alert('ファイルが見つかりませんでした');
    }
}

function doRequest(event) {
    YAHOO.util.Connect.asyncRequest('GET', "data/found.txt", callback);
}

YAHOO.util.Event.addListener("elm1", "click", doRequest);
...
...
<a href="javascript:;" id="elm1">サンプル実行</a>

サンプル実行

＊サンプル中のaddListenerについてはEvent Utility編を見てください。

高度にAjaxする

上の例では、成功すること前提に非常に簡単にプログラムを書きましたが、次はパラメータの詳細を見ていきます

サンプル

Case1.

/cgi-bin/sleep.cgiにリクエストをします。このCGIは

#!/bin/sh

sleep 10;

echo "content-type: text/plain; charset=utf-8"
echo
echo "10秒後にこのテキストが表示されます"

となっていて、10秒たたないとレスポンスが返ってきません。そこでわざとtimeoutを3秒に設定し、abortさせます。

Case2.

存在しないURLにリクエストをしてみます。

Case3.

data/sample1.xmlにリクエストをします。

var Ajax = {
    print: function (o) {
/*
o.tId : ユニークなID
o.status : HTTPステータスコード
o.statusText : HTTPステータステキスト？
o.getResponseHeader[label] : response header (Hash)
o.getAllResponseHeaders : response header (すべて)
o.responseText : レスポンス (Stringとして)
o.responseXML : レスポンス (XMLDocumentとして)
o.argument : asyncRequestを呼び出す時に指定したもの
*/
        var elm = document.getElementById("elementId");
        for (var i in o) {
            elm.innerHTML += '<font color="red">'+i+'</font>'+':'+o[i]+'<br/>';
        }
        elm.innerHTML += '<hr/>';
    },
    init: function (e, url) {
        YAHOO.util.Connect.asyncRequest(
            'GET',
            url,
            AjaxParam
        );
    }
};

var AjaxParam = {
    success:  Ajax.print,      /* 成功時に呼び出されるfunction */
    failure:  Ajax.print,      /* 失敗時に呼び出されるfunction */
    scope  :  Ajax,            /* ↑の場合Ajax.printを呼びたいのでAjaxを指定 */
    timeout:  3000,            /* ミリ秒で指定 */
    argument: ["arg1", "arg2"] /* o.argument として引数を渡すことができる */
};

YAHOO.util.Event.addListener("button1", "click", Ajax.init, "/cgi-bin/sleep.cgi");
YAHOO.util.Event.addListener("button2", "click", Ajax.init, "notfound.html");
YAHOO.util.Event.addListener("button3", "click", Ajax.init, "data/sample1.xml");

出力結果：

ポイント

このデモではo.responseXMLが表示されていませんが、XML文書が取得できていれば、

var root = o.responseXML.documentElement; 
var value = root.getElementsByTagName('element')[0].firstChild.nodeValue; 
...
...

という具合に、要素を取り出していくことになるはずです。

メールアドレス:
コメント^*: