Dojoのものすごく簡単な使い方。 - def __mopemope_

2006-02-04

■[Dojo]Dojoのものすごく簡単な使い方。

勉強がてらさっそくすごく簡単なAjaxを作ってみました。

（初Ajaxです）

prototype.jsのものすごく簡単な使い方。 : blog.nomadscafe.jpとおんなじように

「ボタンをクリックしたら、Ajaxで別のファイルの内容を取りにいって、HTMLの一部をそれに置き換える」

というものを作ってみます。

HTMLを書きます。

test.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.txt",				
      load: function(type, data, evt){
        dj_debug(data);
　　   node.innerHTML = data;						
      },
    };				
  var canBind = dojo.io.bind(bindArgs);
  }
</script>
</head>
<body>
<p id="blk">ここがターゲット</p>
<input type="button" value="ボタン" onclick="test();"/>
</body>
</html>

でtest.txtってファイルをつくり

これが出ればOKちゃーん

とか書いておきます。

これで完成。

test.htmlを開いて、ボタンをクリックしてみるとテキストの内容が変化するハズです。

簡単に説明ですが

まずファイルの頭の方で

<script type="text/javascript">
	var djConfig = {isDebug: true};
	//djConfig.debugAtAllCosts = true;
</script>

としていますがこれがDEBUGの設定になります。

これをtrueにしておくと

      load: function(type, data, evt){
        dj_debug(data);

でdataの中身を画面に出力します。

開発時には重宝しますので是非使いましょう。

で次

<script type="text/javascript">
  dojo.require("dojo.io.*");

としていますがこれはDojoの他のライブラリをインポートする際に記述します。

上記だと"dojo.io.*"に属しているライブラリがインポートされ使用できます。

（AjaxなのでWebI/O系をインポートしています。）

JSANみたいなものと思ってもらえればよいと思います。

Dojoは全体だと大変大きいライブラリなので使用するライブラリのみインポートして使うようにしましょう。

（全部だと読み込むのに時間がかかりすぎてしまいます）

で実際にAjaxを行っているのはここです。

dojo.io.bind(bindArgs);

boind関数は渡されたパラメータを元に通信を行ってデータを取得するメソッドです。

渡すパラメータは

    var bindArgs = {
      url: "test.txt",				
      load: function(type, data, evt){
        dj_debug(data);
　　   node.innerHTML = data;						
      },
    };

簡単に説明すると

url:はURLを表すパラメータです。今は"test.txt"の内容を取得するので"test.txt"としています。

load:は呼ばれたときに実行するファンクションを登録します。

"type"には実行された結果、"data"には取得データが入ってきます。

（evtはよくわからん）

今の場合は取得した"data"を"node"にセットしています。

("node"は"blk"って名前の要素なのでその値が変わります。）

prototype.jsのAjax.Updapterに当たるようなものがあるのかも知れないのですがちょっとまだわかってません。

知ってる方いれば教えてください。

うくく。

追記

JSON編も書いてみる