Welcome!

Machine Learning Authors: Pat Romanski, Liz McMillan, Yeshim Deniz, Elizabeth White, Zakia Bouachraoui

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
On-premise or off, you have powerful tools available to maximize the value of your infrastructure and you demand more visibility and operational control. Fortunately, data center management tools keep a vigil on memory contestation, power, thermal consumption, server health, and utilization, allowing better control no matter your cloud's shape. In this session, learn how Intel software tools enable real-time monitoring and precise management to lower operational costs and optimize infrastructure for today even as you're forecasting for tomorrow.
Isomorphic Software is the global leader in high-end, web-based business applications. We develop, market, and support the SmartClient & Smart GWT HTML5/Ajax platform, combining the productivity and performance of traditional desktop software with the simplicity and reach of the open web. With staff in 10 timezones, Isomorphic provides a global network of services related to our technology, with offerings ranging from turnkey application development to SLA-backed enterprise support. Leading global enterprises use Isomorphic technology to reduce costs and improve productivity, developing & deploying sophisticated business applications with unprecedented ease and simplicity.
While a hybrid cloud can ease that transition, designing and deploy that hybrid cloud still offers challenges for organizations concerned about lack of available cloud skillsets within their organization. Managed service providers offer a unique opportunity to fill those gaps and get organizations of all sizes on a hybrid cloud that meets their comfort level, while delivering enhanced benefits for cost, efficiency, agility, mobility, and elasticity.
DevOps has long focused on reinventing the SDLC (e.g. with CI/CD, ARA, pipeline automation etc.), while reinvention of IT Ops has lagged. However, new approaches like Site Reliability Engineering, Observability, Containerization, Operations Analytics, and ML/AI are driving a resurgence of IT Ops. In this session our expert panel will focus on how these new ideas are [putting the Ops back in DevOps orbringing modern IT Ops to DevOps].
Darktrace is the world's leading AI company for cyber security. Created by mathematicians from the University of Cambridge, Darktrace's Enterprise Immune System is the first non-consumer application of machine learning to work at scale, across all network types, from physical, virtualized, and cloud, through to IoT and industrial control systems. Installed as a self-configuring cyber defense platform, Darktrace continuously learns what is ‘normal' for all devices and users, updating its understanding as the environment changes.