ネットワークアクセス(2/3):JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門

ネットワークアクセス (2/3)

作成:2012-12-17 08:16
更新:2012-12-17 08:16

■WinJS.xhrを使ってみる

では、簡単な利用例を以下に挙げておきましょう。ここでは、id="msg"というタグを用意しておき、ボタンをクリックするとtuyano-sample.appspot.comにアクセスしてその内容を取得しmsgに表示しています。

ここでは、起動時にbtn1.addEventListener("click", btn1Click, false);としてボタンのclickイベントにbtn1Click関数を割りつけています。そしてこの関数内でアクセスの処理を擁しています。

function btn1Click(mouseEvent) {
    var msg = document.getElementById("msg");
    WinJS.xhr({ url: "http://tuyano-sample.appspot.com/" }).done(……

あらかじめid="msg"のタグのDOMオブジェクトを変数に取り出しておき、WinJS.xhrを実行しています。今回は、tuyano-sample.appspot.comにアクセスをしていますが、これはApp Inventor用のテストサーバーで、普通にアクセスするとただのテキストが表示されるだけです。

doneメソッドには、completeとerrorの２つの関数を用意してあります。まずはcompleteからです。ここではサーバーから送られてきたテキストを取り出してmsgに表示しています。

function complete(result) {
    msg.textContent = result.responseText
    msg.style.backgroundColor = "#336666";
}

サーバーから受信したデータは、引数resultの「responseText」プロパティを指定して取り出すことができます。こうして取り出したテキストをtextContentに設定すれば完了です。

エラー処理のためのerrorも、基本的な考え方は同じです。引数で渡されるresultからエラーに関する情報を取り出し、msgに表示しているだけです。

function error(result) {
    msg.textContent = "ERROR!!: " + result.statusText;
    msg.style.backgroundColor = "#FF0000";
});

エラーメッセージは、resultオブジェクトの「statusText」というもので取り出せます。後は、それを必要に応じて表示するだけですね。

(by. SYODA-Tuyano.)

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※default.htmlの<body>部分
<body id="body">
    <h1 id="title">Sample Page</h1>
    <p id="msg" data-win-bind="style.color: color; style.background: bgcolor; style.fontSize: fsize">this is sample page.</p>
    <button id="button1">Click!</button>
</body>


※default.js

(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {} else {}
            args.setPromise(WinJS.UI.processAll().then(
                function () {
                    var btn1 = document.getElementById("button1");
                    btn1.addEventListener("click", btn1Click, false);
                }
            ));
        }
    };

    app.oncheckpoint = function (args) {};

    function btn1Click(mouseEvent) {
        var msg = document.getElementById("msg");

        WinJS.xhr({ url: "http://tuyano-sample.appspot.com/" })
            .done(function complete(result) {
                msg.textContent = result.responseText
                msg.style.backgroundColor = "#336666";
            },
            function error(result) {
                msg.textContent = "ERROR!!: " + result.statusText;
                msg.style.backgroundColor = "#FF0000";
            });
    }

    app.start();

})();

※関連コンテンツ

<< prev next >>

「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る