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.