Dojoのものすごく簡単な使い方 JSON編
DojoでJSONのサンプルを紹介。
前回と同様に
「ボタンをクリックしたら、Ajaxで別のファイルの内容を取りにいって、HTMLの一部をそれに置き換える」
を実装してみましょう。
まずはdojo-json.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>sample</title> <script type="text/javascript" src="/src/js/dojo.js"></script> <script type="text/javascript"> var djConfig = {isDebug: true}; //djConfig.debugAtAllCosts = true; </script> <script type="text/javascript"> dojo.require("dojo.io.*"); function test(){ var node = document.getElementById("blk"); var bindArgs = { url: "test.json", mimetype: "text/json", load: function(type, json, http) { node.innerHTML = json.getTest(); dojo.debug("http:", http); dojo.debug("response:", http.responseText); dojo.debug("state:", http.readyState); dojo.debug("--------"); dojo.debug("json:", json); dojo.debug("- Key/value pairs -------"); for(var key in json) { dojo.debug(key, ":", json[key]); } dojo.debug(json.getTest()); } }; var canBind = dojo.io.bind(bindArgs); } </script> </head> <body> <p id="blk">ここがターゲット</p> <input type="button" value="ボタン" onclick="test();"/> </body> </html>
前回同様簡単なHTMLを作成します。
で取得するデータtest.jsonファイル
{ now: new Date(), x: 1, y: 7, value: "JSONテスト", arrayOfNums: [1, 2, 3, 4, 5], getTest: function() { return this.value + ":ここが出れば正解"; }, toString: function() { return this.value + ", " + this.now; } }
と書いておき、同Dirに格納してください。
これで完成。
dojo-json.htmlを開いて、ボタンをクリックしてみるとテキストの内容が変化するハズです。
load:functionの引数に注意して下さい。
mimetype: "text/json", load: function(type, json, http) {
とするといきなりそのままjavscriptのobjectとしてjsonが扱えるようです。
(ホントか!?)
細かいことはすっ飛ばします。使い方なんで。
ということでDojoでJSONはあまりサンプルがないようなので書いてみました。
http://an9.org/ddq/にもサンプルないしなあ・・・・。
うくく。