Using Ajax to validate a form

Ajax is one of a number of Web 2.0 approaches: a second wave of Web sites and applications. Using Ajax can allow a Web site to appear more like a desktop application. Because contact with the Web server can be carried out asynchronously, users can carry out activities on the Web site at the same time. This means that a user’s progress through the site is not interrupted by the stop-start nature of the traditional Web.

In this article, I want to show you a simple use for Ajax by validating a form in two different ways. We’ll check that a username is available and that the user has entered the same password twice before allowing them to submit the form. I’ve assumed that you understand the basics of XML as I’m comparing the form entry with an XML document containing the reserved usernames. I’ve also assumed that you understand the basics of the Ajax approach and the XMLHttpRequest object.

In a traditional Web application, the user would enter their details and click the submit button in a Web form. A Web page would then make a request from the Web server and the user would wait for processing to occur. The page would then display the appropriate information or message. The key point is that the user has to stop working to wait for a response from the Web server.

Using Ajax, a Web application can make server requests while the user is filling in the form details. The server request can be initiated by the user tabbing out of a form field. It uses the XMLHttpRequest object and can occur asynchronously, or in the background. The Web page can then display an appropriate message in part of the interface without the need for a full refresh.

Because this article is about Ajax, you’ll need to run the example through a Web server. I have IIS (Internet Information Systems) installed on my PC. I can store my files in a folder within C:\Inetpub\wwwroot. I’ve called my folder DMXZone which means I must view the Web page using the URL http://localhost/DMXZone. You can’t simply double click the page in Windows Explorer.

You can download the files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.