Connecting to ColdFusion

Server-side examples with ColdFusion are very hard to come by and I have used ColdFusion to build a number of web applications so I thought it was noteworthy for this chapter. ColdFusion is a unique language that is easy to pick up for developers who are familiar with tag-based code, such as HTML, XML, and so on. The great thing about ColdFusion is that although it is simple, it is quite powerful because it can easily be connected to databases, and it can interact directly with Flash. Nowadays, this is a bonus because Flash is becoming a powerful web application product and, of course, the reason I am covering it is because it can easily be integrated with Ajax and ultimately our engine. This section will show you how to achieve the same results as the ASP.NET example with much less code.

The first thing we will do in order to get started is create an HTML file to import our JavaScript files and contain our display code. The import statements should look similar to the example in Listing 21.7.

Listing 21.7. Importing the Appropriate JavaScript (index.html)

<script type="text/javascript" src="/books/1/87/1/html/2/javascript/Utilities.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/javascript/model/AjaxUpdater.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/javascript/model/HTTP.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/javascript/model/Ajax.js"></script>

After the appropriate files have been imported, we will add the JavaScript code to make the request to the server. The code looks exactly like the code in the ASP.NET example, but it is requesting a ColdFusion service connector file instead. Listing 21.8 shows this request method.

Listing 21.8. Making the Request (index.html)

<script type="text/javascript"> function request(data) {     AjaxUpdater.Update('GET', 'serviceConnector.cfm?request='+ data, onResponse); } </script>

As I mentioned, aside from the file it requests, the request method is the same as the ASP.NET example. It accepts a data parameter, which it appends to the URL via the query string, as a value that matches the request key. The other code that is placed into this file is the display code. This code is also almost identical to the ASP.NET example. Take a look at Listing 21.9 to see the code.

Listing 21.9. Display Code for the Request and Response (index.html)

<div>Request:</div> <div><input type="text" onkeyup="request(this.value);" /></div> <br /><br /> <div>Response:</div> <div ></div>

Now that we have the code to allow users to make requests to the server side, let's take a look at the serviceConnector.cfm that we created for this example. Much like the ASP.NET sample, this code will receive a string request and search an array of usernames for a name that includes the string. The first thing we will do in this file is create the array of names. If this were a database example, we would simply select all the names from the database, push them into an array, and search the array for the string. Listing 21.10 shows the entire serviceConnector.cfm file.

Listing 21.10. Building the Response (serviceConnector.cfm)

<cfset userNames = ArrayNew(1)> <cfset userNames[1] = "Kris Hadlock"> <cfset userNames[2] = "Grace Hopper"> <cfset userNames[3] = "Pi Sheng"> <cfcontent type="text/xml; charset=iso-8859-1"> <cfoutput>     <usernames>     <cfloop from="1" to="#ArrayLen(userNames)#" index="i">         <cfloop from="1" to="#Len(userNames[i])#" index="j">             <cfif #Mid(userNames[i], 1, j)# IS #URL.request#>                 <username><![CDATA[#userNames[i]#]]></username>             </cfif>         </cfloop>     </cfloop>     </usernames>  </cfoutput>

This file is quite small compared to the ASP.NET example, due to the fact that the language is not strictly typed and does not include any classes. As I mentioned, the first thing we do is create an array of usernames. This array consists of the same values that we added to the array in the ASP.NET example. After this array has been created, a very important piece of code needs to be added. The cfcontent tag provides us with a response of valid XML to the request. Without this line of code, the XML string structure will be just a string and therefore not valid for parsing. After we have the content type defined, we will output the XML structure as a string. This data starts with a usernames element and then begins to loop the array of names. In this loop, we need to nest another loop. The nested loop will iterate the actual characters within each of the array string values. In other words, it we will iterate each letter in a username. In this nested loop, we will add a flag that uses ColdFusion's Mid function, which is similar to the substring function in other languages. This function will be used to determine if the current set of characters is equal to the request string. If so, the username is appended to a username element within CDATA to ensure proper parsing. After all of the usernames are added to the XML structure, we will close the first usernames element and the file will be ready to be parsed by the client side.

Now that we are receiving a response on the client side, we must create a method to handle it. This method will be the onResponse method, which we passed as the callback method to the AjaxUpdater during the request. This method can be seen in Listing 21.11.

Listing 21.11. Handling the Response (index.html)

[View full width]

function onResponse() {         if(Ajax.checkReadyState('response') == "OK")     {         var usernames = Ajax.getResponse().getElementsByTagName('username');         for(var i=0; i<usernames.length; i++)         {             Utilities.getElement("response").innerHTML += usernames[i].firstChild.data  +"<br/>";         }     }  }

This method may look familiar because it is the same one that was used to handle the response in the ASP.NET example. When the response is received, we target the array of usernames and set them to a usernames variable. This variable is then iterated and each username is added to the response div element.

Each of the server-side samples we have created in this book is requested the same way. The model we created will always work as long as we can respond with the appropriate data from the server-side language.