Yahoo! UIライブラリを使ってみよう
javascriptの3大フレームワーク（私が勝手に思ってるだけ）といえば、「prototype.js」「jQuery」「Yahoo! UIライブラリ」です。
今までにprototype.jsやjQueryを紹介してきましたので、今日はYahoo! UIライブラリを紹介します。
まずは以下の本家サイトからYahoo! UIライブラリをダウンロードしてください。
・Yahoo! UI Library
*「Download YUI」ボタンをクリックするとダウンロードできます。
ダウンロードしたファイルを解凍すると、以下のディレクトリ構成になっていると思います。（var.0.12.0）
[yui]
└─[ build]
└─[ docs]
└─[ examples]
[build]の中にjsファイルあります。
[docs]はドキュメント
[examples]はサンプルです。
今回は、Ajax（サーバとの通信）を行いますので、必要なファイルのみ（以下の2つのファイル）を適当なディレクトリに入れてください。
build/yahoo/yahoo.js
build/connection/connection.js
説明しやすいように今回は[home]ディレクトリの中に入れたと仮定します。
[home]ディレクトリの中に「sample.txt」を準備してください。
sample.txtにはUTF-8で「初めてのYahoo! UIライブラリ」など、自由にテキストを入れてください。
次に、index.htmlを作ります。最終的に以下のような構成になります。
[home]
└─ index.html
└─ sample.txt
└─ yahoo.js
└─ connection.js
早速試してみましょう。
index.htmlをテキストエディタで開いて「yahoo.js」と「connection.js」をインクルードさせます。
<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="connection.js"></script>
これで、Yahoo! UIライブラリを使うことができます。
次に、簡単なボタンと表示用のタグを準備します。以下のように「button」と「div」を記述してください。
<input type="button" value="sample.txtを読み込む" onClick="sampleAjax('sample.txt');">
<input type="button" value="no.txtを読み込む（存在しないファイル）" onClick="sampleAjax('no.txt');">
<p id="message"></p>
「sample.txtを読み込む」ボタンをクリックすると、sample.txtのテキストがdivタブの中に挿入されます。
「no.txtを読み込む」ボタンをクリックすると、no.txtは存在しないのでエラーメッセージをdivタブの中に挿入させます。
準備ができたので、Ajaxを作って行きます。
Yahoo! UIライブラリでAjaxを行うには以下のメソッドを使います。
YAHOO.util.Connect.asyncRequest(method, url, callback, arg)
method：GETかPOSTを指定
url：読み込むURLを指定
callback：コールバック
arg：POST指定した場合のパラメータ
実際に作ってみながら説明します。以下のjavascriptを追加してください。
function sampleAjax(url) {
YAHOO.util.Connect.asyncRequest('get', url, callback, null);
}
第一引数には「get」を、第二引数には読み込む「url」を指定します。
第四引数には今回は「get」なので「null」を入れます。
第三引数の「callback」は個別に指定します。以下のスクリプトを追加してください。
function sampleAjax(url) {
var callback = {
success: ajaxReturn,
failure: ajaxError
}YAHOO.util.Connect.asyncRequest('get', url, callback, null);
}
指定URLを読み込んだ後に、「callback」を呼び出します。
「success」は「url」の読込に成功した場合の関数を定義します。
「failure」は「url」読込に失敗した場合の関数を定義します。
最後に成功時と失敗時の関数を記述します。
function sampleAjax(url) {
var callback = {
success: ajaxReturn,
failure: ajaxError
}
function ajaxReturn(ajaxObj) {
document.getElementById('message').innerHTML = ajaxObj.responseText;
}
function ajaxError(ajaxObj) {
document.getElementById('message').innerHTML = ajaxObj.status +':' + ajaxObj.statusText;
}YAHOO.util.Connect.asyncRequest('get', url, callback, null);
}
これで完成しました。実際に動かしてみてください。
そういえば、ajaxReturnとajaxErrorの引数に「request」と言う変数を定義したら、動きませんでした。
「request」変数はYahoo! UIライブラリ専用の予約語みたいなのかなぁ？
上記の例で、「ajaxObj」オブジェクトには以下のようなプロパティがあります。
成功の場合
tId：トランザクションID（呼び出す度に+1されます）
同じユーザーのみが対象なので、ページをリロードしたり別ユーザーがアクセスした場合は0スタートです。
status：HTTPのステータスコード（200とか）
statusText：HTTPのステータスメッセージ（OKとか）
responseText：取得したテキスト
responseXML：取得したテキストをDOM documentオブジェクトとして取得する
argument：callbackで指定したargumentプロパティで定義した引数
allResponseHeaders：全てのHTTPヘッダを取得
失敗の場合
tId：トランザクションID（呼び出す度に+1されます）
同じユーザーのみが対象なので、ページをリロードしたり別ユーザーがアクセスした場合は0スタートです。
status：HTTPのステータスコード（404とか）
statusText：HTTPのステータスメッセージ（Not Foundとか）
argument：callbackで指定したargumentプロパティで定義した引数
実際に使ってみた感想は、他のフレームワークよりもちょっと難しいけど細かいとこまで定義できるのはすばらしいです。（失敗時の処理とか）
他にも沢山の機能があるので、機会があったら勉強してみようかと思ってます。
・関連記事
Yahoo! UIのイベントリスナー（addListener）を使ってみよう
prototype.jsの使い方
jQueryを使ってみよう
HTML_AJAXを使ってみよう
| 固定リンク | コメント (0) | トラックバック (0)
PEAR入門 PHP標準ライブラリを極める！