2013年06月29日

Chrome Packaged AppsでXMLHttpRequestを使ったJSON通信

Chrome Packaged Apps や Chrome ExtensionでXMLHttpRequestを使ってWebサーバとJSONな通信をする方法を紹介する。 非常に簡単なので下のサンプルソースを見ればサクッと理解できると思う。

ファイル構成:
manifest.json
background.js
window.html
app.js
calculator-128.png
calculator-64.png

まずはPackaged AppsやExtensionお決まりのマニフェストファイル manifest.json
{
  "name": "Hello XMLHttpRequest!",
  "description": "XMLHttpRequest sample app.",
  "version": "0.1",
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" },
  "permissions": [
    "http://*/"
  ]
}

permissionsの中身は非常に重要。
"http://*/"
この記述法なら全てのURLに対応する。
httpsに対応させる場合は、
"https://*/"
とする。

次にこちらもお決まりの background.js
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'bounds': {
      'width': 400,
      'height': 500
    }
  });
});

次に画面。
window.html
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  <button id="send">Send</button>
  <div id="msg">ここにレスポンス表示</div>
  <script src="app.js"></script>
  </body>
</html>

最後に重要なJavascript本体。
app.js
document.getElementById('send').onclick = function() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://echo.jsontest.com/message/Hello_XMLHttpRequest", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState != 4) {
      return;
    } 
    if (xhr.status == 200) {
      var obj = JSON.parse(xhr.responseText);
      document.getElementById('msg').innerText = obj.message;
    }
  }
  xhr.send();
};

使い方は見ても分かる通り簡単。
xhr.open()の3番目の引数は非同期通信かどうか。trueなら非同期で呼び出す。
xhr.send()すると、上のWebサーバ側から {"message": "Hello_XMLHttpRequest"} なJSON文字列がレスポンスされてくるので、onreadystatechangeの中で JSON.parse して <div id="msg"> のinnerTextにmessageをセットしている。

参考
Cross-Origin XMLHttpRequest - Google Chrome
How to set script-src in a Chrome packaged app? - Stack Overflow
Cross-Origin XMLHttpRequest in chrome extensions - Stack Overflow

関連エントリ
JS用MVCフレームワーク「AngularJS」を使ってChrome Packaged Apps【基本編】
【Chrome】Packaged Apps で OAuth2認証する超簡単なサンプル【Google】
【Chrome】Packaged Apps アプリをHelloWorld【Google】
スマホOSの主導権争いの行方
posted by 寄り道退屈男 at 16:35 | Comment(0) | TrackBack(0) | Packaged Apps
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/70201135
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック