Shaurabh Bharti

Subscribe to Shaurabh Bharti: eMailAlertsEmail Alerts
Get Shaurabh Bharti: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: RIA Developer's Journal, Apache Web Server Journal

RIA & Ajax: Article

Tips & Tricks: AJAX – Not Just Limited to XMLHttpRequest

"There are many alternative ways of dynamically changing the current page, without refreshing it"

There are many alternative ways of dynamically changing the current page, without refreshing it, writes Shaurabh Bharti, in this AJAX-focused discussion of some of synchronous communication using the POST method instead of the more usual asynchronous communication using GET method.

This tutorial starts with an Introduction followed by a short discussion on AJAX merits and demerits. The following section is about Implementation, where most of issues concerned have been handled. It's followed by a complete running example code, which can be simply taken and run on local server. T finish, alternative techniques to AJAX besides XMLHttpRequest will be explained.

Why Ajax?
Dynamic HTML pages have been around for a while. Using JavaScript and HTML DOM objects, new sections can be added to a current page and existing sections may be removed, giving a different experience. However, very few if any pages work without some interaction with the server or a backend application supporting the page for different actions. Traditional ways have been painful for 2 main reasons:

1. The whole page should not be refreshed, providing that only a small part of page has changed (or is to be changed) depending on new data. 2. There is no commonly accepted direct way (standard) to invoke server script and receive response.

This is where Ajax comes in, where it provides THE XMLHttpRequest object for such interaction. Ajax is used for small data exchange to and from the server, when reloading whole page isn't required and changing the page dynamically is enough for user experience. This is the case when most part of page remains same after client-server interaction. Hence, it supports small interactive sessions with user like updating/deleting records, adding new elements in web forms, display simple search queries etc. This makes interaction more user-friendly, as reloading the whole page takes much more time than this.

Another advantage with XMLHttpRequest is that it is supported by all the major vendors of Internet browsers. Compatibility between cross-platform applications is no longer a big issue.

Issues with Ajax
However, even with these simple functionalities, Ajax has certain issues to deal with. First and foremost comes the use of Back button. Users always expect to undo their mistakes by going back to their History. However, little scope is left for such interaction where pages are updated dynamically without being refreshed. This issue is important, and may be handled by using invisible iFrames, which keeps track of changes, and hence can be used to recover history.

Another issue could be bookmarking a particular Web page at a particular stage. This can be achieved by editing the URL fragment identifier. It may be used to keep track of different stages of interaction by user.

Another issue may be latency. Latency of a response may vary depending upon network, and hence might not give the same interaction to user every time. In addition, it also requires JavaScript to be enabled on the browser.

Implementation

The XMLHttpRequest object is the heart of AJAX. This object (an ActiveX object) is initialized in different ways depending upon browser in use. here are the most common steps to initiate this object in most browsers:

 

            var xmlhttp = false;

 

            var xmlhttp = false;

 

            var xmlhttp = false;

 

            var xmlhttp = false;

 

            var xmlhttp = false;

function initXMLHttpRequest() {

    // for mozilla and safari

    if(window.XMLHttpRequest) {

      try {

       xmlhttp = new XMLHttpRequest();

        } catch(e) {

      xmlhttp = false;

        }

 

 

    // for IE windows

    } else if(window.ActiveXObject) {

            try {

            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

            } catch(e) {

            try {

               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

            } catch(e) {

              xmlhttp = false;

         }

    }

 

 

The following code returns an initialized XMLHttpRequest for most browsers. However, don’t be surprised if it remains false as old browsers don’t support this object. Note that ‘xmlhttp’ has been defined as global variable. It helps access its response by any function in the page. Now, as our object is ready to do operations, let's look into multiple methods and attributes XMLHttpRequest supports.

More Stories By Shaurabh Bharti

Shaurabh Bharti is a Junior Research Associate at Software Engineering and Technology Labs, Infosys Technologies Ltd. He works with Web Services Center of Excellence (WSCoE) team. A Computer Science graduate from IIT Kharagpur, he has been working with the team for almost an year. His current research interests include Semantic Web, Web Service, Contextual Collaboration etc. He has actively participated and conducted training sessions and workshops for Service Oriented Architecture and Web Services. He has also published papers in leading Journals and Conferences for Web Services including ICWS and IJWSP. He was one of the invited speakers at SOA and Web Services Seminar conducted by Vibrant Tech., Bangalore. He can be contacted at Shaurabh_Bharti@infosys.com.

Comments (4) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
Shaurabh Bharti 04/29/06 03:59:05 AM EDT

Thanks a lot to all of you to read my article with such large number.

Shaurabh Bharti 04/24/06 04:43:52 PM EDT

Thanks for your comments!
However, I really dont think that because certain brwosers dont support javascript is a hindrance to web development. More than 90-95% hits on network happen with a javascript-enabled browser. Hence, improving UI functionality using them is quite worth to services offered via web.

AJAX head rush 04/22/06 08:19:39 AM EDT

With Head Rush Ajax, in no time you'll be writing JavaScript code that fires off asynchronous requests to web servers...and having fun doing it.

By the time you've taken your dynamic HTML, XML, JSON, and DOM skills up a few notches, you'll have solved tons of puzzles, figured out how well snowboards sell in Vail, and even watched a boxing match.

Sound interesting? Then what are you waiting for?

Web 2.0 Nonsense 04/22/06 07:31:50 AM EDT

I cant help but think the Web 2.0 obsession is getting out of hand. Its "poster child" is AJAX and, while this is useful, there are massive limitations to its implementation.

Add to this the potential learning curves involved and round off with the browser problems (what happens if the client doesn't have a JS enabled browser?) - all of a sudden it seems that this is actually a niche technology.

If you are designing a cutting edge site, geared to impress other web designers with your jedi-like editing powers then go for it. Web 2.0 your site to death.

If however, you are designing a site for the general public then steer clear.