ネットワークアクセス (3/3)
作成:2012-12-17 08:20
更新:2012-12-17 08:20
更新:2012-12-17 08:20
■パラメータを送信する
単純に指定のアドレスにアクセスして結果を受け取るだけ、というシンプルな使い方は、アプリの場合あまり多くないでしょう。それよりも、必要な情報をパラメータとしてサーバーに送り、それによって最適な結果を受け取る、というような使い方のほうが多いはずです。
これは、実はそれほど難しいものではありません。基本的な考え方は、通常のAjax通信と似ています。WinJS.xhrを呼び出す際、必要なパラメータをつけてURLを指定すれば良いのです。また、多くの場合、こうしたアクセスには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で取得されるデータというわけです。
パラメータの送信がわかれば、サーバーとの間でインタラクティブにデータをやり取りすることが出来るようになります。クライアント=サーバー型アプリの基本はこれで作れそうですね!
これは、実はそれほど難しいものではありません。基本的な考え方は、通常の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"; }); }
※関連コンテンツ
「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る