« Cookieへのデータ保存 | トップページ | パラメータ指定 »

2007年4月22日 (日)

Ajax機能

Dojoでは、dojo.io.bind()により、クロスブラウザのAjax機能を提供する。以下のシンプルな例では、ボタンを押すと、"sample.txt"を取得して、ファイルの中身をポップアップで表示する。

<html>
<head>
<title>dojo.io.bind</title>
<script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.io.*");

function doit() {
  dojo.io.bind({
    url: "http://ymdmstk.cocolog-nifty.com/sample/sample.txt",
    load: function(type, data, evt) {
      alert(data);
    }
  });
}
</script>
</head>

<body>
  <input type="button" value="Get sample.txt" onclick="doit();">
</body>
</html>

dojo.io.bindの引数となるObjectのパラメータに、Ajax呼び出しの方法を指定する。先の例では、urlとloadをパラメータとして指定している。urlには呼び出し先のURL、loadには呼出し後の処理を記述する。

loadパラメータはFunctionを引数として取り、Functionは、type, data, evtの3つを引数として受け取る。typeには文字列"load"が固定で入る。dataには、取得したデータが入る。この例ではテキストファイルを取得しているため文字列としてデータが入る。evtには、XMLHttpRequestオブジェクトが入る。

エラー処理

ファイル/サービスが存在しないなどの理由によりAjaxの呼び出しに失敗したときの処理を、errorに書く事ができる。

dojo.io.bind({
  url: "http://ymdmstk.cocolog-nifty.com/sample/sample.txt",
  load: function(type, data, evt) { alert(data);},
  error: function(type, data, evt) { alert("エラー:"+data.message);}
});

errorのときは、dataにdojo.io.Errorが入る。dojo.io.Errorは、message, type, numberの3つのパラメータを持つ。messageにはエラーメッセージ、typeにはエラーの種類、"io", "parse", "unknown"のいずれかが入る。numberにはエラー番号が入る。

loadまたはhandleのFunction中においてエラーを投げたときも(throw new Error("..."))、errorのFunctionが呼ばれる。

タイムアウト処理

timeoutSecondsパラメータを指定することで、タイムアウトするまでの時間を秒単位で指定できる。デフォルトのtimeoutSecondsは0となっており、永遠に処理を待つ設定となっている。ブラウザから同一ドメインへの同時アクセスは2つまでとなっているため、永遠に待つ設定となっているのは問題がある。timeoutSecondsを設定するのが望ましい。

タイムアウトしたときは、timeoutで指定したFunctionが呼ばれる。timeoutのFunctionはerrorと同じように指定できる。

dojo.io.bind({
  url: "http://ymdmstk.cocolog-nifty.com/sample/sample.txt",
  load: function(type, data, evt) { alert(data);},
  error: function(type, data, evt) { alert("エラー:"+data.message);},
  timeout: function(type, data, evt) { alert("タイムアウトエラー:"+data.message);},
  timeoutSeconds: 10
});

レスポンスのデータ形式

レスポンスのデータ形式は、テキスト, XML, JavaScript, JSONに対応する。 デフォルトはテキストだが、レスポンスのデータ形式を変えるときは、mimetypeプロパティで指定する。 テキスト: "text/plain", XML: "text/xml" or "application/xml", JSON: "text/json" or "application/json", JavaScript: "text/javascript"をそれぞれ指定する。

テキスト以外のときは、レスポンスのデータ形式が文字列ではなく、それぞれの対応するオブジェクトになる。XMLではDOM、JSONではJSON、JavaScriptではJavaScriptのオブジェクトが返る。

JSON、JavaScriptのときは返り値のテキストをevalしてJavaScriptのオブジェクトに変換しているだけ (JSONのときは前後に"(", ")"を付けている) であるため、セキュリティについて考慮するときは、問題があるコードが含まれていないかevalする前にテキストを処理するコードを追加することが必要である。

パラメータ一覧

以下に、dojo.io.bindの引数となるObjectのパラメータ一覧を示す。

パラメータ概要
load Function 呼び出しに成功した後の処理を指定する
error Function 呼び出しに失敗した後の処理を指定する
timeout Function タイムアウトした後の処理を指定する
handle Function load, error, timeoutの全てのときに、handleが呼ばれ、typeの 値で処理の振り分けできる。
url String URL
method String GET, POST、デフォルトはGET
mimetype String "text/plain", "text/javascript", "text/xml", "application/xml", "text/json", "application/json", デフォルトは"text/plain"
transport String "XMLHTTPTransport", "RhinoHTTPTransport", "ScriptSrcTransport", "IframeTransport"
headers Object HTTP request headerのnameとvalue
sendTransport boolean trueのときはdojo.transport=xmlhttpがrequestに加えられる
encoding String kwArgs contentを処理するときのエンコーディング指定
content Object dojo.io.argsFromMap()が渡されると、name=value&name=valueに変換される
formNode DOMNode 通常は使わない。dojo.io.FormBind()を使うべきである。name=value&name=valueに変換される
postContent String name=value&name=valueをrequestの一部に加える
back or backButton Function backボタンが押されたときに呼ばれる関数を指定する
changeUrl boolean or String backボタンのサポートとして使われる
user String XMLHttpRequest.open()に渡される
password String XMLHttpRequest.open()に渡される
file Object or Array of Object アップロードするファイルを指定する。Objectは、name or fileName, contentType, contentを含む。
multipart boolean multipartを用いるかどうかを指定する
sync boolean trueにすると同期呼び出しとなる。デフォルトはfalse
useCache boolean キャッシュの利用有無を指定する。デフォルトはfalse
preventCache boolean trueにすると同じリクエストに対して内部キャッシュを使う。デフォルトはfalse。
timeoutSeconds int タイムアウトするまでの秒数

« Cookieへのデータ保存 | トップページ | パラメータ指定 »

コメント

はじめまして。

非常に参考になります。

公開した頂いた、クロスブラウザのAjax機能をローカルから実行してみました。

IEでは上手く動きましたが、FirFox2及びoprea9では上手く動きませんでした。

ローカルファイルを参照しているとだめかもしれません。 ローカルにサーバを立てて試してみて下さい。

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/6177587

この記事へのトラックバック一覧です: Ajax機能:

« Cookieへのデータ保存 | トップページ | パラメータ指定 »