AJAX

Web applications are fun to build. They are like the fancy sportscar of Web sites. Web applications allow the designer and developer to get together and solve a problem for their customers that the customers might not have even know they had. That's how the blogging tools like MovableType and Blogger came about after all. I mean, before Blogger, did you know you needed an online tool to build your Web site blog?

But most Web applications are slow and tedious. Even the fastest of them has lots of free time for your customers to go get a coffee, work on their dog training, or (worst of all) head off to a faster Web site. It's that dreaded hourglass! You click a link and the hourglass appears as the Web application consults the server and the server thinks about what it's going to send back to you.

Ajax is a way of developing Web applications that combines:

	XHTML and CSS standards based presentation
	Interaction with the page through the DOM
	Data interchange with XML and XSLT
	Asynchronous data retrieval with XMLHttpRequest
	JavaScript to tie it all together

In the traditional Web application, the interaction between the customer and the server goes like this:

	Customer accesses Web application
	Server processes request and sends data to the browser while the customer waits
	Customer clicks on a link or interacts with the application
	Server processes request and sends data back to the browser while the customer waits
	etc....

There is a lot of customer waiting. Ajax Acts as an Intermediary

The Ajax engine works within the Web browser (through JavaScript and the DOM) to render the Web application and handle any requests that the customer might have of the Web server. The beauty of it is that because the Ajax engine is handling the requests, it can hold most information in the engine itself, while allowing the interaction with the application and the customer to happen asynchronously and independently of any interaction with the server.

Asynchronous

This is the key. In standard Web applications, the interaction between the customer and the server is synchronous. This means that one has to happen after the other. If a customer clicks a link, the request is sent to the server, which then sends the results back.

With Ajax, the JavaScript that is loaded when the page loads handles most of the basic tasks such as data validation and manipulation, as well as display rendering the Ajax engine handles without a trip to the server. At the same time that it is making display changes for the customer, it is sending data back and forth to the server. But the data transfer is not dependent upon actions of the customer.

When javascript was released, people loved all the cool things you could do with the web browser to make a more user-friendly experience. You could do form validation, quirky popup messages, make cool web tools and more. However, Javascript had no way of sending information between the web browser and the web server.

Example of AJAX Web Development is website that provides live update such as a stock exchange site. Where entire page is not reloaded but only section where you can see current market position keeps on constantly updating itself.

Ajax helps you in making your web application more interactive by retrieving small amount of data from web server and then showing it on your application. You can do all these things without refreshing your page. If you wanted to get any information from a database on the server, or send user information to a server-side script like PHP, you had to make an HTML form to GET or POST data to the server. The user would then have to click "Submit", wait for the server to respond, then a new page would load with the results. I'm sure we have all gotten slightly annoyed when having to wait for especially slow websites!

Usually in all the web applications, the user enters the data into the form and then clicks on the submit button to submit the request to the server. Server processes the request and returns the view in new page (by reloading the whole page). This process is inefficient, time consuming, and a little frustrating for you user if the only the small amount of data exchange is required. For example in an user registration form, this can be frustrating thing for the user, as whole page is reloaded only to check the availability of the user name. Ajax will help in making your application more interactive. With the help of Ajax you can tune your application to check the availability of the user name without refreshing the whole page.

Understanding the technology behind Ajax

Ajax is not a single technology, but it is a combination of many technologies. These technologies are supported by modern web browsers. Following are techniques used in the Ajax applications.

JavaScript:

JavaScript is used to make a request to the web server. Once the response is returned by the webserver, more JavaScript can be used to update the current page. DHTML and CSS is used to show the output to the user. JavaScript is used very heavily to provide teh dynamic behavior to the application.

Asynchronous Call to the Server:

Most of the Ajax application used the XMLHttpRequest object to send the request to the web server. These calls are Asynchronous and there is no need to wait for the response to come back. User can do the normal work without any problem.

XML:

XML may be used to receive the data returned from the web server. JavaScript can be used to process the XML data returned from the web server easily.

How Ajax Works?

Ajax attempts to remedy this problem by letting your Javascript communicate directly with the server, using a special Javascript object XMLHttpRequest. With this object, your Javascript can get information from the server without having to load a new page!

When user first visits the page, the Ajax engine is initialized and loaded. From that point of time user interacts with Ajax engine to interact with the web server. The Ajax engine operates asynchronously while sending the request to the server and receiving the response from server. Ajax life cycle within the web browser can be divided into following stages:

User Visit to the page:

User visits the URL by typing URL in browser or clicking a link from some other page.

Initialization of Ajax engine:

When the page is initially loaded, the Ajax engine is also initialized. The Ajax engine can also be set to continuously refresh the page content without refreshing the whole page.

Event Processing Loop:

* Browser event may instruct the Ajax engine to send request to server and receive the response data

* Server response - Ajax engine receives the response from the server. Then it calls the JavaScript call back functions

* Browser (View) update - JavaScript request call back functions is used to update the browser. DHTML and css is used to update the browser display.

Pretty much. By using the programming practice termed "Ajax" you will be able to trade data, with a web server, without having to load a new page.

Advantages of AJAX Development:

Ajax is new very promising technology, which has become extremely popular these days. Here are the benefits of using Ajax:

	Ajax is platform independent, so AJAX Application can run on any browser or platform
	As AJAX Application Development Technology is free, it saves a lot of cost
	Ajax is easy to learn. Ajax is based on JavaScript and existing technologies like XML, CSS, DHTML. etc. So, its very easy to learn Ajax
	Ajax can be used to develop web applications that can update the page data continuously without refreshing the whole page
	AJAX helps in rapid Application Development
	AJAX is Server independent, it can run on any web server in combination with any of the Web Development Technologies
	Improve User Experience
	Ajax can be used for creating rich, web-based applications that look and works like a desktop application

Ajax is Not New Technology

Ajax is instead a new way of looking at technology that is already mature and stable. If you're designing Web applications right now, why aren't you using Ajax?

For Further inquiry please contact This e-mail address is being protected from spambots. You need JavaScript enabled to view it

Shah Net Technologies Pvt Ltd

AJAX