prototype.js
prototype.js 日本語マニュアル
■prototype.js
prototype.jsはJavaScriptのライブラリで、Ajaxを簡単に実現するための機能が用意されています。
ライブラリ
http://prototype.conio.net/
[Download the latest version]というリンクからファイルをダウンロードし、解凍します。prototype.jsは、distディレクトリ下にあります。
prototype.jsを使うには、SCRIPT要素でファイル読み込みを指示します。
<script type="text/javascript" src="prototype.js"></script>
srcには、prototype.jsを設置してる場所を指定してください。例では、HTMLと同じディレクトリにあると想定しています。
■簡単なAjaxを作成
「ボタンをクリックしたら、Ajaxで別のファイルの内容を取りにいって、HTMLの一部をそれに置き換える」
というものを作ります。
これを「test01.html」などとして保存します。
Ajax.Updaterの2つ目の引数で指定したファイル名「test01.dat」というファイルを作成し、下記のような文章を記述します。
Ajaxによって読み込まれたメッセージです。
test01.html、test01.datともに漢字コードUTF-8にしておいてください。prototype.jsを同じディレクトリにいれます。
test.htmlを開いて、ボタンをクリックしてみるとテキストの内容が変化するハズです。
Ajaxのほとんどの処理は、ボタンのonclickにつけられた
new Ajax.Updater('blk','mess.html',{method: 'get'});
これがやってます。Ajax.Updaterは「Ajaxで別のURLの内容を取りにいって、指定されたHTMLの部分をそれに置き換える」という機能です。
3つのパラメータを渡します。
1つ目は書き換えるHTMLエレメントのIDです。ここでは「id="blk"」が指定されているpタグの部分になります。
2つ目は内容を取得するURL
3つ目はオプションで、ここではGETメソッドを利用することを指定してます
■prototype.js
prototype.jsはJavaScriptのライブラリで、Ajaxを簡単に実現するための機能が用意されています。
ライブラリ
http://prototype.conio.net/
[Download the latest version]というリンクからファイルをダウンロードし、解凍します。prototype.jsは、distディレクトリ下にあります。
prototype.jsを使うには、SCRIPT要素でファイル読み込みを指示します。
<script type="text/javascript" src="prototype.js"></script>
srcには、prototype.jsを設置してる場所を指定してください。例では、HTMLと同じディレクトリにあると想定しています。
■簡単なAjaxを作成
「ボタンをクリックしたら、Ajaxで別のファイルの内容を取りにいって、HTMLの一部をそれに置き換える」
というものを作ります。
<!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" />
<script src="prototype.js" type="text/javascript"></script>
</head>
<body>
<p id="blk">ここがターゲット</p>
<input type="button" value="ボタン" onclick="new Ajax.Updater('blk','test01.dat',{method: 'get'});"/>
</body>
</html>
これを「test01.html」などとして保存します。
Ajax.Updaterの2つ目の引数で指定したファイル名「test01.dat」というファイルを作成し、下記のような文章を記述します。
Ajaxによって読み込まれたメッセージです。
test01.html、test01.datともに漢字コードUTF-8にしておいてください。prototype.jsを同じディレクトリにいれます。
test.htmlを開いて、ボタンをクリックしてみるとテキストの内容が変化するハズです。
Ajaxのほとんどの処理は、ボタンのonclickにつけられた
new Ajax.Updater('blk','mess.html',{method: 'get'});
これがやってます。Ajax.Updaterは「Ajaxで別のURLの内容を取りにいって、指定されたHTMLの部分をそれに置き換える」という機能です。
3つのパラメータを渡します。
1つ目は書き換えるHTMLエレメントのIDです。ここでは「id="blk"」が指定されているpタグの部分になります。
2つ目は内容を取得するURL
3つ目はオプションで、ここではGETメソッドを利用することを指定してます