XMLHttpRequestサンプル(1)

XMLHttpRequestを利用するとHTTPリクエストを出してデータを取得できます。 一般的なJavaScriptでは、XMLHttpRequestを出せる先は制限されていますが、アプリキャストでは制限が緩和されているようです(2008年9月現在)。 これは、恐らくアプリキャスト公式アプリが審査を通過していることと、アプリキャスト配布サイトが一括して運用されているからだと思います。

下記サンプルでは、RSSを取得してchannelのタイトル部分だけを抜き出して表示しています。 アクティブモードで上矢印を押すとRSSを読み込みます。 サンプルのURL部分は適度に変更して下さい。

layout.xml

<?xml version="1.0" encoding="UTF-8"?>
<Widget>
  <Component name="widget">
    <Bitmap name="initial-bg"/>
    <Component name="normal">
      <Bitmap name="normalBase"/>
    </Component>
    <Component name="focus" visible="0">
      <Bitmap name="focusBase"/>
    </Component>
    <Component name="active" visible="0">
      <Bitmap name="activeBase"/>
      <Memo2D name="titleStr" w="250" h="100" x="10" y="10"/>
    </Component>
  </Component>
</Widget>

widget.js

var nodeNormal     = getNode("normal");
var nodeNormalBase = getChildNode(nodeNormal, "normalBase");
var nodeFocus      = getNode("focus");
var nodeFocusBase  = getChildNode(nodeFocus, "focusBase");
var nodeActive     = getNode("active");
var nodeActiveBase = getChildNode(nodeActive, "activeBase");
var nodeTitle = getChildNode(nodeActive, "titleStr");

var mode = 0; // 0:normal, 1:focus, 2:active

var xmlhttp = null;

function onLoad() {
  loadImage(nodeNormalBase, "./parts/normal.png");
  loadImage(nodeFocusBase,  "./parts/focus.png");
}

function onUpKey() {
  if (mode == 2) {
    doHttpRequest();
  }
}

function onDownKey() {
}

function onRightKey() {
}

function onLeftKey() {
}

function onConfirmKey(type) {
}

function onFocus() {
  mode = 1;

  setVisible(nodeNormal, 0);
  setVisible(nodeFocus, 1);
  setVisible(nodeActive, 0);
}

function onUnfocus() {
  mode = 0;

  setVisible(nodeNormal, 1);
  setVisible(nodeFocus, 0);
  setVisible(nodeActive, 0);
}

function onActivate() {
  mode = 2;

  loadImage(nodeActiveBase, "./parts/active.png");

  setVisible(nodeNormal, 0);
  setVisible(nodeFocus, 0);
  setVisible(nodeActive, 1);
}

////

function onReadyStateChangeCallback()
{
  print("onreadystatechange " + xmlhttp.readyState + "\n");

  if (xmlhttp.readyState != 4) {
    print("readyState = " + xmlhttp.readyState + "\n");
    return;
  }
  if (xmlhttp.status != 200) {
    print("ERROR : HTTP status " + xmlhttp.status + "\n");
    return;
  }

  parseRss(xmlhttp.responseXML);
}

function doHttpRequest()
{
  print("doHttpRequest()\n");

  xmlhttp = new XMLHttpRequest();
  if (!xmlhttp) {
    print("error 1\n");
    return;
  }

  xmlhttp.onreadystatechange = onReadyStateChangeCallback;
  xmlhttp.open('GET', 'http://b.hatena.ne.jp/entrylist?mode=rss');
  xmlhttp.send(null);
}

function parseRss(xml)
{
  print("parseRss()\n");

  var channel = xml.getElementsByTagName("channel");
  if (!channel) {
    print("error !channel\n");
    return;
  }

  var title = channel[0].getElementsByTagName("title");
  if (!title) {
    print("error !title\n");
    return;
  }

  setStr(nodeTitle, title[0].firstChild.nodeValue);
}

サンプルダウンロード

ウィジェットバンドル : XMLHttpRequest1.zip