Easy Ajax : Part 2

In the first post of this series, we looked at a really basic AJAX example. We simply pulled the time and date into our page via an AJAX call.  In this post, we'll take things a step further by passing a variables in and using it in the output.

For this example, we'll take an input string and output it in reverse.

Here is a working sample:

This example is also pretty simple. We'll start again by including the Prototype script in the head of our document:

<script type="text/javascript" src="prototype.js"></script>

Next, create the necessary form fields and buttons with this code:

<input type="text" id="input_string" />
<input type="button" value="Reverse It" onclick="run_ajax();" />
<div id="ajax_div"></div>

And now for our Prototype magic...

<script type="text/javascript">        
    function run_ajax() {
         var url = '/ajax/easy2.cfm';
         var pars = 's='+escape($F('input_string'));
         var target = 'ajax_div';
         var myAjax = new Ajax.Updater(target, url, {method:'get', parameters:pars});
    }
</script>

A few things to note in the above code block.. The line starting with "var pars" passes our data over to the AJAX page. We use $F() to get the value of the field with id "input_string" $F() is shorthand syntax that is built into Prototype and can save you lots of time and headaches. The old way was to write out document.getElementById() each time, so this is a lot shorter. We also escape the string in case there were any weird characters.

On the last line, in the Ajax.Updater call, we added braces to enclose any options including a reference to our parameters. In this case, we're specifying that this will be a get request, so we'll be expecting "URL." parameters in ColdFusion. A POST request would yield "FORM." parameters in our ColdFusion page.

Lastly, we need the ColdFusion page which will receive our call via AJAX and pass back the results. That page is actually really simple in this example, containing the following code:

<cfsetting showdebugoutput="no">
<cfoutput>
#reverse(url.s)#
</cfoutput>

That's it! We've now got the basics covered and you should be able to start working some magic!