yamablo » [Ajax勉強中] インストールからテストまで

[Ajax勉強中] インストールからテストまで

Posted by yama3 2009年 05月 01日. プログラミング

最近、Ajaxでもやってみたいなと思い、Javascript, Ajaxの勉強を少しはじめてみました。使っているライブラリはprototype.jsです。prototype.jsを選んだ理由としては、とりあえず、メジャーらしいので日本語のドキュメントが揃っているだろう、と考えたからです。

ということで、以下が、prototype.jsのダウンロードからテストまでの一連の流れです。ここまででおよそ30分程度でしょうか？

http://prototypejs.org/assets/2007/1/18/prototype.jsをダウンロードし、ドキュメント・ルートに配置する。

以下の内容でindex.htmlファイルをドキュメント・ルートに配置。このとき、文字コードはUTF-8にする。その後、同じフォルダにinput.datというファイルを作成し、ファイルの中に適当に文字を書き込み保存する。

index.htmlをブラウザで開き、ボタンをクリック。すると、「ここがターゲット」と書かれていた部分にinput.datの中身が上書きされます。

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type”
content=”text/html; charset=UTF-8″ />
<title>sample</title>
<script src=”prototype.js” type=”text/javascript”></script>
</head>
<body>
<p id=”blk”>ここがターゲット</p>
<input type=”button” value=”ボタン” onclick=”new Ajax.Updater(‘blk’,'input.dat’,{method: ’get’});”/>
</body>
</html>

pボタンがクリックされると、rototype.js内のAjax.Updater関数を呼出し、テキストファイル内のデータを出力します。

http://yamablo.com/2009/05/01-193014.php/trackback