« 口臭が魚臭い女はイヤだ！ | メイン | 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で取得、解析したほうがよいかもしれません。

Author nitoka : February 8, 2007 04:38 PM

TrackBack

TrackBack URL:
http://www.nitoka.net/blog/mt-tb.cgi/283

Comment

Please, comment




save