Welcome!

Machine Learning Authors: Liz McMillan, William Schmarzo, Zakia Bouachraoui, Yeshim Deniz, Kevin Benedict

Related Topics: Machine Learning

Machine Learning : 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 [email protected]

Comments (4)

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.


CloudEXPO Stories
In his general session at 21st Cloud Expo, Greg Dumas, Calligo’s Vice President and G.M. of US operations, discussed the new Global Data Protection Regulation and how Calligo can help business stay compliant in digitally globalized world. Greg Dumas is Calligo's Vice President and G.M. of US operations. Calligo is an established service provider that provides an innovative platform for trusted cloud solutions. Calligo’s customers are typically most concerned about GDPR compliance, application performance guarantees & data privacy.
Your homes and cars can be automated and self-serviced. Why can't your storage? From simply asking questions to analyze and troubleshoot your infrastructure, to provisioning storage with snapshots, recovery and replication, your wildest sci-fi dream has come true. In his session at @DevOpsSummit at 20th Cloud Expo, Dan Florea, Director of Product Management at Tintri, provided a ChatOps demo where you can talk to your storage and manage it from anywhere, through Slack and similar services with Tintri's web services architecture and APIs. Impress your DevOps team with smart and autonomous infrastructure.
In today's enterprise, digital transformation represents organizational change even more so than technology change, as customer preferences and behavior drive end-to-end transformation across lines of business as well as IT. To capitalize on the ubiquitous disruption driving this transformation, companies must be able to innovate at an increasingly rapid pace.
In his session at 21st Cloud Expo, James Henry, Co-CEO/CTO of Calgary Scientific Inc., introduced you to the challenges, solutions and benefits of training AI systems to solve visual problems with an emphasis on improving AIs with continuous training in the field. He explored applications in several industries and discussed technologies that allow the deployment of advanced visualization solutions to the cloud.
In his keynote at 19th Cloud Expo, Sheng Liang, co-founder and CEO of Rancher Labs, discussed the technological advances and new business opportunities created by the rapid adoption of containers. With the success of Amazon Web Services (AWS) and various open source technologies used to build private clouds, cloud computing has become an essential component of IT strategy. However, users continue to face challenges in implementing clouds, as older technologies evolve and newer ones like Docker containers gain prominence. He explored these challenges and how to address them, while considering how containers will influence the direction of cloud computing.