ネットワークアクセス (2/3)
作成:2012-12-17 08:16
更新: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関数を割りつけています。そしてこの関数内でアクセスの処理を擁しています。
あらかじめid="msg"のタグのDOMオブジェクトを変数に取り出しておき、WinJS.xhrを実行しています。今回は、tuyano-sample.appspot.comにアクセスをしていますが、これはApp Inventor用のテストサーバーで、普通にアクセスするとただのテキストが表示されるだけです。
doneメソッドには、completeとerrorの2つの関数を用意してあります。まずは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の2つの関数を用意してあります。まずはcompleteからです。ここではサーバーから送られてきたテキストを取り出してmsgに表示しています。
function complete(result) {サーバーから受信したデータは、引数resultの「responseText」プロパティを指定して取り出すことができます。こうして取り出したテキストをtextContentに設定すれば完了です。
msg.textContent = result.responseText
msg.style.backgroundColor = "#336666";
}
エラー処理のためのerrorも、基本的な考え方は同じです。引数で渡されるresultからエラーに関する情報を取り出し、msgに表示しているだけです。
function error(result) {エラーメッセージは、resultオブジェクトの「statusText」というもので取り出せます。後は、それを必要に応じて表示するだけですね。
msg.textContent = "ERROR!!: " + result.statusText;
msg.style.backgroundColor = "#FF0000";
});
(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(); })();
※関連コンテンツ
「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る