The Purpose of Ajax

Contact Us or call 1-877-932-8228
The Purpose of Ajax

The Purpose of Ajax

The main purpose of Ajax is to provide a simple and standard means for a web page to communicate with the server without a complete page refresh. To illustrate this, consider a simple registration form. You have very likely experienced the frustration of having to try multiple usernames when registering for some new website. You fill out the entire form, hit the submit button, wait for a second or so, and then get the same form right back with a message saying that the username you have chosen is not available. You try another easy-to-remember username and find it is also not available. You repeat this several times until finally you pick some obscure username. This process wouldn't be nearly as bad if you didn't have to wait for the entire page to refresh each time you tried a new username.

But that's a very simple example. Some web-based applications require constant interaction with a database through a middle-tier. Take, for example, an interface for updating employee records. The traditional way of doing this is illustrated below.

Visit http://www.webucator.com/course-demos/JSC400/EmployeeAdmin.cfm to view the "traditional" server-side app illustrated below. Though we reference the ColdFusion (.cfm) version of each file below, you will find .cfm, Microsoft Active Server Pages (.asp), JavaServer Pages (.jsp), and PHP (.php) files in the directory AjaxBasics/Demos/.

Traditional Web Application

  1. First, the application shows a list of employees to pick from. (AjaxBasics/Demos/EmployeeAdmin.cfm):Employee List
  2. When the user chooses an employee, the server returns a new page (FIRST REFRESH) and a form is displayed. (AjaxBasics/Demos/EditEmployee.cfm):Form
  3. The user can then edit the employee data (e.g, change "Nancy" to "Nance") and submit the form. The server then returns the new page (SECOND REFRESH). (AjaxBasics/Demos/EditEmployee.cfm):New Page
  4. To get back to the employee list to begin the process of modifying another employee's data, the user would have to click on the "Employee List" link (THIRD REFRESH).

Ajax makes this process much simpler for the user. Records, and even individual fields of a record, can be edited one at a time without full page refreshes. This method will be illustrated shortly, but first, we must take a little detour to get the back end set up for server-side communication.

Next