Ajaxで特定部分を書き換える

prototype.jsでAjax.Updaterを使う bookmark

prototype.jsというライブラリのAjax.Updaterという機能を使えば、ページの特定部分を簡単に書き換えることが出来ます。
Ajax.Requestという機能で、Ajaxレスポンス取得後に、より細かい処理を行うことも出来ます。

コードを見てみよう bookmark

Ajax.Updaterのコードとしては次のようになっています。

new Ajax.Updater( "container", "/samples/ajax/test.php", { "method": "get", "parameters": "a=b&c=d&e=f", onSuccess: function(request) { // 成功時の処理を記述 // alert('成功しました'); // var json; // eval("json="+request.responseText); }, onComplete: function(request) { // 完了時の処理を記述 // alert('読み込みが完了しました'); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } );

コードの解説 bookmark

上記コードを記述しておくと、id="container" の要素。例えば、<div id="container"></div> のタグの中身が "/samples/ajax/test.php" というURLにアクセスした結果の中身に置き換えられます。

"/samples/ajax/test.php" というURLに使われるパラメータとして、"a=b&c=d&e=f" とし、メソッドはGETで投げています。サーバには、"/samples/ajax/test.php?a=b&c=d&e=f" というリクエストが飛んでいることになります。

そして、通信の「成功時」「完了時」「失敗時」「エラー時」においてそれぞれ、onSuccess, onComplete, onFailure, onException というメソッドを割り当てることができ、エラー時に何か処理をすることが出来ます。

これら関数には、xmlhttprequest形式の引数が渡ります。上記サンプルでは、requestという引数名にしていますが、request.responseText でAjaxでリクエストした結果文字列を取得できます。

取得した結果をevalで評価して、そのままJavaScriptの変数として扱うことも可能です。上記サンプル中の、次の部分がまさにその部分で、サーバが返す値の形式のことをJSON形式といいます。

var json;
eval("json="+request.responseText);

JSON形式とは、具体的に次のようなフォーマットになります。

{"key1":"value1","key2":"value2"}

この形式をevalすることで、次のように変数にアクセスすることが可能です。

json["key1"]

尚、セキュリティ上、Ajaxを使ったやりとりは、同一ドメインでないと行えません。つまり、http://example.com というURLでAjaxを使う場合、http://example.com/ 以下のURLとしかやりとりできないということです。

動作確認はAjax.Updaterのページにて行えます。

次のページ：Ajaxで定期的に特定部分を更新 (JavaScript応用編＆TIPS)