mootoolsのRequestクラスを使うとXMLHttpRequestが簡単に行えます。
jQueryやprototype.jsもやり方は大体同じです。（クラスの名前からして似てる）
公式サイトのDemoにAjax.Requestのサンプルがいくつかありますが、
送受信だけでは面白くないので、簡単にファイルの読み書きをして掲示板っぽいものを作ってみようー。
▼用意するもの（カッコ内は説明とzipで使ってるサンプルの名前）
- HTMLファイル(index.html)
この記事にコピペ用ソースがあります - PHPファイル(sample.php)
<?php ?>が書いてあればいい - テキストファイル(data.txt)
空ファイル。拡張子はなんでもいい - mootools ver1.2のコアファイル(mootools.js)
圧縮したのでもなんでもいい。moreはいらない
※文字コードは全てUTF-8にすること。
Step-by-Step形式で書いています。（全10ステップで2ページ分割）
Step1. XHTMLの作成
まずindex.htmlのヘッダにスクリプトタグとスタータースクリプトを入れておきます。
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
});
//]]>
</script>
window.addEvent("domready")は、「DOMが読み込み終わったらfunction(){}の内容を実行する」 というメソッドです。
body以下にフォームとログ表示部分を適当に書いて、以下の要素を作ってください。
- idがcommentのテキストエリア
- idがsubmitのボタン
- idがpastlogのブロック要素(DIVなど)
サンプルファイルでは次のようにしました。
index.html
<p id="form"><input type="text" id="comment" size="40" /><button id="submit">Send</button></p> <div id="pastlog"></div>
Form送信はしないのでformタグの有無はどっちでもいい。
valueやnameも動作には必要ないですが、lint先生に怒られるのが気になる場合は入れておいた方がいいかも。
ここでは分かりやすくIDにしていますが、セレクタを使うのもアリです。
CSSのスタイリングはお好みで。
Step2. ボタンイベントとフォームの値の取得
step1で書いたスタータースクリプトに、input#commentの値を取得するソースと、
button#submitを押した時に発生するイベントのソースを追加します。
「ボタン押す→テキストエリアの値を取得する」という流れになるので、
ボタンのinput#submitにaddEvent()でクリックイベントを監視させ、
クリックされたとき実行する関数の中で、input#commentの値を取得するソースを書きます。
index.html
$("submit").addEvent("click",function(e){
e.stop();
var comment = $("comment").value;
});
Element.valueという書き方はjavascriptの基本のものです。（参考）
変数eにはイベントのオブジェクトが入ります。（参考）
関数の中にreturn false;かEvent.stop()がないとイベントが止まらずに伝播してしまうので、e.stop();を先頭に書いておきます。
次のように書くと、テキストエリアに入力した内容がdiv#pastlogに表示され、value値が取得されているのが確認できます。
index.html
$("submit").addEvent("click",function(e){
e.stop();
var comment = $("comment").value;
$("pastlog").set("html",comment);
});
Step3. Requestメソッドを追加
本エントリーの主役、Requestクラスの構文は次の通りです。
var myRequest = new Request([options]);
オプションで重要なものだけ以下に説明を添えます。
- url (文字列: 初期値=null)
リクエスト先のURL。 - method (文字列: 初期値=’post’)
リクエストのHTTPメソッド。’post’か’get’のどちらか。 - data (文字列: 初期値=”)
送信する内容の初期値。データが与えられなかったときに使われます。
イベントはFx等とだいたい同じです。
- request[onRequest()] リクエストを送った時に発生する
- complete[onComplete()] リクエストが完了した時に発生する
- cancel[onCancel()] リクエストがキャンセルされた時
- success[onSuccess(responseText, responseXML)] リクエストが終了して成功に終わった時。
- responseText リクエストから受け取ったテキスト
- responseXML リクエストから受け取ったXML
- failure[onFailure(xhr)] リクエストが失敗したときに発生します(エラーステータスコード)。
xhr – (XMLHttpRequest) transportインスタンス。
button#submitのクリックイベントで、Requestクラスのインスタンスを作成します。
クリックして直ぐ実行したいのでインスタンスに直接send()を付ける。
index.html
window.addEvent('domready', function(){
$("submit").addEvent("click",function(e){
e.stop();
var comment = $("comment").value;
new Request({
url:"sample.php",
method: 'post',
data:{"mode":"post","comment":comment},
onSuccess: function(txt) {
$("pastlog").set('html',txt);
},
onFailure: function() {
$("pastlog").set('html', 'エラーが発生しました');
}
}).send();
});
});
“data”はHash形式で書いてますが、GETの時と同じ書き方(key=valueを&で繋ぐ）でもいいです。
data:"mode=post&comment="+comment,
ボタン押して何も表示されなければOK。
ここまで書けばPHPファイルへ送信出来てます。
ここまでの動作の流れをまとめると次のようになります。
- button#submitをクリックする
- input#commentの値を取得する
- Requestクラスのインスタンスを作成する
- オプションで指定されたURLへデータを送信する
Step4. PHPでPOSTされたデータを返す
とりあえず、Step2と同じように入力された値を表示するようにPHPファイルを編集してみます。
Step3で書いたソースでは、送信するデータが次のようになっていましたが
data:{"mode":"post","comment":comment}
これをPHPで表すと
$_POST["mode"]="POST"; $_POST["comment"]="入力された値";
になります。オプションのメソッドがGETなら$_GETです。
HTMLフォームから送信したときと同じようにPOST変数やGET変数に格納されます。（» スーパーグローバル変数）
なので、sample.phpには次の様に書きます。
<?php
if($_POST["mode"] == "post"){
print $_POST["comment"];
}
?>
printの行だけでもいいんですが、後の事を考えてif文で「modeがpostの時だけ表示する」という処理にしておきます。
returnではなくprint（またはecho）であることに注意してください。
このレスポンス（printの部分）はRequestのonSuccess()イベントの引数に返されるので、index.htmlで以下のように
onSuccess: function(txt) {
$("pastlog").set('html', txt);
}
引数txtをset(“html”)またはset(“text”)でdiv#pastlogにセットすれば、
Step3で表示されなかった送信内容が表示されるようになります。
上記ソースを保存して実行してみてください。Step2と同じ結果になればＯＫ。