PrototypeのAjax.RequestとresponseXMLを使ったAjax通信 
2008年6月20日 17:32 » オープンソース
Firefox 3のダウンロード数が凄いことになっているらしい。
PrototypeやjQueryなどのライブラリのおかげでブラウザー互換を意識せずにJavascript開発ができるようになってきた昨今、FirebugやHTTPLiveHeadersなど開発に便利なアドオンがあるFirefoxの人気が高まるのもうなずける。
とはいえまだまだ完全に互換性問題が無くなった訳ではない。当社でも最近IEで「エラーは起こらないのに、Ajaxが上手くいかない」状況にぶつかって苦労した。
実現したかったのは「ユーザーがボタン（input type="button"）を押した時に非同期通信を行い、動的に作成した返り値を表示する」というもの。Ajax通信自体にはPrototypeのAjax.Requestオブジェクトを利用した。また、返り値に日本語を含むので、ブラウザーの違いによる文字コード問題を避けるためにresponseTextではなくresponseXMLを選んだ。
JavascriptのAjax部分は以下の通り。
Event.observe($('someButton'), 'click',
function(e) {
new Ajax.Request('myxml.php',
{ method:'post',
parameters:
{ param1: "foo", param2: "bar" },
onSuccess: function(transport){
var res = transport.responseXML;
var msg = res.getElementsByTagName('msg')[0] ;
alert(msg.firstChild.nodeValue);
},
onFailure: function(){ alert('Error: could not save layout.') }
});
});
続いてmyxml.phpの中身。
header("Content-Type: application/xml");
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo "\n";
echo "<msg>";
echo "<![CDATA[";
echo $_POST['param1'] . ',' . $_POST['param2'];
echo "]]>";
echo "</msg>";
ここでCDATAの前後に¥nを出力しないように注意する。つまり、XMLの出力は
<msg>
<![CDATA[Hello World]]>
</msg>
ではなく
<msg><![CDATA[Hello World]]></msg>
となるようにする。というのも、前者の場合msg要素のfirstChildがHello Worldではなく¥nになってしまうからだ。
Firebugがあればこういった部分のデバグも容易に行えるが、IEの場合はonSuccessのコールバック内でエラーが起きても何も表示されないためにわかりにくい。Ajax開発ではJavascriptだけでなくこういったXMLの細かい部分にも注意したい。
トラックバック(0)
Permalink: PrototypeのAjax.RequestとresponseXMLを使ったAjax通信
Trackback URL: http://4plus.jp/mt/mt-tb.cgi/16
Ads
4plus Link
Profile
Junya Sano
CTO at 4plus Inc.
B.S. degree in Computer Science at Oregon State University.
Specialty in web development, especially LAMP.
コメントする