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

単純に指定のアドレスにアクセスして結果を受け取るだけ、というシンプルな使い方は、アプリの場合あまり多くないでしょう。それよりも、必要な情報をパラメータとしてサーバーに送り、それによって最適な結果を受け取る、というような使い方のほうが多いはずです。

これは、実はそれほど難しいものではありません。基本的な考え方は、通常のAjax通信と似ています。WinJS.xhrを呼び出す際、必要なパラメータをつけてURLを指定すれば良いのです。また、多くの場合、こうしたアクセスにはPOST通信を使いますが、これもパラメータに値を用意しておくことで対応できます。

{ url: "http://ドメイン/○○?キー=値",
    type:"post" }

例えば、このような具合ですね。URLのアドレスの後に?をつけ、「○○=☓☓」といった形でキーと値を記述します。値が半角英数字であればそのままで構いませんが、それ以外の場合はURLエンコードした値をつけるようにすればよいでしょう。

POST送信は、typeに"post"と指定するだけです。GETならばtype:"get"でOK。ただしtypeを省略するとGETとして判断されますから、「GETならtypeはなし」と覚えておきましょう。

下に利用例を挙げておきます。先ほどのサンプルのbtn1Click関数を修正したものです。ここでは、tuyano-sample.appspot.com/getvalueというアドレスに、tag=aというパラメータを付けてアクセスしています。

このサーバーでは、getvalueにアクセスし、tagというキーに値を指定して呼び出すと、その名前で保管されている値を返すようになっています。aには、ダミーとしてテキストが保管してあります。ボタンを押すと、["VALUE", "a", "this is test!"]といったテキストが表示されます。これがtag=aで取得されるデータというわけです。

パラメータの送信がわかれば、サーバーとの間でインタラクティブにデータをやり取りすることが出来るようになります。クライアント＝サーバー型アプリの基本はこれで作れそうですね！

(by. SYODA-Tuyano.)

※リストが表示されない場合

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

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

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