prototype.js
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
[[HOME>http://www.trance.co.jp/]] > [[技術情報]] > [[Ajax...
* prototype.js [#vdbd790e]
#contents
** prototype.jsとは？ [#y0640337]
公式サイトより(http://www.prototypejs.org/)
> Prototype is a JavaScript Framework that aims to ease d...
「Prototypeとは、動的Webアプリケーションを簡単に開発する...
中身は、Ajax用クラス、DOM操作等のユーティリティ関数、基本...
感覚はフレームワークと言うようライブラリに近い。
** ダウンロード [#d7004774]
http://www.prototypejs.org/download
から最新版をダウンロードする。
2007/04/27現在 version―1.5.0
** サンプル [#ne39b306]
*** Ajax - new Ajax.Request()[#nb70d0b9]
もっとも簡単なAjaxのサンプルを作成する。
非同期通信を行うには、Ajax.Requestクラスを使用する。
[[サンプルの実行 サンプルファイルダウンロードもこちら>ht...
- ''ソース''
»'''HTML - hello.html'''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"...
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>prototype.js Ajax - 株式会社トランスアーツ</title>
<script language="JavaScript" type="text/javascript" src...
<script language="JavaScript" type="text/javascript" src...
</head>
<body>
<h1>prototype.js</h1>
<p onclick="hello()">ここをクリックすると</p>
<p id="message">ここにメッセージが表示されます</p>
<hr>
<h2>サンプルコードファイルダウンロード</h2>
<ul>
<li><a href="./hello.html">HTML - hello.html</a></li>
<li><a href="./hello.js">JavaScript - hello.js</a></li>
<li><a href="./hello.php">サーバ側PHP - hello.php</a></...
</ul>
</body>
</html>
&br;»'''JavaScript - hello.js'''
function hello() {
new Ajax.Request(
'hello.php',
{
method:'get',
onSuccess:function(req){
document.getElementById('message').innerHTML = req.re...
}
});
}
&br;»'''サーバサイド(PHP) - hello.php'''
<?php
header( "Content-Type: text/html; charset=EUC-JP");
// クライアントに返す値
echo "Hello Ajax!!";
?>
- ''解説''
&br;»'''JavaScript - hello.js'''
new Ajax.Request(
'hello.php',
{
method:'get',
onSuccess:function(req){
$("message").innerHTML = req.responseText;
}
});
::Ajax.Requestオブジェクトを生成する.|
引数
--- 第1引数：リクエスト先のURL
--- 第2引数：オプション
|~オプション名|~説明|
|method|通信方式(GET送信：get、POST送信：post)|
|onSuccess|レスポンスが受信が完了し、HTTPステータスコード...
~その他指定できるオプションの一部
|~オプション名|~説明|
|asynchronous|非同期通信か(true：Ajax、false：Sjax)|
|postBody|POST送信時のボディ部(パラメータ変数=値&パラメー...
|onFailure|レスポンスが受信が完了し、HTTPステータスコード...
|onException|XMLHttpRequestオブジェクト内でエラーが発生し...
|onXYZ|「XYZ」にHTTPステータスコード(正常終了:200,ファイ...
*** Ajax - new Ajax.Request() パラメータ送信 [#d6f6a6f9]
上記のサンプルでパラメータ付き送信するサンプルを作成する。
[[サンプルの実行 サンプルファイルダウンロードもこちら>ht...
- ''ソース''
»'''HTML - hello.html'''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"...
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>もっともシンプルなAjax通信 - 株式会社トランスアー...
<script language="JavaScript" type="text/javascript" src...
<script language="JavaScript" type="text/javascript" src...
</head>
<body>
<h1>prototype.js - パラメータ送信</h1>
<p>言語を選択すると</p>
<form name="helloForm">
<input type="radio" name="lang" value="ja" onclick="hel...
<input type="radio" name="lang" value="en" onclick="hel...
</form>
<p id="message">ここにメッセージが表示されます</p>
<hr>
<h2>サンプルコードファイルダウンロード</h2>
<ul>
<li><a href="./hello.html">HTML - hello.html</a></li>
<li><a href="./hello.js">JavaScript - hello.js</a></li>
<li><a href="./hello.php">サーバ側PHP - hello.php</a></...
</ul>
</body>
</html>
&br;»'''JavaScript - hello.js'''
function hello() {
var lang = getRadioValue(document.helloForm.lang);
var reqParam = 'lang=' + lang;
new Ajax.Request(
'hello.php',
{
method:'get',
parameters:reqParam,
onSuccess:function(req){
document.getElementById('message').innerHTML = req.re...
}
});
}
/**
* 選択されているラジオボタンの値を取得する.
* @param {Object} radioButton
*/
function getRadioValue(radioButton) {
var radioNum = radioButton.length;
for (var i = 0; i < radioNum; i++) {
if (radioButton[i].checked) {
return radioButton[i].value;
}
}
return "";
}
&br;»'''サーバサイド(PHP) - hello.php'''
<?php
$lang = $_GET['lang'];
$message = null;
if ("ja" == $lang) {
$message = "こんにちは、Ajax";
} else if ("en" == $lang){
$message = "Hello Ajax!!";
} else {
$message = "言語を選択してください";
}
header( "Content-Type: text/html; charset=EUC-JP");
echo $message;
?>
- ''解説''
&br;»'''JavaScript - hello.js'''
new Ajax.Request(
'hello.php',
{
method:'get',
parameters:reqParam,
onSuccess:function(req){
document.getElementById('message').innerHTML = req.re...
}
});
Ajax.Requestクラスのコンストラクタのオプション指定の中で...
*** prototype.jsの便利関数を使ってみる - $() [#c43875de]
:$()|
オブジェクトの値を取得する(document.getElementById()のシ...
$()の引数にid名を渡すことでオブジェクトを取得することがで...
[[サンプルの実行 サンプルファイルダウンロードもこちら>ht...
- ''ソース''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"...
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>prototype.js Ajax - 株式会社トランスアーツ</title>
<script language="JavaScript" type="text/javascript" src...
<script>
function func1 () {
var message = $('message').innerHTML;
alert(message);
}
</script>
</head>
<body>
<h1>便利な関数</h1>
<h2>$()</h2>
<p onclick="func1()">ここをクリックすると</p>
<p id="message">ここに書かれている文字がメッセージウィン...
<hr>
<h2>サンプルコードファイルダウンロード</h2>
<ul>
<li><a href="./function1.html">HTML&JavaScript - functi...
</ul>
</body>
</html>
*** prototype.jsの便利関数を使ってみる - $F() [#vda0e9a0]
:$F()|
フォームフィールドの値を取得する
''取得可能な入力フォーム''
'''■<input> - value属性値を取得 [type属性値]'''
-- button：ボタン
-- checkbox：チェックボックス
--- チェック有り：value値
--- チェック無し：null
-- file:ファイル選択フィールド
-- hidden：不可視フィールド
-- image：画像
-- password：パスワードフィールド
-- radio：ラジオボタン
--- チェック有り：value値
--- チェック無し：null
-- reset：リセットボタン
-- submit：サブミットボタン
-- text:テキストフィールド~
'''■タグで囲まれた値を取得'''
-- textarea：テキストエリア
-- select option：プルダウンメニュー
[[サンプルの実行 サンプルファイルダウンロードもこちら>ht...
- ''ソース''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"...
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>prototype.js Ajax - 株式会社トランスアーツ</title>
<script language="JavaScript" type="text/javascript" src...
<script>
function func21 () {
var text = $F('text');
alert(text);
}
function func22 () {
var text = $F('test');
alert(text);
}
</script>
</head>
<body>
<h1>便利な関数</h1>
<h2>$F()</h2>
<h3>テキストフィールド</h3>
<p onclick="func21()">ここをクリックすると</p>
<p id="message">テキストボックスに書かれている文字がメッ...
<form>
<input id="text" type="text" value="test"/>
</form>
<br />
<br />
<h3>プルダウンメニュー</h3>
<p onclick="func22()">ここをクリックすると</p>
<p id="message">テキストボックスに書かれている文字がメッ...
<form>
<select id="test">
<option>項目A</option>
<option>項目B</option>
<option>項目C</option>
<option>項目D</option>
</select>
</form>
<hr>
<h2>サンプルコードファイルダウンロード</h2>
<ul>
<li><a href="./function2.html">HTML&JavaScript - functi...
</ul>
</body>
</html>
終了行:
[[HOME>http://www.trance.co.jp/]] > [[技術情報]] > [[Ajax...
* prototype.js [#vdbd790e]
#contents
** prototype.jsとは？ [#y0640337]
公式サイトより(http://www.prototypejs.org/)
> Prototype is a JavaScript Framework that aims to ease d...
「Prototypeとは、動的Webアプリケーションを簡単に開発する...
中身は、Ajax用クラス、DOM操作等のユーティリティ関数、基本...
感覚はフレームワークと言うようライブラリに近い。
** ダウンロード [#d7004774]
http://www.prototypejs.org/download
から最新版をダウンロードする。
2007/04/27現在 version―1.5.0
** サンプル [#ne39b306]
*** Ajax - new Ajax.Request()[#nb70d0b9]
もっとも簡単なAjaxのサンプルを作成する。
非同期通信を行うには、Ajax.Requestクラスを使用する。
[[サンプルの実行 サンプルファイルダウンロードもこちら>ht...
- ''ソース''
»'''HTML - hello.html'''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"...
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>prototype.js Ajax - 株式会社トランスアーツ</title>
<script language="JavaScript" type="text/javascript" src...
<script language="JavaScript" type="text/javascript" src...
</head>
<body>
<h1>prototype.js</h1>
<p onclick="hello()">ここをクリックすると</p>
<p id="message">ここにメッセージが表示されます</p>
<hr>
<h2>サンプルコードファイルダウンロード</h2>
<ul>
<li><a href="./hello.html">HTML - hello.html</a></li>
<li><a href="./hello.js">JavaScript - hello.js</a></li>
<li><a href="./hello.php">サーバ側PHP - hello.php</a></...
</ul>
</body>
</html>
&br;»'''JavaScript - hello.js'''
function hello() {
new Ajax.Request(
'hello.php',
{
method:'get',
onSuccess:function(req){
document.getElementById('message').innerHTML = req.re...
}
});
}
&br;»'''サーバサイド(PHP) - hello.php'''
<?php
header( "Content-Type: text/html; charset=EUC-JP");
// クライアントに返す値
echo "Hello Ajax!!";
?>
- ''解説''
&br;»'''JavaScript - hello.js'''
new Ajax.Request(
'hello.php',
{
method:'get',
onSuccess:function(req){
$("message").innerHTML = req.responseText;
}
});
::Ajax.Requestオブジェクトを生成する.|
引数
--- 第1引数：リクエスト先のURL
--- 第2引数：オプション
|~オプション名|~説明|
|method|通信方式(GET送信：get、POST送信：post)|
|onSuccess|レスポンスが受信が完了し、HTTPステータスコード...
~その他指定できるオプションの一部
|~オプション名|~説明|
|asynchronous|非同期通信か(true：Ajax、false：Sjax)|
|postBody|POST送信時のボディ部(パラメータ変数=値&パラメー...
|onFailure|レスポンスが受信が完了し、HTTPステータスコード...
|onException|XMLHttpRequestオブジェクト内でエラーが発生し...
|onXYZ|「XYZ」にHTTPステータスコード(正常終了:200,ファイ...
*** Ajax - new Ajax.Request() パラメータ送信 [#d6f6a6f9]
上記のサンプルでパラメータ付き送信するサンプルを作成する。
[[サンプルの実行 サンプルファイルダウンロードもこちら>ht...
- ''ソース''
»'''HTML - hello.html'''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"...
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>もっともシンプルなAjax通信 - 株式会社トランスアー...
<script language="JavaScript" type="text/javascript" src...
<script language="JavaScript" type="text/javascript" src...
</head>
<body>
<h1>prototype.js - パラメータ送信</h1>
<p>言語を選択すると</p>
<form name="helloForm">
<input type="radio" name="lang" value="ja" onclick="hel...
<input type="radio" name="lang" value="en" onclick="hel...
</form>
<p id="message">ここにメッセージが表示されます</p>
<hr>
<h2>サンプルコードファイルダウンロード</h2>
<ul>
<li><a href="./hello.html">HTML - hello.html</a></li>
<li><a href="./hello.js">JavaScript - hello.js</a></li>
<li><a href="./hello.php">サーバ側PHP - hello.php</a></...
</ul>
</body>
</html>
&br;»'''JavaScript - hello.js'''
function hello() {
var lang = getRadioValue(document.helloForm.lang);
var reqParam = 'lang=' + lang;
new Ajax.Request(
'hello.php',
{
method:'get',
parameters:reqParam,
onSuccess:function(req){
document.getElementById('message').innerHTML = req.re...
}
});
}
/**
* 選択されているラジオボタンの値を取得する.
* @param {Object} radioButton
*/
function getRadioValue(radioButton) {
var radioNum = radioButton.length;
for (var i = 0; i < radioNum; i++) {
if (radioButton[i].checked) {
return radioButton[i].value;
}
}
return "";
}
&br;»'''サーバサイド(PHP) - hello.php'''
<?php
$lang = $_GET['lang'];
$message = null;
if ("ja" == $lang) {
$message = "こんにちは、Ajax";
} else if ("en" == $lang){
$message = "Hello Ajax!!";
} else {
$message = "言語を選択してください";
}
header( "Content-Type: text/html; charset=EUC-JP");
echo $message;
?>
- ''解説''
&br;»'''JavaScript - hello.js'''
new Ajax.Request(
'hello.php',
{
method:'get',
parameters:reqParam,
onSuccess:function(req){
document.getElementById('message').innerHTML = req.re...
}
});
Ajax.Requestクラスのコンストラクタのオプション指定の中で...
*** prototype.jsの便利関数を使ってみる - $() [#c43875de]
:$()|
オブジェクトの値を取得する(document.getElementById()のシ...
$()の引数にid名を渡すことでオブジェクトを取得することがで...
[[サンプルの実行 サンプルファイルダウンロードもこちら>ht...
- ''ソース''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"...
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>prototype.js Ajax - 株式会社トランスアーツ</title>
<script language="JavaScript" type="text/javascript" src...
<script>
function func1 () {
var message = $('message').innerHTML;
alert(message);
}
</script>
</head>
<body>
<h1>便利な関数</h1>
<h2>$()</h2>
<p onclick="func1()">ここをクリックすると</p>
<p id="message">ここに書かれている文字がメッセージウィン...
<hr>
<h2>サンプルコードファイルダウンロード</h2>
<ul>
<li><a href="./function1.html">HTML&JavaScript - functi...
</ul>
</body>
</html>
*** prototype.jsの便利関数を使ってみる - $F() [#vda0e9a0]
:$F()|
フォームフィールドの値を取得する
''取得可能な入力フォーム''
'''■<input> - value属性値を取得 [type属性値]'''
-- button：ボタン
-- checkbox：チェックボックス
--- チェック有り：value値
--- チェック無し：null
-- file:ファイル選択フィールド
-- hidden：不可視フィールド
-- image：画像
-- password：パスワードフィールド
-- radio：ラジオボタン
--- チェック有り：value値
--- チェック無し：null
-- reset：リセットボタン
-- submit：サブミットボタン
-- text:テキストフィールド~
'''■タグで囲まれた値を取得'''
-- textarea：テキストエリア
-- select option：プルダウンメニュー
[[サンプルの実行 サンプルファイルダウンロードもこちら>ht...
- ''ソース''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"...
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>prototype.js Ajax - 株式会社トランスアーツ</title>
<script language="JavaScript" type="text/javascript" src...
<script>
function func21 () {
var text = $F('text');
alert(text);
}
function func22 () {
var text = $F('test');
alert(text);
}
</script>
</head>
<body>
<h1>便利な関数</h1>
<h2>$F()</h2>
<h3>テキストフィールド</h3>
<p onclick="func21()">ここをクリックすると</p>
<p id="message">テキストボックスに書かれている文字がメッ...
<form>
<input id="text" type="text" value="test"/>
</form>
<br />
<br />
<h3>プルダウンメニュー</h3>
<p onclick="func22()">ここをクリックすると</p>
<p id="message">テキストボックスに書かれている文字がメッ...
<form>
<select id="test">
<option>項目A</option>
<option>項目B</option>
<option>項目C</option>
<option>項目D</option>
</select>
</form>
<hr>
<h2>サンプルコードファイルダウンロード</h2>
<ul>
<li><a href="./function2.html">HTML&JavaScript - functi...
</ul>
</body>
</html>
ページ名:
![[PukiWiki]](image/trancelogo.png "[PukiWiki]"){kind=small}
