XMLHttpRequest

記事の下のPOLL(世論調査)を作った当時はiframeを使用するやり方以外は知らなかった。現在はAJAXを勉強しPOLLをAJAXで作ってみた。
作っているときにはとても苦労した。複数のXMLHttpRequestを同時に送っているため、リスポンスがうまく帰ってこない。指定したdivにリスポンスがちゃんと入ったり入らなかったり。。。

自殺する寸前に２つのライブラリーの存在を知った。PrototypeとRicoだ。この２つを使い、うまく複数のXMLHttpRequestの処理ができた。。。

function update(){
ajaxEngine.registerRequest("multiple","/UrlOfScript");
ajaxEngine.registerAjaxElement("div567");
ajaxEngine.registerAjaxElement("div563");
ajaxEngine.sendRequest("multiple","");
}
window.onload=function(){
update();
}

"ajaxEngine"はrico.jsのなかのオブジェクト。"ajaxEngine.registerAjaxElement"は複数のリスポンスがはいるとこ。"UrlOfScript"はXMLHttpRequestを処理するサーバー側のスクリプトだ。そのスクリプトの後ろに"UrlOfScript.php?poll[title]=do+you+love+gundam..."のように変数を送っている。

次はそのサーバー側のスクリプトがXMLでリスポンスを出すようにしなければなりません。。。

<? header("Content-Type: application/xml"); ?>
<ajax-response>
<response type="element" id="div567">
<![CDATA[Returned HTML goes here
]]>
</response>
<response type="element" id="div563">
<![CDATA[Returned HTML goes here
]]>
</response>
</ajax-response>
このようにCDATAを使うとHTMLをそのまま放り込んでもいい。PHPを使いの方はob_start()、ob_get_contents()とob_end_clean()は役に立つと思う。

MACのFirefoxとSafari、WINのFirefoxとIE6でテストしました。多分問題ないと思いますがあれば教えてください。

ところで画像のほうはこの記事と全く関係ない。かわいいと思っただけで一緒に投稿した。efは今年発売する予定だ。