Validate credit card numbers without submitting and refreshing the entire web page.

Entering a credit card number on a web page has become common place. This hack verifies the entered credit card number, then only submits it to the server component if the number is valid. Nothing else changes on the page except for a user message, which notifies the user of any error conditions or that their credit card has passed muster and has been sent to the server to be processed. The server connection would likely be initiated over Secure Sockets Layer (SSL), such as with the HTTPS protocol, and is involved with an e=commerce component that further verifies the purchase information with a merchant bank. This hack, however, just verifies the number, generates a message, and makes an HTTP request using Ajax techniques.

Figure 3-4 shows what the web page looks like.

This is the web page code. It imports two JavaScript files.

XXXredpre#22XXX

The user chooses a credit card type (e.g., "Mastercard"), enters the card number, expiration date, and Card Security Code, and clicks the XXXredpre#198XXX button. However, instead of having the page dissolve and the values depart immediately for the server, the application verifies a few conditions first. The JavaScript makes sure that the fields are not blank or contain a minimum number of characters (such as three for the Card Security Code), then it verifies the card number using the Luhn formula or algorithm.

If one of these checks fails, the hack displays a message in red. Figure 3-5 shows one of these messages.

If the credit card number is verified and everything else has been correctly entered, then the hack uses XXXredpre#199XXX to send this information to a server.

We are not strictly making a secure connection in this hack, but a real application would not send any purchase information unencrypted over a network.

A message in blue notifies the user, as in figure 3-6.

Verifying the Card Number

cc.js contains the code for responding to the user's button click, as well as for verifying the information and generating a user message. http_request.js creates and calls the methods of XXXredpre#200XXX. See Hack #3. Here is the code for cc.js.

XXXredpre#23XXX

There is a lot of functionality to absorb here, so first we will discuss the button click. When the browser completes loading the web page, this event is captured by the code XXXredpre#201XXX. This event handler is a sensible place to set up other event handlers, because the code is assured that the browser has finished loading other HTML tags that might be used by these handlers. Then the code sets up an event handler for when the user submits the form.

XXXredpre#24XXX

The form's XXXredpre#202XXX event handler points to a function that calls XXXredpre#203XXX, then retuns XXXredpre#204XXX, which effectively cancels the browser's form submission. We are using the request object to send the form values, only after verifying that the submissions are valid. Let's look at the XXXredpre#205XXX function.

XXXredpre#25XXX

This function includes a number of common-sense checks before it validates the credit-card number using another function, XXXredpre#206XXX. If the latter function returns XXXredpre#207XXX, then the code builds a URL for the server component, then uses XXXredpre#208XXX to send the card information.

The XXXredpre#209XXX function is responsible for setting up XXXredpre#210XXX and connecting with the server. The function takes four parameters: The type of request (as in XXXredpre#211XXX or XXXredpre#212XXX), the URL, whether or not the request shuld be asynchronous or not, and the name of the function that will handle the response.

This code appears in the file http_request.js. See Hack #3.

Shooting the Luhn

The XXXredpre#214XXX function verifies that the credit-card number is at least 13 characters and does not contain any letters. If the credit card number passes these checks, then the code removes any spaces or dashes from the string and calls a function that uses the Luhn formula.

XXXredpre#26XXX

Here is the code for the XXXredpre#215XXX function.

XXXredpre#27XXX

Information on the Luhn formula or algorithm is easily found on the web, so we will not take up a lot of space describing it here.

This function takes a XXXredpre#216XXX of numbers, applies the formula to the numbers, and returns the sum to XXXredpre#217XXX. If the total can be evenly divided by 10, then the credit card number is valid. Here is the piece of code from XXXredpre#218XXX that makes this determination.

XXXredpre#28XXX

The server component returns a bit of XML indicating success or failure, mimicking the processing of a purchase order, as in XXXredpre#219XXX. The XXXredpre#220XXX function generates a user message from this return value.

XXXredpre#29XXX

The XXXredpre#221XXX function is responsible for generating a styled user message, in red in the event of an error in handling the purchase information, in blue otherwise. Figure 3-6 shows a user message after the credit card has been verified and handled by the server. However, the entire process takes place back stage, the web page never refreshes, and only small parts of the user interface change as the user interacts with the application.

Break out the code that initializes the request object and sends requests into its own JavaScript file.

