Joey Javas

The following illustrates how to create a simple Ajax application with ColdFusion. This example sends a request to the server to get a list of product colors.

Use this JavaScript code:

//First, create the XMLHttpRequest object; the try/catch is to handle the various browsers implementation of XMLHttpRequest
try {
var objXHR = new XMLHttpRequest();
} catch (e) {
try {
var objXHR = new ActiveXObject(‘Msxml2.XMLHTTP’);
} catch (e) {
try {
var objXHR = new ActiveXObject(‘Microsoft.XMLHTTP’);
} catch (e) {
document.write(‘XMLHttpRequest not supported’); }
}
}

//Open the URL where the database query resides; replace the URL here with the URL of the page on your server
objXHR.open(‘GET’,'http://myURL.com’,true);

//Set up a listener to handle the response from the server
objXHR.onreadystatechange = function(evt){
if (objXHR.readyState == 4) {
if(objXHR.status == 200)
colors = objXHR.responseXML.getElementsByTagName(‘color’);
for (i=0;i<colors.length;i++)
document.write(colors[i].firstChild.nodeValue);
else
document.write(‘Error processing request’);
}
};

//Send the request to the server
objXHR.send(null);
//End JavaScript

This is the ColdFusion page URL that should be referenced in the “open” method in the JavaScript, above:

<cfsetting showdebugoutput = ‘false’>
<cfheader name=’Expires’ value=’#now()#’>
<cfheader name=’Content-Type’ value=’text/xml’>

<cfquery datasource=”mydatasource” name=”qryColors”>
SELECT Colors
FROM Products
</cfquery>

<cfoutput>
<colors>
<cfloop query=”qryColors”>
<color>#qryColors.Color#</color>
</cfloop>
</colors>
</cfoutput>

Related articles:
JavaScript: Creating XMLHttpRequest Object for Ajax
JavaScript XMLHttpRequest open Method: Calling a URL in Ajax
JavaScript XMLHttpRequest send Method: send a URL in Ajax
JavaScript XMLHttpRequest onreadystatechange for Ajax Requests
JavaScript: Getting Data From a Server for Ajax

In previous posts, I explained the process of requesting a URL for Ajax:
First, create the XMLHttpRequest object
Second, open a connection to a URL
Third, send the request
Finally, listen for a response from the server

Between the third and last step, however, there is a crucial piece: Creating data on the server that will be used by Ajax. This is actually quite simple. All that’s needed is an XML document, which can be creating in many different ways. The example I provide below is created with ColdFusion.

<cfsetting showdebugoutput = ‘false’>
<cfheader name=”Expires” value=”#now()#”>
<cfheader name=”Content-Type” value=”text/xml”>

<cfquery datasource=”mydatasource” name=”qryColors”>
SELECT Colors
FROM Products
</cfquery>

<cfoutput>
<colors>
<cfloop query=”qryColors”>
<color>#qryColors.Color#</color>
</cfloop>
</colors>
</cfoutput>

In the previous example, the first three lines simply specify that this is going to be an XML document. Then a query is run and looped over while creating XML nodes. This is the XML that will be sent back to the Ajax application. Once the response has been received in JavaScript, this XML can be used. Inside the listener response (when the readyState is 4), get the XML nodes of interest as follows (this is JavaScript code now):

colors = objXHR.responseXML.getElementsByTagName('color');
for (i=0;i<colors.length;i++)
document.write(colors[i].firstChild.nodeValue);

The JavaScript throw statement is used to send an exception to a block of code that will handle the exception.

try
{
if(/^\d+$/.test(2))
document.write('Positive integer validated');
else
throw('Invalid');
}
catch(strErrorMsg)
{
document.write(strErrorMsg);
}

The preceding example defines a try block, in which a validation for a positive integer occurs. If the validation is successful, a success message is printed. If the validation is not successful, however, the throw statement is used to send the error message to the catch block.

Related articles:
JavaScript Try Catch Finally

Like most programming languages, JavaScript provides a way to handle an exception that occurs in a block of code. This is done with the try/catch/finally statement. This statement works by defining a block of code to be run. This code is placement in the “try” portion of the statement. Should an exception occur while this code is being run, the code in the “catch” part of the statement will be run. After the try/catch is complete, the code in the “finally” division will be run. Note that the “finally” code will always run, regardless of whether there was an exception.

Example:
try
{
var a = 1;
var c = a + b;
}
catch(e)
{
document.write('An exception occurred.');
}
finally
{
document.write('The Finally block always runs.');
}

The preceding code goes into the catch block because the “b” variable was never defined and therefore cannot be added to “a.”

In JavaScript, possible status values of the XMLHttpRequest object, after a response from the server has arrived, are simply the standard HTTP status codes. For example:

200 = OK
301 = Moved Permanently
404 = Not Found
500 = Internal Server Error

List of HTTP status codes

In JavaScript, possible readyState values after sending an XMLHttpRequest are:

0 = open has not yet been called
1 = send has not yet been called but open has been called
2 = send has been called but no response from server
3 = data is in the process of being received from the server
4 = response from server has arrived

Related articles:
JavaScript Creating XMLHttpRequest Object for Ajax
JavaScript XMLHttpRequest send Method: Send a URL in Ajax
JavaScript XMLHttpRequest Send Method: Send a URL in Ajax
JavaScript XMLHttpRequest onreadystatechange for Ajax requests

After an XMLHttpRequest (XHR) object has been created, the open method has been called on a URL against the XHR object and the URL has been sent to a web server, the next step is to listen for a response. This is done via the onreadystatechange property of the XMLHttpRequest object, as follows:

objXHR.onreadystatechange = function(evt){
if (objXHR.readyState == 4) {
if(objXHR.status == 200)
//Handle processing here
else
document.write('Error processing request');
}
};
objXHR.send(null);

Possible readyState values are:

0 = open has not yet been called
1 = send has not yet been called but open has been called
2 = send has been called but no response from server
3 = data is in the process of being received from the server
4 = response from server has arrived

In JavaScript, to build an Ajax application: First, create an XMLHttpRequest object. Then, open a URL. The next step is to send the request. This is done via the send method of the XMLHttpRequest object, as follows:

objXHR.send(null);

The send method accepts one argument. If the open method’s HTTP retrieval argument is POST, the argument should contain the form data that needs to be send to the server. If the open method’s HTTP retrieval argument is GET, simply send null.

So what is the next step after the XHR has sent a request? If the request is asynchronous, a listener is needed to know when the request is complete. I will cover this in the next post in my Ajax series.

In JavaScript, to call a URL for usage in an Ajax application, an XMLHttpRequest object must be created. This was described in a previous post:

JavaScript: Creating XMLHttpRequest object for Ajax

Once the XMLHttpRequest (XHR) object is created, a URL can be called by using the XHR’s open method, as follows:

objXHR.open('GET','http://myURL.com',true);

The three parameters passed to the open method are as follows:

1: The method by which the HTTP should be retrieved: GET or POST
2: The requested URL. A relative or absolute URL may be used here. If an absolute URL is being used, most browsers implement a same-origin policy, meaning the URL being requested must be on the same domain as the domain from which the URL is being requested.
3: How the request should be issued: True for asynchronous; False for synchronous.

After the XHR object has opened a request, send the request.

A US Social Security Number can be validated in JavaScript by using a regular expression, as follows:

document.write(/^\d{3}-\d{2}-\d{4}$/.test('529-77-8177'));

Related articles:
JavaScript Regular Expressions
JavaScript Regular Expression Special Characters: $ ^