【JavaScript】 MooTools：Ajaxを使ってみる
2007.08.31 Author: たわばがに
今回は MooTools のAjaxオブジェクトに絞ったお話をしたいと思います。
MooTools は、軽量・高速がウリのJavaScriptライブラリです。
確かに、フルセットでダウンロードしても、180kbyte程度(V.1.11)しかないので、
用途限定で機能を絞り込めば、かなりスリム化できそうです。
さて、それでは簡単なサンプルを作成してみましょう。
MooTools は、軽量・高速がウリのJavaScriptライブラリです。
確かに、フルセットでダウンロードしても、180kbyte程度(V.1.11)しかないので、
用途限定で機能を絞り込めば、かなりスリム化できそうです。
さて、それでは簡単なサンプルを作成してみましょう。
HTML、サーバサイドのPHPスクリプト、共に文字コードはUTF8で記述します。
(SJIS等で記述すると、実際に動作させた時にJavaScriptのエラーが出ます)
まずHTMLは以下の通り。
（全て同じディレクトリ内に設置）
PHPスクリプトを見れば、何を行っているのかおおよそ見当はつくかと思います。
HTML側の合言葉に「tawaba」が入力されていれば、送信ボタンを押した際に、
「正解！」という文字列が id="text1" の div" タグ内に表示されます。
今回の肝としては、HTML側の以下の部分。
'data.php'がデータを送受信するURL、method: はメソッドの指定、
data: はGET・POSTデータの指定、 update: はデータ送受信完了時に挿入する受信データの指定です。
$(要素)という記述を行うと、要素で指定されたidを持つタグにデータが挿入(書き換え)されます。
記述方法をまとめると、↓のようになります。
とりあえず、ここまで理解できれば、簡単なAjaxアプリは作れそうですね。
以上、偏った MooTools ネタでした。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
(SJIS等で記述すると、実際に動作させた時にJavaScriptのエラーが出ます)
まずHTMLは以下の通り。
<script type="text/javascript">
<!--
<html>
<head>
<script type="text/javascript" src="mootools_v1_11.js"></script>
<script type="text/javascript">
<!--
function sendData() {
var myAjax = new Ajax('data.php',
{
method:'get',
data: 'data=' + document.getElementById("a1").value,
update: $('text1')
}
);
myAjax.request();
}
//-->
</script>
</head>
<body>
合言葉：<input type="text" name="a1" id="a1">
<input type="button" value="送信" onClick="sendData()">
<br>
<div id="text1"></div>
</body>
</html>
続いてサーバサイドのPHPスクリプト。
<?php
if ($_GET['data'] == "tawaba") {
echo "正解！";
} else {
echo "不正解！";
}
この2つのファイルと、Ajaxオブジェクトを含んだ MooTools の本体をサーバに設置します。（全て同じディレクトリ内に設置）
PHPスクリプトを見れば、何を行っているのかおおよそ見当はつくかと思います。
HTML側の合言葉に「tawaba」が入力されていれば、送信ボタンを押した際に、
「正解！」という文字列が id="text1" の div" タグ内に表示されます。
今回の肝としては、HTML側の以下の部分。
var myAjax = new Ajax('data.php',
{
method:'get',
data: 'data=' + document.getElementById("a1").value,
update: $('text1')
}
);
myAjax.request();
この部分でサーバサイドスクリプトとの通信を行っています。'data.php'がデータを送受信するURL、method: はメソッドの指定、
data: はGET・POSTデータの指定、 update: はデータ送受信完了時に挿入する受信データの指定です。
$(要素)という記述を行うと、要素で指定されたidを持つタグにデータが挿入(書き換え)されます。
記述方法をまとめると、↓のようになります。
var myAjax = new Ajax(URL指定,
{
method:メソッド(GET・POST)指定,
data: GET・POSTデータ指定,
update: $(要素id指定)
}
);
myAjax.request();
とりあえず、ここまで理解できれば、簡単なAjaxアプリは作れそうですね。
以上、偏った MooTools ネタでした。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
