nitoka blog: 久しぶりにprototype.js

« 口臭が魚臭い女はイヤだ！ | メイン | Flashでストップモーションビデオを作ってみる »

February 08, 2007

久しぶりにprototype.js

会社でコーダーさんにprototype.jsについて聞かれ、半年振りくらいに触ってみました。
最近では、prototype.jsから派生したいろいろなJavaScriptフレームワークがでてきたこともあり、ちょっと古くなった感のあるprototype.js。

聞かれたことっていうのがAjax.Updaterを使ってHTMLの内容を切り替えられるようにしたいらしいのですが、別にAjax.UpdaterじゃなくてもAjax.Requestを使ってXMLの内容を取得、解析して表示する方法もあるので、両方を使ったサンプルを作ってみました。

サンプルページ

Ajax.Requestを使っているほうは、newしてXMLを解析する処理をpage.jsに実装しています。

function changeText(url)
{
	new Ajax.Request(url, { method: "get", onComplete:printTag });
}

function printTag(httpObj)
{
	var result = httpObj.responseXML;
	var desc = result.getElementsByTagName("description");

	$("content").innerHTML = '';
	$("content").innerHTML = desc[0].firstChild.nodeValue;
}

Ajax.Updaterを使っているほうは、ベタにonclickでnewして実行しています。

<a href="javascript:void(0);" onclick="new Ajax.Updater('content','page1.html',{method: 'get'});" >page 1</a>
<a href="javascript:void(0);" onclick="new Ajax.Updater('content','page2.html',{method: 'get'});" >page 2</a>

どちらも文字化けは起きていないとは思いますが、Safariはクセがあるので、responseTextでファイルの内容を取得するよりも、responseXMLで取得、解析したほうがよいかもしれません。