Generating verification codes with Ajax - AJAX

In the section that you just read, I coded a simple HTML form for demonstrating how an Ajax-driven program can make it a bit safer against attacks and fake submissions. In this case, I’m going to develop a random code generator that will be coupled to the form, so each time a users tries to submit it, they will be asked to enter this checking code. So far, nothing unexpected, right?

However -- and here’s where things will get really interesting -- the verification code will be generated on the fly via an Ajax-based HTTP request. Therefore, to perform this task, I’m going to use the assistance of the Ajax module bundled with the jQuery library, in this way saving time and effort.

Basically, the Ajax application that will be charged with generating verification codes dynamically for the previous HTML form looks like this:

<script language="javascript" src="jquery.js"></script>

<script language="javascript">

$(document).ready(function(){

// get verification code with Ajax

$.get('get_checkingcode.php',{data:'getting code'},function(checkingcode){$('#codebox').html(checkingcode);});

});

</script>

Even if you’re not familiar with the API of the jQuery library, it’s pretty easy to understand how the above script works. In simple terms, it will request with Ajax a PHP file called “get_checkingcode.php,” which will be responsible for generating a random verification code.

Then, this string will be sent back to the client, where it will be displayed within the HTML form before the form is submitted. You can see how this implements a simple mechanism that will protect the form against automated submissions. Of course, this isn’t a bullet-proof approach, and certainly can be improved. But it can be quite useful for making web forms more secure, without having to deal directly with a server-side graphic library.

Now that you hopefully grasped how verification codes will be generated via Ajax-based HTTP requests, it’s time to build the PHP file that actually sends this random string to the client.

The full details of how this PHP file will be created will be discussed in the course of the following section. Thus, click on the link below and read the next few lines.