Learning ColdFusion 8: Javascript Object Notation (JSON) Part III - AJAX Demo 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>ColdFusion 8 JSON / AJAX Demo</title>
 
	<!-- Include jQuery library. -->
	<script
		type="text/javascript"
		src="jquery-latest.pack.js"
		></script>
	<script type="text/javascript">
 
		// This calls the AJAX function, passing in the phrase
		// that the user has entered in the form.
		function GetWords(){
			$.getJSON(
				// Invoke the TextUtility.cfc as a web service.
				// Be sure to include WSDL for web service.
				"TextUtility.cfc?wsdl",
 
				// Send the method name and the phrase that the
				// user has entered in the form.
				{
					method : "GetWords",
					text : $( "#phrase" ).val()
				},
 
				// When the JSON data has returned, fire this
				// callback function and pass in the JSON data
				// as it's argument.
				ShowWords
				);
		}
 
 
		// Once the AJAX call has come back, this function will
		// enter the words into the text area.
		function ShowWords( arrWords ){
			var jTextArea = $( "#words" );
 
			// Clear the text area.
			jTextArea.val( "" );
 
			// Iterate over the array of words returned from
			// our remote web service.
			$.each(
				arrWords,
				function( intI, strWord ){
					jTextArea.val(
						jTextArea.val() +
						strWord +
						"\r"
						);
				}
				);
 
		}
 
 
		// When the body is ready to load, hook up the
		// on click event for the submit button.
		$(
			function(){
				$( "#submit" ).click( GetWords );
			}
			);
 
	</script>
</head>
<body>
 
	<form>
 
		<p>
			<input
				type="text"
				id="phrase"
				name="phrase"
				size="40"
				/>
 
			<input
				type="button"
				id="submit"
				value="Get Words"
				/>
		</p>
 
		<p>
			<textarea
				name="words"
				id="words"
				cols="50"
				rows="20">
			</textarea>
		</p>
 
	</form>
 
</body>
</html>

For Cut-and-Paste