ColdFusionでAjax

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

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

```html: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`タグを使う方法。こちらはファイルが２つに分かれます。

```html: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>
```

```html: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のオブジェクトとして扱えます。

```html: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>
```

```html: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>
```