Yahoo! UI Library3（YUI3）データ処理に着目

Yahoo! UI Library Ver.3 を使ってみよう（5）

通信処理

　データ通信をサポートするユーティリティです。Ajaxなどを行うための関数をサポートしています。またブラウザごとの仕様の違いをある程度吸収してくれます。

　データ通信にはモジュールioを使用します。以下はWINGSプロジェクトのサイトで提供されているRSSを取得して表示する例題の実行画面です。Y.DataSource.Getでのデータ読み込みもできますが、より詳細なパラメータを設定したい場合などに便利なモジュールです。

図4：リスト9の実行画面

　リスト9をみてください。

［リスト9］RSSを取得（io.html）

YUI().use("io","node" ,function (Y) {
  var uri="http://www.wings.msn.to/contents/rss.php";
  
  Y.one('#button').on("click",  function(e) {
    var request = Y.io(uri, {
    method:"GET",
    on:
        {
        success: function(id,o){
            var id = id;         // YUI3で設定されたデータの管理番号
            var data = o.responseText;// 読み込みデータ
            Y.one("#demo").set("innerHTML",id+"<br>"+data+"<br>");
        },
        failure: function(id,o){
            Y.one("#demo").set("innerHTML", o.status + " " + o.statusText);
        }
        }
    });
  });
});        （1）
</script>

　ボタンを押すとY.io()でRSSを取得しています。Y.ioの構文を示します。

［構文］io関数

io（ uri , property ）
    uri：アドレス
    property：
       method："GET","POST"
       data："user=XXX&password=XXX"のように送る文字列
       headers：HTTPで送るヘッダー{ 'X-Transaction': 'GET Example'}等
       on:イベントハンドラーの指定
           start：開始時
           complete：完了時
           success：成功時
               function(id,o){}
                id:トランザクション ID
                o:読み込みデータ
                   o.responseText   読み込み文字列
                   o.responseXML   XML読み込み
                   o.statusText   HTTPステイタス読み込み
            failure：失敗時
       timeout：タイムアウト指定（ミリ秒指定）