どうにかなるBLOG

Mootools で Ajax 通信

リッチなエフェクトで有名な Mootools ですが、その他にも色々なモジュールが用意されています。まずは、Remote::Ajax を使って web ページを取得するという簡単な Ajax 通信の使い方メモです

mootools をダウンロード。ダウンロードタブをクリックすると、モジュールのリストが出てきます。ここで必要なモジュールをチェックしてダウンロードするのですが、今回は、Remote::Ajax と Native::Element をチェックしてください（その他必要なモジュールは自動でチェックが付きます）。よく分からない場合は全てをチェックしてダウンロードしてもOKです。

まずは、リクエストの送り方です（基本的に同一ドメインへしかリクエストは送れません）。

<script type='text/javascript' src='js/mootools.js'></script>
<script type="text/javascript">
var url='http://dounikanarublog.com';
var ajax = new Ajax(url,{method:'get'});
ajax.request();
</script>

ライブラリを読み込み、Ajaxクラスのインスタンスを作成して、リクエストを送信しています。

これにサーバーから返事が来た際の処理を付け加えます。

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
var url='http://dounikanarublog.com';
var ajax = new Ajax(url,{method:'get',onComplete:output});
ajax.request();
function output(txt)
{
   alert(txt);
}
</script>

サーバーから返事が来ると、Ajaxの onComplete にセットした関数（この場合はoutput）が呼び出されます。サーバーからのレスポンスは、この関数にテキスト形式で渡されます（この場合は txt ）。もしレスポンスがXML文書だった場合は、第1引数のテキスト形式に加え、第2引数にXMLオブジェクトが渡されます。

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
var url='http://dounikanarublog.com';
var ajax = new Ajax(url,{method:'get',onComplete:output});
ajax.request();
function output(txt,xml)
{
   alert(xml);
}
</script>

その他、関数を直接記述する書き方も。

var url='http://dounikanarublog.com';
var ajax = new Ajax(url,{method:'get',onComplete:function(txt,xml){alert(txt);}});
ajax.request();

もいっちょ、こんな書き方も

var url='http://dounikanarublog.com';
var ajax = new Ajax(url,{method:'get',onComplete:function(){alert(this.response.text);}});
ajax.request();

サーバーからのレスポンスをそのまま出力したい場合、

var ajax = new Ajax(url,{method:'get',update:$('output')});

と書くと、id が 'output' のHTML要素を見つけ出して、中身を書き換えてくれます。

2008年03月02日23時31分31秒
カテゴリ: Mootools