dojoオブジェクトの基本（後編）

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

Ajaxに関連するメソッド

　JavaScriptでAjaxプログラミングを行うときに必ず用いられるのは、XmlHttpRequestオブジェクトだ。dojoには、HTTPプロトコルのGET、POST、PUT、DELETEに合わせて、xhrGet、xhrPost、xhrPut、xhrDeleteというメソッドが用意されている。また、RAWデータを送信するためのrawXhrPost、rawXhrPutメソッドもある。

　リスト2はxhrGetによってフォームの内容をサーバに送信する例だ。サーバのURLはurlプロパティの値として記述する。サーバからのレスポンスがテキストならhandleAs : "text"とし、JSON形式で受け取る場合は値を"json"にしておく。

　サーバにフォームの内容を送信する場合は、formプロパティにフォームのIDもしくはDOMオブジェクトを設定しておく。そうするとフォームの内容をサーバに送信してくれるので、Ajaxアプリケーションで便利に使えそうだ。

　注意すべきは、JavaScriptから送信されるデータはUTF-8でエンコードされているということだ。サーバで受信する際にはそれを踏まえて処理を行っていただきたい。ちなみにJSONのMIMEタイプはapplication/jsonである。

リスト2 サーバ通信でテキストを受信する例（JavaScript抜粋）

function formsend()  {
  dojo.xhrGet( {          // HTTPプロトコルのGETメソッドでサーバと通信
    url      : "サーバのURL",
    handleAs : "text",    // サーバからのレスポンスがJSONの時は'json'
    timeout  : 3000,      // サーバ通信のタイムアウト(3秒間)
    load     : function( response, ioArgs )  {
                 // サーバからのレスポンス受信後の処理(受信したテキストを表示)
                 // handleAs : "json"の時responseはオブジェクト
                 dojo.byId( 'ex1' ).innerHTML
                      = decodeURI( response );   // 日本語対応
               },
    error    : function( response, ioArgs )  {
                 // サーバ通信でエラーが発生したときの処理
                 dojo.byId( 'ex1' ).innerHTML
                      = 'エラー : ' + decodeURI( response );
               },
    form     : 'search'   // 
の場合
  } );
}
dojo.addOnLoad( formsend );    // dojo初期化後に上記を実行

　dojoオブジェクトにはまだ多くのメソッドが定義されているが、すべてを紹介することはできないのが残念だ。他のメソッドについてはドキュメントDojo APIで確認していただきたい。

　次回はDijitのコンポーネントを紹介したい。