demo.cfm

## demo.cfm
<!--- Param our hashable string. --->
<cfparam name="form.hashable" type="string" default="" />


<!--- Check to see if we have a hashable string. --->
<cfif len( form.hashable )>


	<!--- Create an MD5 hash of the string. --->
	<cfset hashedString = hash( form.hashable, "MD5" ) />

	<!--- Return the serialized string for the API. --->
	<cfcontent
		type="text/x-application-json"
		variable="#toBinary( toBase64( serializeJSON( hashedString ) ) )#"
		/>


</cfif>


<!--- ----------------------------------------------------- --->
<!--- ----------------------------------------------------- --->
<!--- ----------------------------------------------------- --->
<!--- ----------------------------------------------------- --->


<!--- Reset the content buffer for the main page. --->
<cfcontent type="text/html; charset=utf-8" />

<!DOCTYPE html>
<html>
<head>
	<title>The ColdFusion Hash-O-Matic</title>

	<style type="text/css">

		input {
			font-size: 18px ;
			width: 450px ;
			}

	</style>
</head>
<body>

	<h1>
		The ColdFusion Hash-O-Matic
	</h1>

	<form>

		<p>
			Your String:<br />
			<input type="text" name="hashable" />
		</p>

		<p>
			Your MD5 Hash:<br />
			<input type="text" name="md5Hash" readonly="readonly" />
		</p>

	</form>


	<!--- Load the scripts for this demo. --->
	<script
		type="text/javascript"
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
	</script>
	<script type="text/javascript">


		// Cache our DOM references.
		var hashable = $( "input[ name = 'hashable' ]" );
		var md5Hash = $( "input[ name = 'md5Hash' ]" );

		// Cache our AJAX request - we only want to have one request
		// going at any one time.
		var hashRequest = null;

		// Make sure the form cannot be submitted in this demo.
		$( "form" ).submit(
			function( event ){

				event.preventDefault();

			}
		);

		// Bind to the key up on the hashable input. Every time the
		// key is presssed, we'll get the hashed version of the
		// string.
		//
		// NOTE: Since this is just a simple demo, I'm NOT goint to
		// worry about timing of throttling or debouncing.
		hashable.keyup(
			function(){

				// Check to see if we have an outgoing request for
				// the hash.
				if (hashRequest){

					// Abort the existing request - we're about to
					// launch a freshy-fresh one.
					hashRequest.abort();

				}

				// Get the hash of the currently available string.
				hashRequest = $.ajax({
					type: "post",
					url: window.location,
					data: {
						hashable: hashable.val()
					}
				});

				// If the request completes successfully, add the
				// hashed string to the output.
				hashRequest.done(
					function( hashedValue ){

						md5Hash.val( hashedValue );

					}
				);

			}
		);


	</script>

</body>
</html>