prototype.jsを使ってみる 1

web2.0やweb標準なんかの流れでAjaxがはやってますね。
そこで中期(不定期)連載として『prototype.jsを使ってみる』という試みをしてみます。

たんにprototype.jsの勉強をするだけなんだけどそれを公開するというすごく安易な企画。

prototype.jsとは

prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。
PerlのMVCフレームワーク CatalystやRuby のフレームワークRuby on RailsがAjax サポートにこのライブラリーを使用するなどしており、高い汎用性や操作性により業界の標準ライブラリになりそうな感じがする将来有望なライブラリです。

prototype.jsは、オフィシャルサイトから無料で配布されています。

prototype.jsを設置する

オフィシャルサイトからダウンロードしてきた『prototype-1.4.0.tar.gz』を解凍して、その中の『dist』ディレクトリー内のprototype.jsファイルをサーバーにアップします。
そして、prototype.jsのを使用するファイルのhead要素内に
<script src="(アップしたprototype.jsまでのパス)prototype.js" type="text/javascript"></script>と記述するだけでprototype.jsを使用する事ができます。

prototype.jsを使ってみる

とりあえずAjaxの基礎であるサーバー内のテキストファイルの内容を取得してページ内に記述してみる。
サンプルスクリプトはRecentAjaxさんの記事を参考にしてみる。

body要素内に以下の内容を記述
<input type="button" value="メッセージを表示する" onclick="new Ajax.Updater('display','sample01.txt',{method: 'get'});" />
<p id="display">！この内容が書き換わります！</p>

またサーバー内に
message.txtの内容が表示されました！と記述されたsample01.txtファイルを設置します

※文字コードはともにUTF-8(BOM付き)で保存する必要があります。
秀丸の場合は保存時に文字コードをUTFにしBOM付きのチェックボックスにチェックを入れます。
DreamWeaver8だと修正のページプロパティからこの形式で保存する事ができます。

これでサーバーにアップすればボタンを押した際に『この内容が書き換わります！』が『message.txtの内容が表示されました！』との記述に変更されます。
sample

このスクリプトはAjax.Updater クラスを使用しおり以下のパラメータを使用してファイルの内容を取得できます。
1つ目は書き換えるHTMLエレメントのIDです。
2つ目は内容を取得するURL
3つ目はオプションで、ここではGETメソッドを利用することを指定してます。

こんな感じで(不)定期的にprototype.jsの使い方を調べながら書いていきます。

関連エントリー

一番簡単な画像置換の方法-imageReplace.js-
アルファ画像を扱うalphafilter.jsライブラリ
prototype.jsを使ってみる 3-getElementById()の省略
prototype.jsを使ってみる 2-Event.observe
AjaxやJavaScriptのライブラリー

スポンサードリンク

«IE7用のCSSハック | メイン | グローバル・タグ・アトリビュートでURLエンコードする»