2008年09月30日

JavaScriptからColdFusion コンポーネント(CFC)にアクセスする

開発部だより 第31回


こんにちわ!

ボイルしたソーセージにはマスタードではなく、絶対塩派の burnercrew です。
(美味しい塩をご存知の方、コメント待ってますw)


インタラクティブなWebアプリケーションの開発に、当り前のように Ajax (Asynchronous JavaScript and XML)が使用されるようになって久しいですが、ColdFusionにもバージョン8からAjaxに関する機能が追加されています。

そこで今回は、Ajax機能の核となるColdFusion Ajax CFC プロキシの使用して、JavaScriptからColdFusion コンポーネント(以降、CFC)の関数を呼び出す方法を簡単なサンプルを使用してご紹介します。


[サンプルの動作]
{applicationルート}/components/User.cfcに配置されたCFCの関数getNameをsample.cfmに記述されたJavaScriptから呼び出し、文字列"ユーザー名"を取得してJavaScriptの関数alertで表示する。

以下、サンプルのcfmおよびcfcファイルの内容になります。
[sample.cfm]
<!--- プロキシを作成 --->
<cfajaxproxy cfc="components.User" jsclassname="User">
<html>
<head>
<title>JavaScriptからCFCの呼び出し</title>
<script type="text/javascript">
var getUserName = function(){
// プロキシのインスタンスを作成します。
var u = new User();
//非同期呼び出し成功時のコールバック関数設定
u.setCallbackHandler(getUserNameResult);
//非同期呼び出し失敗時のコールバック関数設定
u.setErrorHandler(getUserNameFault);
//プロキシから、User.cfcのgetName関数を呼び出す
u.getName();
}
//非同期呼び出し成功時のコールバック関数
var getUserNameResult = function(result){
alert('成功 :' + result);
}
//非同期呼び出しエラー時のコールバック関数
var getUserNameFault = function(statusCode, statusMsg){
alert('エラー :' + statusCode + ', ' + statusMsg);
}
</script>
</head>
<body>
<script language="javascript">
//javascriptの関数呼び出し
getUserName();
</script>
</body>
</html>

[User.cfc]
<cfcomponent>
<cffunction name="getName" access="remote" returntype="string">
<cfset myResult = "ユーザー名">
<cfreturn myResult>
</cffunction>
</cfcomponent>

上記sample.cfmを実行すると、JavaScriptのアラートで「成功 :ユーザー名」と表示されます。


それでは、処理の流れを見てみましょう。
以下のようになっています。

1.sample.cfmの以下の部分でプロキシの作成
<cfajaxproxy cfc="components.User" jsclassname="User">

2.JavaScript内の関数getUserName内で、
プロキシのインスタンスを作成、コールバック関数を設定し、
User.cfcの関数を呼び出す。
// プロキシのインスタンスを作成します。
var u = new User();
//非同期呼び出し成功時のコールバック関数設定
u.setCallbackHandler(getUserNameResult);
//非同期呼び出し失敗時のコールバック関数設定
u.setErrorHandler(getUserNameFault);
//プロキシから、User.cfcのgetName関数を呼び出す
u.getName();



3.JavaScript内のプロキシのコールバック関数として設定された、関数getUserNameResult内でCFCから取得した文字列をアラート表示


実際にみてみると、CFCにJavaScriptからアクセスするのは思いのほか簡単なことがわかっていただけたと思います。

このサンプルでは単純な文字列を取得し、アラートで表示しただけですが、実際のアプリケーションでは、CFCからJSON形式等でデータを取得し、SpryやjQueryなどのJavaScriptフレームワーク、ライブラリを使用して画面に表示するといった場面が多くなると思います。
また、ColdFusionではタグのバインド式でSpryデータセットを直接使用したり、ColdFusionデータをJSON形式に変換する関数等も用意されています。


ColdFusionの導入で、Ajaxによるインタラクティブなウェブアプリケーションの開発も、ぐっと身近になるかも^-^

それではまたw

posted by ij at 17:55
開発部だより | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック