Code Example for creating an AJAX application

In this section,an example for Ajax web application is created step by step. The example is based on a simple login page that validates the username entered in.

Requirements:

· The web application has a Login page containing username and password textboxes

· When the user types in his name, he will receive notifications about the status of the current value in the username textbox

· If the current value is a beginning part of the string “VisualBuilder”,the user will receive a green notification “Continue..”

· If the current value is not a beginning part of the string,user will receive a red notification - “Invalid input name”

· If the current value is equal to the string, user will receive a blue notification “Valid input name”

This web application includes only a web page and a service running on web server.

The web page is HTML code with the embedded JavaScript functions:

· ValidateUser() to catch the user’s typing event on the username textbox and to send/receive the XML message

· UpdateDOM() to parse the received message and update the status on the HTML page.

The service running on the web server has the role to listen to the request from the web browser then send back an appropriate XML response.

The diagram below describes the steps above in a sequence of methods invoked:

There are three key points in creating an Ajax application,which are also applicable to this example:

• Using XMLHttpRequest object to send xml message to web server
• Create a service that runs on web server to respond to request
• Parsing XMLHttpRequest object then update to DOM object of the html page on client-side