ColdFusionでAjax #JavaScript

CFAJAXIMPORTタグを使う方法と、CFAJAXPROXYタグを使う方法のサンプルを作りました。
最低限の処理しかないので詳しくはCFのリファレンスを見てください。

まずはCFAJAXIMPORTタグを使う方法から。

ajax_test1.cfm

<CFPROCESSINGDIRECTIVE pageencoding="utf-8" />
<CFSETTING enablecfoutputonly="true" showdebugoutput="false">

<!--- アクション --->
<CFIF cgi.request_method eq "POST">
    <CFOUTPUT>#form.txtInput#さん、こんにちは。</CFOUTPUT>
    <CFABORT>
</CFIF>

<!--- 画面出力 --->
<CFOUTPUT>
<CFAJAXIMPORT>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Ajaxサンプルその１</title>
</head>
<body>
    <h3>Ajaxサンプルその１</h3>
    <form name="frmSample">
        <input type="text" name="txtInput" value="" placeholder="お名前を入力してください">
        <input type="button" name="btnSubmit" value="送信" onclick="ajaxSubmit()">
    </form>
    <p><span id="spanOutput"></span></p>
</body>
</html>
<script>
    function ajaxSubmit(){
        ColdFusion.Ajax.submitForm(
            'frmSample',
            'ajax_test1.cfm',
            function(result){
                spanOutput.innerHTML = result;
            },
            function(statusCode, statusMsg){
                alert('[エラー]\n' + statusCode + ': ' + statusMsg);
            }
        );
    }
</script>
</CFOUTPUT>

次に、CFAJAXPROXYタグを使う方法。こちらはファイルが２つに分かれます。

ajax_test2.cfm

<CFPROCESSINGDIRECTIVE pageencoding="utf-8" />
<CFSETTING enablecfoutputonly="true" showdebugoutput="false">

<!--- 画面出力 --->
<CFOUTPUT>
<CFAJAXPROXY cfc="ajax_test2" jsclassname="ajaxCFC">
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Ajaxサンプルその２</title>
</head>
<body>
    <h3>Ajaxサンプルその２</h3>
    <form name="frmSample">
        <input type="text" name="txtInput" value="" placeholder="お名前を入力してください">
        <input type="button" name="btnSubmit" value="送信" onclick="ajaxSubmit()">
    </form>
    <p><span id="spanOutput"></span></p>
</body>
</html>
<script>
    function ajaxSubmit(){
        var input_value = document.frmSample.txtInput.value;
        var o = new ajaxCFC();
        o.setCallbackHandler(function(result){
            spanOutput.innerHTML = result;
        });
        o.setErrorHandler(function(statusCode, statusMsg){
            alert('[エラー]\n' + statusCode + ': ' + statusMsg);
        });
        o.greeting(input_value);
    }
</script>
</CFOUTPUT>

ajax_test2.cfc

<CFCOMPONENT>
<CFPROCESSINGDIRECTIVE pageencoding="utf-8" />

<CFFUNCTION name="greeting" access="remote" returntype="string">
    <CFARGUMENT name="name" required="yes" type="string">
    <CFRETURN "#name#さん、こんにちは。">
</CFFUNCTION>

</CFCOMPONENT>

前者は１つのファイルで済みますが、必ず送信用のフォームが必要になります。後者はJavaScriptの関数として呼び出せるのでフォームは不要ですが、CFCコンポーネントが必要になります。

上記のサンプルでは「○○さん、こんにちは。」という文字列を返していますが、もちろんjsonも返せます。後者のCFAJAXPROXYタグを使う方法では、CFの構造体をreturnすると、受け取った側はそのままJavaScriptのオブジェクトとして扱えます。

ajax_test3.cfm

<CFPROCESSINGDIRECTIVE pageencoding="utf-8" />
<CFSETTING enablecfoutputonly="true" showdebugoutput="false">

<!--- 画面出力 --->
<CFOUTPUT>
<CFAJAXPROXY cfc="ajax_test3" jsclassname="ajaxCFC">
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Ajaxサンプルその３</title>
</head>
<body>
    <h3>Ajaxサンプルその３</h3>
    <form name="frmSample">
        <input type="text" name="txtInput" value="" placeholder="お名前を入力してください">
        <input type="button" name="btnSubmit" value="送信" onclick="ajaxSubmit()">
    </form>
    <p><span id="spanOutput"></span></p>
</body>
</html>
<script>
    function ajaxSubmit(){
        var input_value = document.frmSample.txtInput.value;
        var o = new ajaxCFC();
        o.setCallbackHandler(function(result){
            spanOutput.innerHTML = result.GREETING; // CFにより大文字に変換されてしまうので注意
        });
        o.setErrorHandler(function(statusCode, statusMsg){
            alert('[エラー]\n' + statusCode + ': ' + statusMsg);
        });
        o.greeting(input_value);
    }
</script>
</CFOUTPUT>

ajax_test3.cfc

<CFCOMPONENT>
<CFPROCESSINGDIRECTIVE pageencoding="utf-8" />

<CFFUNCTION name="greeting" access="remote" returntype="struct">
    <CFARGUMENT name="name" required="yes" type="string">
    <CFSET stTemp = structNew()>
    <CFSET stTemp.name = name>
    <CFSET stTemp.greeting = "#name#さん、こんにちは。">
    <CFRETURN stTemp>
</CFFUNCTION>

</CFCOMPONENT>