« ココログ記事検索の仕組み Part 3 | トップページ | prototype.js その他の便利機能 »

2006年6月28日 (水)

prototype.js で Ajax

prototype.jsはJavaScriptのライブラリで、色々と便利な機能を提供していますが、 やはり、このライブラリのAjaxの機能が目当てという方が多いんじゃないでしょうか。
実際、XMLHttpRequest関係のブラウザ毎の差異を吸収してくれて、とても簡単に利用できます。

以下のコードはサーバーからデータを受信するものですが、たったこれだけでOKです。
function showData(res)
{
    alert(res.responseText);
}

function getData()
{
    var url = "test.txt";
    var options = {method:"GET", onComplete:showData};
    new Ajax.Request(url, options);
}


アクセスできるURLは、セキュリティの制限により同一のドメインのみに限られています。
optionsの指定は、JSONフォーマットとか言われたりしますが、キーと値のペアをカンマで区切って指定します。
他に指定できるoptionとしては、リクエストする際に渡すパラメータを指定するparametersや、通信の同期・非同期を指定するasynchronousなどがあります。
asynchronousのデフォルト値はtrueになっており、何も指定しなければ非同期通信となります。
onCompleteでは、通信が完了した際に呼ばれる関数を指定しています。
この関数には引数としてXMLHttpRequestオブジェクトが渡されますので、例のようにresponseTextで値を取り出します。
new Ajax.Request(url, options)の部分は、私は最初は少し違和感を感じましたが、この1行でリクエストを送信します。

この他、HTMLの要素の中身のみを更新する目的で利用するAjax.Updaterというクラスもあります。
function updateData()
{
    var url = "test.html";
    var options = {method:"GET"};
    new Ajax.Updater("ElementId", url, options);
}


ほとんどAjax.Requestの時と同じです。
Ajax.Updaterの最初の引数には、中身を更新する要素のIDまたはインスタンスそのものを指定します。
test.htmlには、
<span style="color:red;"><b>Hello Ajax!</b></span>
と書いてあり、通信が完了すると自動的に受け取った値を要素に挿入するといった動作になります。
したがって、サーバーが返す値はHTMLタグである必要があります。
上の実行例ではbuttonタグのIDを指定していますので、実行するとボタンのキャプションが変わります。

|

« ココログ記事検索の仕組み Part 3 | トップページ | prototype.js その他の便利機能 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/10707162

この記事へのトラックバック一覧です: prototype.js で Ajax:

« ココログ記事検索の仕組み Part 3 | トップページ | prototype.js その他の便利機能 »