webOS/Ares：JSONをURLから読み込み、ラベルに割り当てます。

Question

私はwebOS Aresツールを使用して比較的単純なアプリケーションを作成しました。画像を表示し、画像の下に2つのラベルが表示されます。 1つは静的で、もう1つのラベルは画像をタップして新しい情報で更新する必要があります。

画像をタップすると、URL（http://jonathanstark.com/card/api/latest）でJSONオブジェクトを取得したいと考えています。返されるtypcial JSONは次のようになります。私は、JSONのは、「amount_formatted」フィールド解析し、（主chrome.jsにcardBalanceと呼ばれる）ダイナミックラベルに結果を割り当てる

{"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がAPIごとに単一のオブジェクトを返すべきことを知っています。

これがうまくいくと、私は追加のラベルを作成し、 "created_at"フィールドを追加のラベルに変換/割り当てますが、実行する前に歩きたいです。

AJAXを使用してJSONを取得し、JSONを解析し、ラベルの1つに文字列を割り当てるのに問題があります。

私はこの作業が終わった後、最初にユーザーにタップを要求するのではなく、アプリケーションの負荷にこの結果をロードできるかどうかを確認する予定です。

これまでのところ、これは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ブラウザで実行中のアプリケーションのスクリーンショットです：ブラウザで

、私はアレスに存在していなかったいくつかの追加のエラーがビューアのログを取得する：

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関数を使用してみてください。そのいくつかの例を見るには、Ajax呼び出しを使用してwebOS上のBloggerにアクセスするPloggerというWebOSアプリケーションのソースコードをチェックアウトすることができます。具体的には、私のpost-list-assistantのソースは、おそらく考えを得るために見て最もクリーンです。

Ajaxは、JavaScriptで非同期動作を実行できるいくつかの方法の1つで、時には過度の気分になってもデータを取得する方法とほぼ同じです。さもなければ、サーバーからの応答を待っている間にインターフェイスをハングするコードになります（JavaScriptはシングルスレッドです）。