|
|
Ajax: an introduction
Posted On August 23, 2008 by Rose Mary filed under
Last year will definitely be remembered as the rise of AJAX – the new development technique that many believe will blur the line between web-based and desktop applications. This mystical acronym, authored by Adaptive Path in mid February, is a label for the rich, highly responsive and interactive interfaces of AJAX-enabled applications. It stands for “Asynchronous JavaScript + XML”.
Although we are just beginning to realize its full potential, the proven success of famous AJAX-based projects like Google Maps signifies that this is not just media hype, but rather a promising technology that may change web-applications as we know them. Or for that matters, computer applications as we know them.
The purpose of this article is to help developers understand the core concept of AJAX, realize its benefits and suitable application scenarios, and of course, become aware of its drawbacks.
The pursuit of a development technique like AJAX came from the need for making web applications much more usable and eliminating their key disadvantages in comparison with the desktop platform:
· Poor Interactivity – web applications require that users wait for full page reloads after each interaction with the server. During the loading time they have to stare at a blank screen, which tremendously disturbs the whole experience. Although broadband internet connections are becoming a standard, web applications are also becoming increasingly complex and "heavy" so the overall waiting time remains relatively the same.
· Unresponsiveness – classic web applications transfer the complete form data to the server, which in turn renders and sends back the full HTML markup of the page to the browser. This happens during each postback and in most cases is highly inefficient, since only a small part of the interface is actually changed. However, lots of bandwidth is consumed and the performance is significantly hindered. This leaves users with the idea that web applications are slow by nature. Even worse, the user will often find the page has scrolled to a different position, causing disorientation.
· Simplistic Interfaces – the requirement for full page postback whenever the user interface has to be changed imposes hefty limitations on the degree of sophistication of web user interfaces. Rich and smooth interfaces with on-demand update could only be implemented using Flash technology. This approach, however, is impractical for general use since it is very complex and requires a much different set of skills than those possessed by the typical web developer. It can also cause end-user issues as a plug-in is often required.
· Low Usability – if a web application reloads the whole page because the user made a new selection on a form, they will get confused. It is often the case that web applications work in a confusing and esoteric way because the web application has been built around the standard, simple view of the Internet protocols. ASP.NET meant we could build applications with more functionality more quickly, usability has a way to go yet.
AJAX was born with the idea to change all this and narrow the functional gap between the desktop and the web. The new generation of AJAX-enabled applications delivers close-to-instantaneous performance, rich interfaces and tremendously improved user experience. It opens new horizons for much closer interaction with the application and demonstrates in practice what was until recently considered impossible:
· Real-time map panning in Google Maps and Virtual Earth is just like image panning in Adobe Photoshop
· Folder browsing, message previewing, etc. in Microsoft OutlookWeb Access is identical to that in the desktop version of Outlook.
· Validation checking on complex input fields can be performed by the server, without reloading the page.
What's interesting to know is that AJAX is not actually that new as a technology. It has been first used after Microsoft implemented Microsoft.XMLHTTP COM object that was part of The Microsoft® XML Parser distributive. As an ActiveX object in Internet Explorer 5, it was used to create the famous Outlook Web Access. You have probably seen AJAX in action for quite long in the MSDN Documentation treeview navigation. What is new actually is the name AJAX, which was widely accepted in 2005. Other labels for the same technology are Load on Demand, Asynchronous Requests, Callbacks, Out-of-band Calls, etc.
What's even more interesting is that AJAX is actually not a technology. It is more like a development technique that utilizes in a unique way a number of already mature technologies: HTML/XHTML, XML, DHTML, the XmlHttpRequest object, and JavaScript. For the purposes of simplicity we will refer to it as technology as it is widely accepted as such and provides a useful language to discuss the characteristics of the significant trend it represents.
The core idea behind AJAX is to make the communication with the server asynchronous, so that data is transferred and processed in the background. As a result the user can continue working on the other parts of the page without interruption. In an AJAX-enabled application only the relevant page elements are updated, only when this is necessary.
In contrast, the traditional synchronous (postback-based) communication would require a full page reload every time data has to be transferred to/from the server. This leads to the following negative effects:
· The user interaction with the application is interrupted every time a server call is needed, since a postback has to be made.
· The user has to wait and look at blank screen during each postback.
· The full page is being rendered and transferred to the client after each postback, which is time consuming and traffic intensive.
· Any information entered by the user will be submitted to the server, perhaps prematurely.
The AJAX-enabled applications, on the other hand, rely on a new asynchronous method of communication between the client and the server. It is implemented as a JavaScript engine that is loaded on the client during the initial page load. From there on, this engine serves as a mediator that sends only relevant data to the server as XML and subsequently processes server response to update the relevant page elements.
Below is a diagram of the complete lifecycle of an AJAX-enabled web form.
1. Initial request by the browser – the user requests the particular URL.
2. The complete page is rendered by the server (along with the JavaScript AJAX engine) and sent to the client (HTML, CSS, JavaScript AJAX engine).
3. All subsequent requests to the server are initiated as function calls to the JavaScript engine.
4. The JavaScript engine then makes an XmlHttpRequest to the server.
5. The server processes the request and sends a response in XML format to the client (XML document). It contains the data only of the page elements that need to be changed. In most cases this data comprises just a fraction of the total page markup.
6. The AJAX engine processes the server response, updates the relevant page content or performs another operation with the new data received from the server. (HTML + CSS)
The benefits of the AJAX development technique may look very attractive, but its practical implementation from scratch is usually a complex task, which only advanced developers can undertake. Among the pitfalls you will face are:
· Writing and Maintaining Complex JavaScript – building AJAX-enabled applications requires substantial JavaScript skills, which may turn to be a problem for a large number of .Net developers. Furthermore, the lack of good debugging tools for client-side script makes the process even more complicated.
· ViewState Management – ASP.NET web controls properly maintain their ViewState between postbacks. The same, however, does not apply for AJAX callbacks. As a result, developers need to figure a way for the proper management of the page ViewState.
· Breaking the Page Paradigm – AJAX requires a different way of thinking about a web-site, since the concept of a "Page" is no longer valid. In fact, AJAX applications may be considered as closer to the desktop-applications development approach. The fact that a Page no longer holds constant data leads to two important consequences – the Back button and bookmarking will no longer work as expected. Therefore, developers need to implement specific mechanisms for overcoming these two issues.
· Accessibility – the AJAX development technique fundamentally violates the requirements for accessibility. Since the page content is being updated dynamically, the changes may not be detected by accessibility tools like screen readers. Furthermore, some accessibility standards prohibit the use of JavaScript altogether, which practically eliminates the possibility for using AJAX.
· New UI Interactivity Requires Learning – the UI richness of AJAX-enabled application presents users with new and unexpected functionality. Although this is the main reason for using AJAX in the first place, it may require some learning.
The advantages of AJAX-enabled applications to classic ones can be summarized as follows:
· Better Performance and Efficiency – the key advantage of AJAX applications is the significantly higher performance, which is a result of the small amount of data transferred from the server. This makes the AJAX technique especially beneficial for data-intensive applications (e.g. displaying rich reports, browsing through large data structures) as well as for low-bandwidth networks.
· More Responsive Interfaces – the improved performance leads to much more responsive interfaces, which create the illusion that updates are happening instantly. As a result the AJAX web applications appear to behave much like their desktop counterparts.
· Reduced or Eliminated "Waiting" Time – in AJAX-based applications only the relevant page elements are updates, with the rest of the page remaining unchanged. This approach eliminates the white screen (or page flicker on faster connections) and significantly decreases the idle waiting time.
· Increased Usability – as the web application is more efficient through the use of AJAX, and the client can communicate with the server without page-loads, it becomes possible to build some wonderful user interfaces that fit much better with users’ needs and expectations.
· Users Can Work with the Rest of the Page – many AJAX-based applications allow you to continue working with the rest of the page, while data is being transferred in the background. This further adds to the uninterrupted manner of the end-user experience.
The following are scenarios where it’s more likely to be beneficial to use AJAX functionality:
· Highly interactive applications - where an application is highly interactive, it may provide benefits to use AJAX to allow the interactivity without the time cost of page reloads. A good example of a highly interactive web site is Google Maps.
· Parts of pages – AJAX is best used in key places throughout a web site where it adds significant value. There is little or no value in using AJAX to provide the majority of your page content – you may lose browser compatibility, make the application overly complex and cause problems with the site being indexed in search engines.
· Intranets – on an internal web site the bandwidth is much higher so more AJAX usage can be successful. It’s often the case that intranets involve working with data, and this is often a good application for AJAX.
· Online wizards – linear user interfaces that collect a large series of data are a well-known challenge in web applications, and can be implemented using AJAX in a way where the user feels more in control and the application is more responsive.
· Data input & validation – before AJAX it was hard to build anything resembling rich data input forms that give clear and accurate feedback to users. With AJAX it’s possible to validate the data the user enters, while they are entering it. They can then receive feedback (using the server’s intelligence) without the page being posted back. For example an email validation field could check if the email address is valid using the DNS, without the user knowing.
· Data visualization – visualizing large datasets on the web can be difficult because there’s been no easy way to pull in more data as the user needs it. With AJAX it’s possible to show a view on the data, and simply load more in as needed. Again, Google Maps is a great example.
Here are some top tips for things you should consider when using AJAX:
· Give visual feedback - When a user clicks on something in the AJAX user interface, they need immediate visual feedback, just like when a button presses in on a standard form. Immediate feedback helps users, and makes them more efficient.
· Keep the Back button – make sure that the Back button in your application functions on every page of the site.
· Use links for navigation – avoid the temptation to use links as an interface on your AJAX application to change the state of your application. Users have been trained over ten years to expect a link to “take” them somewhere, so give them what they expect.
· Limit the scope of visual changes – when an AJAX call results in one or more changes to what the user sees, keep the changes local to the place where the user would expect them to be.
· Use human-readable links – people like to pass the addresses of useful web pages to each other. Make sure your application supports URLs that people can share easily, so not too long or complex.
· Don’t bloat the code – make sure that your application uses as little client-side scripting as possible. This reduces download time for the page and also reduces the processor requirements on the client browser, so results in a faster browser experience.
· Follow UI conventions – AJAX is a world of possibilities, but when it comes to user interface the best is invariably the familiar. If you’re creating a user interface for a specific feature, the place to start is by replicating an existing successful interface and looking at what your clients expect. Also remember that although it may be cool to implement drag-and-drop, few people may realize the interface relies on it.
· Don’t scroll – users like to feel in control, so if they have moved the scrollbar to a specific place, don’t move the page somewhere else.
· Reduce page loads – do as much as you can to reduce the number of page loads the user has to do to achieve their goal.
This was a quick overview on Ajax.
Although we are just beginning to realize its full potential, the proven success of famous AJAX-based projects like Google Maps signifies that this is not just media hype, but rather a promising technology that may change web-applications as we know them. Or for that matters, computer applications as we know them.
The purpose of this article is to help developers understand the core concept of AJAX, realize its benefits and suitable application scenarios, and of course, become aware of its drawbacks.
The pursuit of a development technique like AJAX came from the need for making web applications much more usable and eliminating their key disadvantages in comparison with the desktop platform:
· Poor Interactivity – web applications require that users wait for full page reloads after each interaction with the server. During the loading time they have to stare at a blank screen, which tremendously disturbs the whole experience. Although broadband internet connections are becoming a standard, web applications are also becoming increasingly complex and "heavy" so the overall waiting time remains relatively the same.
· Unresponsiveness – classic web applications transfer the complete form data to the server, which in turn renders and sends back the full HTML markup of the page to the browser. This happens during each postback and in most cases is highly inefficient, since only a small part of the interface is actually changed. However, lots of bandwidth is consumed and the performance is significantly hindered. This leaves users with the idea that web applications are slow by nature. Even worse, the user will often find the page has scrolled to a different position, causing disorientation.
· Simplistic Interfaces – the requirement for full page postback whenever the user interface has to be changed imposes hefty limitations on the degree of sophistication of web user interfaces. Rich and smooth interfaces with on-demand update could only be implemented using Flash technology. This approach, however, is impractical for general use since it is very complex and requires a much different set of skills than those possessed by the typical web developer. It can also cause end-user issues as a plug-in is often required.
· Low Usability – if a web application reloads the whole page because the user made a new selection on a form, they will get confused. It is often the case that web applications work in a confusing and esoteric way because the web application has been built around the standard, simple view of the Internet protocols. ASP.NET meant we could build applications with more functionality more quickly, usability has a way to go yet.
AJAX was born with the idea to change all this and narrow the functional gap between the desktop and the web. The new generation of AJAX-enabled applications delivers close-to-instantaneous performance, rich interfaces and tremendously improved user experience. It opens new horizons for much closer interaction with the application and demonstrates in practice what was until recently considered impossible:
· Real-time map panning in Google Maps and Virtual Earth is just like image panning in Adobe Photoshop
· Folder browsing, message previewing, etc. in Microsoft OutlookWeb Access is identical to that in the desktop version of Outlook.
· Validation checking on complex input fields can be performed by the server, without reloading the page.
What's interesting to know is that AJAX is not actually that new as a technology. It has been first used after Microsoft implemented Microsoft.XMLHTTP COM object that was part of The Microsoft® XML Parser distributive. As an ActiveX object in Internet Explorer 5, it was used to create the famous Outlook Web Access. You have probably seen AJAX in action for quite long in the MSDN Documentation treeview navigation. What is new actually is the name AJAX, which was widely accepted in 2005. Other labels for the same technology are Load on Demand, Asynchronous Requests, Callbacks, Out-of-band Calls, etc.
What's even more interesting is that AJAX is actually not a technology. It is more like a development technique that utilizes in a unique way a number of already mature technologies: HTML/XHTML, XML, DHTML, the XmlHttpRequest object, and JavaScript. For the purposes of simplicity we will refer to it as technology as it is widely accepted as such and provides a useful language to discuss the characteristics of the significant trend it represents.
The core idea behind AJAX is to make the communication with the server asynchronous, so that data is transferred and processed in the background. As a result the user can continue working on the other parts of the page without interruption. In an AJAX-enabled application only the relevant page elements are updated, only when this is necessary.
In contrast, the traditional synchronous (postback-based) communication would require a full page reload every time data has to be transferred to/from the server. This leads to the following negative effects:
· The user interaction with the application is interrupted every time a server call is needed, since a postback has to be made.
· The user has to wait and look at blank screen during each postback.
· The full page is being rendered and transferred to the client after each postback, which is time consuming and traffic intensive.
· Any information entered by the user will be submitted to the server, perhaps prematurely.
The AJAX-enabled applications, on the other hand, rely on a new asynchronous method of communication between the client and the server. It is implemented as a JavaScript engine that is loaded on the client during the initial page load. From there on, this engine serves as a mediator that sends only relevant data to the server as XML and subsequently processes server response to update the relevant page elements.
Below is a diagram of the complete lifecycle of an AJAX-enabled web form.
1. Initial request by the browser – the user requests the particular URL.
2. The complete page is rendered by the server (along with the JavaScript AJAX engine) and sent to the client (HTML, CSS, JavaScript AJAX engine).
3. All subsequent requests to the server are initiated as function calls to the JavaScript engine.
4. The JavaScript engine then makes an XmlHttpRequest to the server.
5. The server processes the request and sends a response in XML format to the client (XML document). It contains the data only of the page elements that need to be changed. In most cases this data comprises just a fraction of the total page markup.
6. The AJAX engine processes the server response, updates the relevant page content or performs another operation with the new data received from the server. (HTML + CSS)
The benefits of the AJAX development technique may look very attractive, but its practical implementation from scratch is usually a complex task, which only advanced developers can undertake. Among the pitfalls you will face are:
· Writing and Maintaining Complex JavaScript – building AJAX-enabled applications requires substantial JavaScript skills, which may turn to be a problem for a large number of .Net developers. Furthermore, the lack of good debugging tools for client-side script makes the process even more complicated.
· ViewState Management – ASP.NET web controls properly maintain their ViewState between postbacks. The same, however, does not apply for AJAX callbacks. As a result, developers need to figure a way for the proper management of the page ViewState.
· Breaking the Page Paradigm – AJAX requires a different way of thinking about a web-site, since the concept of a "Page" is no longer valid. In fact, AJAX applications may be considered as closer to the desktop-applications development approach. The fact that a Page no longer holds constant data leads to two important consequences – the Back button and bookmarking will no longer work as expected. Therefore, developers need to implement specific mechanisms for overcoming these two issues.
· Accessibility – the AJAX development technique fundamentally violates the requirements for accessibility. Since the page content is being updated dynamically, the changes may not be detected by accessibility tools like screen readers. Furthermore, some accessibility standards prohibit the use of JavaScript altogether, which practically eliminates the possibility for using AJAX.
· New UI Interactivity Requires Learning – the UI richness of AJAX-enabled application presents users with new and unexpected functionality. Although this is the main reason for using AJAX in the first place, it may require some learning.
The advantages of AJAX-enabled applications to classic ones can be summarized as follows:
· Better Performance and Efficiency – the key advantage of AJAX applications is the significantly higher performance, which is a result of the small amount of data transferred from the server. This makes the AJAX technique especially beneficial for data-intensive applications (e.g. displaying rich reports, browsing through large data structures) as well as for low-bandwidth networks.
· More Responsive Interfaces – the improved performance leads to much more responsive interfaces, which create the illusion that updates are happening instantly. As a result the AJAX web applications appear to behave much like their desktop counterparts.
· Reduced or Eliminated "Waiting" Time – in AJAX-based applications only the relevant page elements are updates, with the rest of the page remaining unchanged. This approach eliminates the white screen (or page flicker on faster connections) and significantly decreases the idle waiting time.
· Increased Usability – as the web application is more efficient through the use of AJAX, and the client can communicate with the server without page-loads, it becomes possible to build some wonderful user interfaces that fit much better with users’ needs and expectations.
· Users Can Work with the Rest of the Page – many AJAX-based applications allow you to continue working with the rest of the page, while data is being transferred in the background. This further adds to the uninterrupted manner of the end-user experience.
The following are scenarios where it’s more likely to be beneficial to use AJAX functionality:
· Highly interactive applications - where an application is highly interactive, it may provide benefits to use AJAX to allow the interactivity without the time cost of page reloads. A good example of a highly interactive web site is Google Maps.
· Parts of pages – AJAX is best used in key places throughout a web site where it adds significant value. There is little or no value in using AJAX to provide the majority of your page content – you may lose browser compatibility, make the application overly complex and cause problems with the site being indexed in search engines.
· Intranets – on an internal web site the bandwidth is much higher so more AJAX usage can be successful. It’s often the case that intranets involve working with data, and this is often a good application for AJAX.
· Online wizards – linear user interfaces that collect a large series of data are a well-known challenge in web applications, and can be implemented using AJAX in a way where the user feels more in control and the application is more responsive.
· Data input & validation – before AJAX it was hard to build anything resembling rich data input forms that give clear and accurate feedback to users. With AJAX it’s possible to validate the data the user enters, while they are entering it. They can then receive feedback (using the server’s intelligence) without the page being posted back. For example an email validation field could check if the email address is valid using the DNS, without the user knowing.
· Data visualization – visualizing large datasets on the web can be difficult because there’s been no easy way to pull in more data as the user needs it. With AJAX it’s possible to show a view on the data, and simply load more in as needed. Again, Google Maps is a great example.
Here are some top tips for things you should consider when using AJAX:
· Give visual feedback - When a user clicks on something in the AJAX user interface, they need immediate visual feedback, just like when a button presses in on a standard form. Immediate feedback helps users, and makes them more efficient.
· Keep the Back button – make sure that the Back button in your application functions on every page of the site.
· Use links for navigation – avoid the temptation to use links as an interface on your AJAX application to change the state of your application. Users have been trained over ten years to expect a link to “take” them somewhere, so give them what they expect.
· Limit the scope of visual changes – when an AJAX call results in one or more changes to what the user sees, keep the changes local to the place where the user would expect them to be.
· Use human-readable links – people like to pass the addresses of useful web pages to each other. Make sure your application supports URLs that people can share easily, so not too long or complex.
· Don’t bloat the code – make sure that your application uses as little client-side scripting as possible. This reduces download time for the page and also reduces the processor requirements on the client browser, so results in a faster browser experience.
· Follow UI conventions – AJAX is a world of possibilities, but when it comes to user interface the best is invariably the familiar. If you’re creating a user interface for a specific feature, the place to start is by replicating an existing successful interface and looking at what your clients expect. Also remember that although it may be cool to implement drag-and-drop, few people may realize the interface relies on it.
· Don’t scroll – users like to feel in control, so if they have moved the scrollbar to a specific place, don’t move the page somewhere else.
· Reduce page loads – do as much as you can to reduce the number of page loads the user has to do to achieve their goal.
This was a quick overview on Ajax.