Ask Ben: Accessing Cached CFCs With AJAX via Remote Proxies

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Accessing Cached CFCs With AJAX</title>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
 
		// Initialize the page.
		function Init(){
			var jForm = $( "form:first" );
 
			// Hook up form submission to perform AJAX.
			jForm.submit(
				function(){
					// Add message.
					AddMessage( jForm );
 
					// Cancel default form submission.
					return( false );
				}
				);
		}
 
 
		// I add the message via AJAX.
		function AddMessage( jForm ){
			$.ajax(
				{
					method: "post",
					url: "RemoteMessageService.cfc",
					data: {
						method: "AddMessage",
						message: jForm.find( ":text" ).val()
						},
					dataType: "json",
 
					// AJAX response handler.
					success: function( objResponse ){
						// Check to see if the response was successful.
						if (objResponse.SUCCESS){
 
							// Clear form field.
							jForm.find( ":text" ).val( "" );
 
							// Update message list.
							GetMessages();
 
						} else {
 
							// Alert errors.
							AlertErrors( objResponse.ERRORS );
 
						}
					}
				}
				);
		}
 
 
		// I get the messages via AJAX and populate the OL.
		function GetMessages(){
			$.ajax(
				{
					method: "post",
					url: "RemoteMessageService.cfc",
					data: {
						method: "GetMessages"
						},
					dataType: "json",
 
					// AJAX response handler.
					success: function( objResponse ){
						var jList = $( "#messages" );
 
						// Check to see if the response was successful.
						if (objResponse.SUCCESS){
 
							// Clear the messages.
							jList.empty();
 
							// For each message, add to the list.
							$.each(
								objResponse.DATA,
								function( intI, strMessage ){
									jList.append(
										"<li>" +
										strMessage +
										"</li>"
										);
								}
								);
 
						} else {
 
							// Alert errors.
							AlertErrors( objResponse.ERRORS );
 
						}
					}
				}
				);
		}
 
 
		// I alert the API response errors.
		function AlertErrors( arrErrors ){
			var strErrorMessage = "Please review the following:\n\n";
 
			// Loop over each message to build the error.
			$.each(
				arrErrors,
				function( intI, objError ){
					strErrorMessage += ( objError.ERROR + "\n" );
				}
				);
 
			// Alert the error message.
			alert( strErrorMessage );
		}
 
 
		// When page is ready, initialize it.
		$( Init );
 
	</script>
</head>
<body>
 
	<h1>
		Accessing Cached CFCs With AJAX
	</h1>
 
	<form>
 
		<p>
			<label>
				New Message:
			</label>
			<br />
 
			<input type="text" name="message" size="50" />
			<input type="submit" value="Add Message" />
		</p>
 
	</form>
 
 
	<h2>
		Existing Messages
	</h2>
 
	<ol id="messages" />
 
</body>
</html>

For Cut-and-Paste