yummy-yummy

Dojo Ajax通信編

Dojo javascript

Dojoを使ってAjax通信する際の使い方。

Dojoライブラリを使えば、超カンタンにAjax通信ができちゃいます。

xhr通信系のパラメータは基本的には以下の表のものが使えます。（通信方式によっては使えないものもあるのでAPIを確認すること。）

パラメータ	タイプ	内容
url	String	通信先URLを指定。
content	Object	送信時パラメータを連想配列で指定。
load	Function	通信成功時にコールされる関数。 function(response, ioArgs){} でコールバック関数を準備。
error	Function	通信失敗時にコールされる関数。 function(response, ioArgs){} でコールバック関数を準備。
form	DOMNode	ドキュメント内のフォームを指定すると、フォーム内の入力内容を全て送信。 contentと併用可能。
handle	Function	通信終了時に成功、失敗に関わらずコールされる関数。 function(response, ioArgs){} でコールバック関数を準備。
handleAs	String	受信時のレスポンスフォーマットを指定。 text（デフォルト）,json, json-comment-optional, json-comment-filtered, javascript, xmlが指定可能。
headers	Object	リクエストヘッダ情報を追加する場合に使用。
preventCache	Boolean	キャッシュパラメータ送信フラグ。 preventCache=1224744356794のようにパラメータに追加される。 false:送信しない（デフォルト） true:送信する
sync	Boolean	同期通信、非同期通信の指定を行う。 false:非同期通信（デフォルト） true:同期通信
timeout	Integer	通信時間のタイムアウト値をミリ秒で指定。

dojo.xhrGet

dojo.xhrGet -- Dojo API --
Get通信を行います。

使用可能なパラメータ

content, error, form, handle, handleAs, headers, load, preventCache, sync, timeout, url

dojo.xhrPost

dojo.xhrPost -- Dojo API --
Post通信を行います

使用可能なパラメータ

content, error, form, handle, handleAs, headers, load, preventCache, sync, timeout, url

dojo.xhr

dojo.xhr -- Dojo API --
HTTP リクエスト通信を行います。

使用可能なパラメータ

content, error, form, handle, handleAs, headers, load, preventCache, sync, timeout, url

dojo.xhrDelete

dojo.xhrDelete-- Dojo API --
HTTP DELETE リクエスト通信を行います。

使用可能なパラメータ

content, error, form, handle, handleAs, headers, load, preventCache, sync, timeout, url

dojo.xhrPut

dojo.xhrPut -- Dojo API --
HTTP PUTリクエスト通信を行います。

使用可能なパラメータ

content, error, form, handle, handleAs, headers, load, preventCache, sync, timeout, url

xhrGet使用例

ここでは、メインページからdojo.xhrGetを使ってファイルからjson形式のデータを取ってくるサンプルを作成してみます。

メインページ

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Dojo Sample</title>
    <SCRIPT TYPE="text/javascript" 
      SRC="http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/dojo.xd.js"></SCRIPT> 
    <script>
      var init = function() {
        btn1 = dojo.byId("btn1");
        dojo.connect(btn1, "onclick", null, function(ev) {
          dojo.xhrGet({
            url:"hoge.json",
            handleAs: "json",
            content: {
              "key":"value",
              "foo":42,
              "bar": {
                "baz" :"value"
              }
            },
            load: function(data,ioargs){
              //FireBugやCompanion.jsを入れていない場合はAlertで。。
              console.log("res=", data);
            },
            error: function(error,args) {
              console.warn("error!",error);
            }
          });
        });
      }
      dojo.addOnLoad(init);
    </script>
  </head>
  <body>
    <form>
      <input type="button" value="button1" id="btn1"/><br/>
    </form>
  </body>
</html>

hoge.json

超シンプルに。とりあえずこんだけ。

{"hoge1" : "aaa", "hoge2" : "bbb"}

参考URL