In order to cleanly separate the concerns of big Ajax applications, create a separate file that manages the XMLHttpRequest object, then import that file into every web page that needs it. At the very least, any changes that are necessary with how the code sets up the request object only have to be made in this file, as opposed to in every JavaScript file that uses Ajax-style requests.

This hack stores all of the request-object related code in a file http_request.js. Any web page that uses XMLHttpRequest can then import this file in the following way.

Here's the code for the file, a mere 71 lines including all the comments.

var request = null;
/* Wrapper function for constructing a Request object.
Parameters:
reqType: The HTTP request type such as GET or POST.
url: The URL of the server program.
asynch: Whether to send the request asynchronously or not.
respHandle: The name of the function that will handle the response.
Any fifth parameters represented as arguments[4] are the data a
POST request is designed to send. */
function httpRequest(reqType,url,asynch,respHandle){
//Mozilla-based browsers
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
//if the reqType parameter is POST, then the
//5th argument to the function is the POSTed data
if(reqType.toLowerCase() != "post") {
initReq(reqType, url,asynch,respHandle);
} else {
//the POSTed data
var args = arguments[4];
if(args != null && args.length > 0){
initReq(reqType,url,asynch,respHandle,args);
}
}
} else if (window.ActiveXObject){
request=new ActiveXObject("Msxml2.XMLHTTP");
if (! request){
request=new ActiveXObject("Microsoft.XMLHTTP");
}
if(request){
//if the reqType parameter is POST, then the
//4th argument to the function is the POSTed data
if(reqType.toLowerCase() != "post") {
initReq(reqType,url,asynch,respHandle);
} else {
var args = arguments[4];
if(args != null && args.length > 0){
initReq(reqType,url,asynch,respHandle,args);
}
}
} else {
alert("Your browser does not permit the use of all "+
"of this application's features!");}
} else {
alert("Your browser does not permit the use of all "+
"of this application's features!");}
}
/* Initialize a Request object that is already constructed */
function initReq(reqType,url,bool,respHandle){
try{
/* Specify the function that will handle the HTTP response */
request.onreadystatechange=respHandle;
request.open(reqType,url,bool);
//if the reqType parameter is POST, then the
//5th argument to the function is the POSTed data
if(reqType.toLowerCase() == "post") {
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded; charset=UTF-8");
request.send(arguments[4]);
} else {
request.send(null);
}

} catch (errv) {
alert(
"The application cannot contact "+
"the server at the moment. "+
"Please try again in a few seconds.\n"+
"Error detail: "+errv.message);
}
}

The applications that use this code call the httpRequest() function with four or five (with POST requests) parameters. You will read lots of examples of calling this function in the other hacks; here is another.

var _url = "https://www.parkerriver.com/s/sender";
var _data="first=Bruce&last=Perry&middle=W";
httpRequest("POST",_url,true,handleResponse,_data);

The code comments describe the meaning of each of these parameters. The last parameter represents the data that accompanies a POST request.

NOTE

A POST HTTP request includes the posted data beneath the request header information, instead of appending parameter name/values on to the URL, as in a GET.

If the code is not using POST, then the client code only uses the first four parameters. The fourth parameter can be either the name of a function that is declared in the client code (i.e., this response-handling function appears outside of the http_request.js file), or a function literal. The latter option involves defining a function inside of a function call, which is often awkward and difficult to read. However, it is sensible in situations where the HTTP response handling is short and simple, as in:

var _url = "https://www.parkerriver.com/s/sender";
//a debugging set-up
httpRequest("POST",_url,true,function(){alert(request.responseText);});

httpRequest() initiates the same browser detection and set up of XMLHttpRequest for Internet Explorer and non-Microsoft browsers as Hack #1 described. initReq() handles the second step of setting up the request object: specifying the onreadystatechange event handler (see Hack #1), and calling the open() and send() methods to make an HTTP request. The code traps any errors or exceptions thrown by these request method calls using a try/catch statement. For example, if the code calls open() with a URL specifying a different host than the one used to download the enclosing web page, the try/catch statement will catch the error and pop up an alert() window.

Finally, as long as the web page imports http_request.js, then the request variable is available to code external to the imported file; request is in effect a global variable.

request is thus reserved as a variable name, because local variables that use the var keyword will supercede with unintentional consequences the globally used request.