![[PukiWiki]](https://www.masatom.in/pukiwiki/image/kinosite.png "[PukiWiki]"){kind=small}
|
はやりのAJAXライブラリ Prototype を使ってみました。通常AJAXでアプリを開発するにはJavaScript?のややこしい文法やブラウザ周りの互換性などをちゃんと理解する必要があるんだけど、このライブラリを使うことでクロスブラウザなAJAXアプリを作ることができます。 ダウンロード †Prototype よりprototype.jsをダウンロードします。2007/09/08時点の最新版は1.5.1みたいです。 インストールはWEBでアクセス可能な適当なパスに配置して、AJAXアプリ中で <script type="text/javascript" src="prototype.js"></script> と外部スクリプトをロードするだけですね。 サンプル †ボタンにイベントリスナを登録するサンプルです。 <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index2</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
<!--
Event.observe(window, 'load', page_loaded, false);
function page_loaded(){
Event.observe("hogeButton", "click", item_clicked, false);
}
function item_clicked(evt) {
var child = Event.element(evt);
alert('The child node with id=' + child.id + ' was clicked');
Event.stop(evt); //avoid another call related to 'parent_node' itself
}
-->
</script>
</head>
<body>
<form>
<p><input type="button" id="hogeButton" value="Click1"/></p>
</form>
</body>
</html>
こんな感じで、ボタンにイベントリスナを登録することができました。 ボタンをクリックしたときになんか処理させるだけだったら普通にやってもできるわけですが、非同期でサーバに問い合わせを行ったり、色々便利な関数が定義されています。 コンテンツ一覧 †関連リンク †
FrontPage |
