Intro to Ajax



Ajax (asynchronous JavaScript and XML) technology has become increasingly popular in website design. Using Ajax, you can submit form data to the server without refreshing the document. Suppose you are filling out an online registration form. You write your user name, email address, address etc. and submit the form. The server then detects that the user name has already been taken by another user. So it will generate an error message and request you to choose different user name. Now you have to fill the entire form again unless the server brings your data back to you through query string. Additionally it is not very safe to send your personal information through query string. In this case data submit by Ajax is the best solution. Another useful feature of Ajax is that you can send custom data (like user IP) which is not in the form field.

Like conventional data submission Ajax data submit also of two types, GET and POST. There relative merits demerits are same as conventional data submission.

How data is submitted using Ajax

1. When user submits data by pressing submit button or by clicking submit link a JavaScript function is called.

2. This function establishes connection with the server by XML HTTP REQUEST object. When connection is established data from the form fields are transmitted to the server.

3. Whenever the server response is received another JavaScript function is fired. This function is then takes the necessary steps according to the response text from the server end.

Advantages and disadvantages

1. As whole page is not reloaded Ajax submission is faster than conventional form submission process.

2. It is more user friendly.

3. Use of Ajax is not limited to form data submission. It is widely used in dynamic menu design; collecting data for web stat analysis, or even reload the entire page dynamically.

4. Some users disable JavaScript in their browser. In such cases Ajax fails to work.

5. As data are dynamically loaded web history is not available, ie you can not reload page by using back button of your browser.

Leave a Reply