What is Ajax?
Building Web Applications Just Got More Fun
Building Web Applications Just Got More Fun
By Jennifer Kyrnin, About.com
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 Here to Change That
Ajax (sometimes called Asynchronous JavaScript and XML) is a way of programming for the Web that gets rid of the hourglass. Data, content, and design are merged together into a seamless whole. When your customer clicks on something on an Ajax driven application, there is very little lag time. The page simply displays what they're asking for. If you don't believe me, try out Google Maps for a few seconds. Scroll around and watch as the map updates almost before your eyes. There is very little lag and you don't have to wait for pages to refresh or reload.
What is Ajax?
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:
1. Customer accesses Web application
2. Server processes request and sends data to the browser while the customer waits
3. Customer clicks on a link or interacts with the application
4. Server processes request and sends data back to the browser while the customer waits
5. 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.
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? Your customers will thank you, and frankly, it's just fun!
Asynchronous Javascript and XML
By Stephen Chapman, About.com
Sunday June 19, 2005
One of the biggest limitations on using a client side language like javascript has always been that there was no easy way of interacting with the server without having to reload the whole web page. This problem has been rectified by recent browsers which have gradually implemented ways for Javascript to request information from the server and have that information passed back without having to reload the entire page. This process is done asynchronously (which means that the request is passed but the Javascript doesn't wait for the reply but gets on with something else). When the reply does come it triggers some further Javascript to complete the processing. The biggest problem with this has been that the commands to do this are not identical on each browser. This process of sending a request back to the server and retrieving information without having to load a whole new page has now been given a name - AJAX - and there are a number of projects underway to produce classes that hide the different methods that the various browsers use and give you a common set of calls to provide this function.
AJAX like DHTML is not a new technology as such. Rather it is a combination of existing technologies in order to create a new effect. DHTML combined Javascript with HTML and CSS to create dynamic effects for your web page. AJAX combines Javascript with XML and a server side language (eg. PHP) to provide a way for your web page to actually interact with the server without the overhead of downloading a brand new page every time a simple request is made.
One example of where this could be useful is if you have a new user selecting a logon id. Using Javascript alone the only validation you can perform is to verify that the logon id meets the minimum and maximum lengths that you accept and does not contain any invalid characters. To validate that the selected logon id is not already in use by someone else you need to check the database to see if the id already exists. Javascript by itself can't do this but by using AJAX the Javascript can pass the requested logon id back to the server for checking and receive a reply that can be dynamically displayed on the page (again through Javascript) without having to wait for the form to be submitted and a whole new web page to load.
There are a number of web sites that have information on AJAX and books that mention the subject are just starting to appear in the bookshops.
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 Here to Change That
Ajax (sometimes called Asynchronous JavaScript and XML) is a way of programming for the Web that gets rid of the hourglass. Data, content, and design are merged together into a seamless whole. When your customer clicks on something on an Ajax driven application, there is very little lag time. The page simply displays what they're asking for. If you don't believe me, try out Google Maps for a few seconds. Scroll around and watch as the map updates almost before your eyes. There is very little lag and you don't have to wait for pages to refresh or reload.
What is Ajax?
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:
1. Customer accesses Web application
2. Server processes request and sends data to the browser while the customer waits
3. Customer clicks on a link or interacts with the application
4. Server processes request and sends data back to the browser while the customer waits
5. 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.
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? Your customers will thank you, and frankly, it's just fun!
Asynchronous Javascript and XML
By Stephen Chapman, About.com
Sunday June 19, 2005
One of the biggest limitations on using a client side language like javascript has always been that there was no easy way of interacting with the server without having to reload the whole web page. This problem has been rectified by recent browsers which have gradually implemented ways for Javascript to request information from the server and have that information passed back without having to reload the entire page. This process is done asynchronously (which means that the request is passed but the Javascript doesn't wait for the reply but gets on with something else). When the reply does come it triggers some further Javascript to complete the processing. The biggest problem with this has been that the commands to do this are not identical on each browser. This process of sending a request back to the server and retrieving information without having to load a whole new page has now been given a name - AJAX - and there are a number of projects underway to produce classes that hide the different methods that the various browsers use and give you a common set of calls to provide this function.
AJAX like DHTML is not a new technology as such. Rather it is a combination of existing technologies in order to create a new effect. DHTML combined Javascript with HTML and CSS to create dynamic effects for your web page. AJAX combines Javascript with XML and a server side language (eg. PHP) to provide a way for your web page to actually interact with the server without the overhead of downloading a brand new page every time a simple request is made.
One example of where this could be useful is if you have a new user selecting a logon id. Using Javascript alone the only validation you can perform is to verify that the logon id meets the minimum and maximum lengths that you accept and does not contain any invalid characters. To validate that the selected logon id is not already in use by someone else you need to check the database to see if the id already exists. Javascript by itself can't do this but by using AJAX the Javascript can pass the requested logon id back to the server for checking and receive a reply that can be dynamically displayed on the page (again through Javascript) without having to wait for the form to be submitted and a whole new web page to load.
There are a number of web sites that have information on AJAX and books that mention the subject are just starting to appear in the bookshops.
