bennadel/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>
	<!--- 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>