AJAX can make the HTML user experience almost as pleasant as Flash. The main advantage of Flash, in spite of its vector animations, is that you never reload the page. Flash Remoting allows you to interface with the server in the background and AJAX does exactly the same for HTML pages.
In my previous article, "What's AJAX?" (CFDJ, Vol. 7, issue 9), I covered the basics of AJAX - everything from setting it up, all the way to having it running in an MVC design with basic functionality. Thus far, we have only sent and received simple objects, which is good way to understand the principle, but far from reality.
CFAJAX allows you to send complex objects, but for some reason it's extremely difficult to receive and interpret them on the ColdFusion side. For this reason I came up with a much simpler and straightforward way: WDDX serialization.
This concept may be familiar to some of you. WDDX stands for Web Development Data Exchange and Allaire created it in 2001 to solve problems in exchanging data between Web applications. In a nutshell, WDDX is a technology that facilitates exchanging complex objects over XML. WDXX supports Booleans, numbers, strings, date-time, arrays, structures, and record sets. Modules for WDDX support exist in various languages, including but not limited to ColdFusion, Perl, Java, JavaScript, ASP, .NET, and PHP.
A JavaScript WDDX component is included in the cfide/scripts folder of every ColdFusion installation. You can locate it at /cfide/scripts/wddx.js.
Complex Object Example
Now I'll show you how to use it. Listing 1 shows a simple example in which I created a complex object in JavaScript - a structure that contains an array of structures - and serialized it before sending it to ColdFusion. All you have to do is initialize a new WDDX serializer and serialize the complex object. You can see in Listing 1 how simple it is; you don't need to know the structure of the packet.
Notice the line "DWREngine._execute(_cfscriptLocation, null, ' wddxTest', oWddx.serialize(_o), testResult);". Here the first argument is the location of the ColdFusion model; the wddxTest is the function to be called; the argument is being serialized by our JavaScript component; and the testResult is the callback function.
Listing 2 shows how simple it is to receive the call. The function takes only one argument: the WDDX packet. This packet is not an object; it's actually an XML string. Listing 2 returns it intact just so you see exactly what's happening behind the scenes, and the callback function alerts the return packet. If you run my example, you'll see that the XML string is being alerted to the screen by the testResult function.
Trick 1
Here is a very important cross-browser note for you. Pay special attention to the URLDecode function in the ColdFusion listener (see Listing 2). I found that if you don't use it, the code will work just fine in IE, Firefox, and Netscape, but it will break in Safari for Mac users. I learned this the hard way, so here I am sharing the trick. For some reason, Safari URL-Encodes the XML packet before sending it and ColdFusion cannot decode it, making the argument impossible to de-serialize. Ideally, you'll test your code in as many environments as possible before you go live, so remember this and it may save you some debugging time.
Login Example
I'll now demonstrate a login example and some useful debugging techniques. Sometimes you'll find that the user is navigating your site and he is allowed to log in by using a form that is always available, either in the top or side navigation. Sometimes the user just posts a form, for example, a search products form, and then decides to log in. This may or may not be a problem, but if you allow him to post just the login form, you will lose all other existing form variables. One solution, you may be thinking now, is to loop through the form collection in the login form and create hidden fields; it may work in some cases, however, in other cases such as add-to-cart or checkout, resubmitting the form may cause duplicate process pages. Using cflocate after each process page is a good practice, but I am digressing and won't get into that.
How about adding some of the concepts we learned in this article? How nice would it be to let the user know if her username or password does not match any existing one without refreshing the page? Or even more! How about logging the user in, hiding the login form, and adding her login status without refreshing the page, and thus, without resubmitting, redirecting, or even losing focus of the current item she may be seeing.
This time we'll send the user and password to the ColdFusion model and expect an array for the response. The array will have a "success" status: in case of error, a message; and in case of success, the name of the user. We could also pass a structure, but you'll find that if you pass a structure back, JavaScript will interpret it as an array or keys and values. Then you'll have to loop through the array and assign the values to the keys. An alternative could be using WDDX, but this time to encode the packet before sending it back to JavaScript and use the WDDX component in JavaScript to deserialize it.
Sometimes it's not that easy to know exactly how the structure that ColdFusion sent is being interpreted by JavaScript. In these cases, I always refer to the same debugging method: I loop over the entire scope or collection to find what is being sent back. Listing 3 shows a simple one-line loop that will do the trick. Try to return a structure and see for yourself the way it's being passed back.
Let us continue with our login example. The ColdFusion model will return an array of two elements: array[1] will be the success variable (true or false), and array[2] will be the error message in case of an error, or the name of the user in case of success. For the sake of this article, the model just checks for a static user and password; however, this is exactly where your login logic should be. The trick is to update the session in the model in the background and just send back to JavaScript what it needs for the presentation layer. For instance, you could add the User-ID for the session, and send back the name and last name so it can be displayed in the left navigation.
After the user successfully logged in, we will make the login form disappear and add a simple message that reads "logged in as %name%". We will do this by using the JavaScript innerHTML function. The innerHTML function lets you modify the source code on the fly. Our form was placed inside a DIV layer that is used as a holder and, after the login, we will change the code of the holder to display the new status. When using this method, make sure that the navigation does not have to change upon login, or, if it does, you may modify the navigation too by using innerHTML as well. If you code in an object-oriented fashion, your navigation would be generated by an object you may call in the login function and send the generated HTML back to the JavaScript controller, which will replace the existing one by using innerHTML functions.
Content Example
Another great advantage of AJAX is that it improves load time. For example, imagine a typical site: it has a design frame and content in the center area. Every click has to reload the entire frame to update the content. Ideally, you wouldn't have to transfer the code for the frame and download any of its graphic components again. Caching certainly helps, but AJAX can make it even faster. Listings 4 and 5 show a simple example in which the content is being generated in the ColdFusion model and passed back to the JavaScript controller. For simplicity, in this example I actually added the content directly in the Model.cfm page. In real-life examples, the ideal way would be to actually include a view template with a cfinclude inside the cfsavecontent tag; by doing that your views will not depend on the AJAX component. Perhaps you won't see a huge speed difference just by running this example; this is due to the fact it doesn't have any design elements. As an experiment, try to add a full design frame to my example with an average page weight of 100k or 200k in graphics and compare load times.
