Question

我使用了webOS Ares工具来创建一个相对简单的App。它显示图像，图像下方是两个标签。一个是静态的，另一个标签应该通过点击图像来更新新信息。

当我点击图片时，我希望通过URL（http://jonathanstark.com/card/api/latest）获取JSON对象。返回的典型JSON如下所示：

{"balance":{"amount":"0","amount_formatted":"$0.00","balance_id":"28087","created_at":"2011-08-09T12:17:02-0700","message":"My balance is $0.00 as of Aug 9th at 3:17pm EDT (America\/New_York)"}}

我想解析JSON的“amount_formatted”字段并将结果分配给动态标签（在main-chrome.js中称为cardBalance）。我知道JSON应该根据API返回单个对象。

如果情况顺利，我会创建一个额外的标签并将“created_at”字段转换/分配给另一个标签，但我想在跑步之前走路。

我在使用AJAX获取JSON，解析JSON以及为其中一个标签分配字符串时遇到了一些麻烦。

在我开始工作之后，我计划看看是否可以在应用程序的负载上加载此结果，而不是先要求用户点击。

到目前为止，这是我在main-assistant.js文件中的代码。 jCard就是形象。代码：

function MainAssistant(argFromPusher) {}

MainAssistant.prototype = {
    setup: function() {
        Ares.setupSceneAssistant(this);
    },
    cleanup: function() {
        Ares.cleanupSceneAssistant(this);
    },
    giveCoffeeTap: function(inSender, event) {
        window.location = "http://jonathanstark.com/card/#give-a-coffee";
    },
    jcardImageTap: function(inSender, event) {
        //get "amount_formatted" in JSON from http://jonathanstark.com/card/api/latest
        //and assign it to the "updatedBalance" label.
        // I need to use Ajax.Request here.
        Mojo.Log.info("Requesting latest card balance from Jonathan's Card");
        var balanceRequest = new Ajax.Request("http://jonathanstark.com/card/api/latest", {
            method: 'get',
            evalJSON: 'false',
            onSuccess: this.balanceRequestSuccess.bind(this),
            onFailure: this.balanceRequestFailure.bind(this)
        });
        //After I can get the balance working, also get "created_at", parse it, and reformat it in the local time prefs.
    },
    //Test
    balanceRequestSuccess: function(balanceResponse) {
        //Chrome says that the page is returning X-JSON.
    balanceJSON = balanceResponse.headerJSON;
        var balanceAmtFromWeb = balanceJSON.getElementsByTagName("amount_formatted");
        Mojo.Log.info(balanceAmtFromWeb[0]);
        //The label I wish to update is named "updatedBalance" in main-chrome.js
        updatedBalance.label = balanceAmtFromWeb[0];
    },
    balanceRequestFailure: function(balanceResponse) {
        Mojo.Log.info("Failed to get the card balance:  " + balanceResponse.getAllHeaders());
        Mojo.Log.info(balanceResponse.responseText);
        Mojo.Controller.errorDialog("Failed to load the latest card balance.");
    },
    //End test
    btnGiveCoffeeTap: function(inSender, event) {
        window.location = "http://jonathanstark.com/card/#give-a-coffee";
    }
};

以下是Chrome浏览器中运行的应用程序的屏幕截图： Ares

在浏览器中，我收到了一些Ares日志查看器中没有的其他错误：

XMLHttpRequest cannot load http://jonathanstark.com/card/api/latest. Origin https://ares.palm.com is not allowed by Access-Control-Allow-Origin.

和

Refused to get unsafe header "X-JSON"

感谢任何帮助。

Answer 1

Ajax是适合这项工作的工具。由于webOS与Prototype库一起打包，因此请尝试使用它的Ajax.Request函数来完成工作。要查看它的一些示例，您可以查看我编写的webOS应用程序的源代码，Plogger，它使用Ajax调用访问webOS上的Blogger。特别是，post-list-assistant的来源可能是最清楚的想法。

Ajax几乎就是你想要获取数据的方式，即使它有时候感觉有点过分，因为它是你在JavaScript中获得异步行为的少数方法之一。否则，您最终会在等待来自服务器的响应时挂起界面的代码（JavaScript是单线程的）。

webOS / Ares：从URL读取JSON，分配给标签

1 个答案: