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>