back
ネットワークアクセス (2/3)
■WinJS.xhrを使ってみる
では、簡単な利用例を以下に挙げておきましょう。ここでは、id="msg"というタグを用意しておき、ボタンをクリックするとtuyano-sample.appspot.comにアクセスしてその内容を取得しmsgに表示しています。
ここでは、起動時にbtn1.addEventListener("click", btn1Click, false);としてボタンのclickイベントにbtn1Click関数を割りつけています。そしてこの関数内でアクセスの処理を擁しています。
あらかじめid="msg"のタグのDOMオブジェクトを変数に取り出しておき、WinJS.xhrを実行しています。今回は、tuyano-sample.appspot.comにアクセスをしていますが、これはApp Inventor用のテストサーバーで、普通にアクセスするとただのテキストが表示されるだけです。
doneメソッドには、completeとerrorの２つの関数を用意してあります。まずはcompleteからです。ここではサーバーから送られてきたテキストを取り出してmsgに表示しています。
エラー処理のためのerrorも、基本的な考え方は同じです。引数で渡されるresultからエラーに関する情報を取り出し、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();
})();
| << 前へ | 次へ >> |