Doge log

Abby CTO 雑賀 力王のオフィシャルサイトです

Dojoのものすごく簡単な使い方　JSON編

Dojo

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/にもサンプルないしなあ・・・・。

うくく。