Asynchronous JavaScript and XML (AJAX)

Asynchronous JavaScript and XML (AJAX) Anjan Thapaliya Abstract AJAX stands for Asynchronous JavaScript and XML. It is a web technology that evolved in early 2000 and uses a mix of technology like JavaScript and XML. This paper discusses about how AJAX technology works in modern web application and various advantages and disadvantages. This paper also discusses about various frameworks available for AJAX that can be used on different platforms. History In the past, when there was no such thing as AJAX, the websites needed to reload each and every time for retrieving even small bits of information from the server or processing a tiniest client request, which made the webpages very inefficient. Every time there is a page refresh, it put consumed some bandwidth and put some load on the request processing server. In order to overcome this cycle of request-response, and fetch required data from the server without having to make a round trip, Microsoft came up with iframe technology is as early as 1999 but it was clunky and not efficient. The core of today’s AJAX technology, known as XMLHTTP object was first implemented by Microsoft Outlook in 1999. The term â€Å"AJAX itself was first used my Jesse James in one of his articles in 2005 to talk about this new technology. W3C came up with its first round of documentation for the XMLHttpRequest and called it a web standard in 2006. Classic web application vs. Ajax web application AJAX has transformed how people view at webpages from a simple HTML document into a dynamic web application. The early web sites rendered the webpage as a plain HTML pages. It lacked features like dynamic updates and synchronization with services and servers. The web server in classic web applications performed all the serving up responses to requests with each round trip. Due to this overhead of constant server round trips, web sites in the early 2000 performed poorly and were not as dynamic in terms of updates and synchronization. On the contrary, AJAX based web sites perform better in terms of faster rendering and quicker updates. Not all the data processing is done on the sever side, as a connection is silently made to the server in the background which responds back by giving back the required data in some format like XML or JSON. The resulted data is then formatted using XSLT or CSS in the client side for a better rendering of the view. The diagram below shows how websites in the past differ from modern web sites that make use of AJAX technology: (Ajax: A New Approach to Web Applications, J. Garrett, 2005) What is AJAX? AJAX is a modern web technology that leverages a bunch of existing web technologies to create faster and more efficient web applications. AJAX frees web sites from the need to post the whole webpage back to the server for small piece of information and lets pages or parts of a page update by receiving small chunks of data from the server magically behind the scene – without users barely noticing the page refresh. This is what is referred to when people talk about the â€Å"Asynchronous† behavior of AJAX. In a tradition sense, a classic web site always has to have an event send some kind of request to the server which will then result a response being sent back to the client from the server. That usually means, only one request can be responded at a time and any subsequent request have to wait until the previous requests have been processed by the server. When a user clicks on a button, that will trigger some kind of event resulting in either post or get request to the s erver, which will need to be processed by the server first and then the right view is served up to the user. Now this can happen behind the scene without the browser needing to do a complete post back to the server. The advantage of asynchronous call is that data can still be requested from a server without a complete post back to the server and all happens behind the scene and the user is barely affected by what is going on behind the scene. Instead of having to wait for the response result, pages or even parts of a page load asynchronously. What make up AJAX? AJAX is not a new programming language, nor is it just one new technology. It is rather a mix of existing technologies. The following make up the AJAX: JavaScript: It is a client side scripting language interpreted by browsers. JavaScript is one of the most important components of AJAX technologies. It is responsible for capturing user events and making a call to the server asynchronously for the needed data. Today, there are many JavaScript libraries like jQuery that have simplified how AJAX calls are made and in what format are the response data received. Since the advent of JSON, the response of an AJAX call doesn’t just have to be in XML format, but it can also be in JSON format. DOM: DOM stands for Document Object Model, which means it is a JavaScript Object model of an HTML document or XML document. It is the way JavaScript sees its content and structure. It is an object that includes how the HTML/XHTML/XML is formatted, as well as the overall state of the browser. CSS: CSS stands for Cascading Style Sheet and is used to present data or document in a certain style. It is the language to decorate the content, essentially separating the style from the actual content. XMLHttpRequest: XMLHttpRequest is probably one of the most powerful JavaScript Objects that has properties and methods to really change the overall architecture of today’s modern web application. It was designed by Microsoft and are now widely being adopted and by IT giants like Google, Mozilla, and Apple etc. This JavaScript provides an easy mechanism to fetch data from a URL without having to do a complete post back to the server over either http or ftp protocols. A web page can have a part of it doing something dynamically through the use of this object while the user is doing something else without really affecting user’s interaction with the page in any manner. XMLHttpRequest object has various properties and methods to open, close or cancel connection to a server and fetch data or send status of current request whether it is a success or failure etc. Below are some of the important properties and methods commonly used in AJAX based web applications. XMLHttpRequest object has following six methods abort (): This methods basically cancels an asynchronous call being made to a server. getAllResponseHeaders (): This methods returns all headers information as a string. getResponseHeader (header): It returns string containing header information or null if there is no header in the response at all or response is not sent out yet. open (method, url): This method is used to initiate a request call to a server. send (body): This method is used to send a browser request to the server, irrespective of whether it is synchronous or not. setRequestHeader (header, value): This method is used to set the HTTP request header to a certain value. There are six important properties of the XMLHttpRequest object: onreadystatechange: This property determines which callback function to call when the readyState property changes readyState: It is the current status of XMLHttpRequest object and can have any possible values from 0 to 4, where each values have a certain meaning. 0: The request has not been initialized. 1: The AJAX call has established connection to the server. 2: request received: The AJAX call request has been received by the server. 3: The AJAX call request is being processed. 4: The AJAX call request has completed and the response is ready. responseText: It returns a string which contains the body of the response responseXML: It retrieves the response body as XML DOM Object. status: Indicates what the current HTTP status code is like 200 for OK and 404 for server not found etc. statusText: It retrieves a friendly HTTP status of an AJAX request. Ajax Event life cycle The below diagram show the lifecycle of AJAX events in a web application (AJAX Asynchronous JavaScript and XML, Saikrishna, 2009): When a user visits an AJAX web site, the engine is first loaded and initialized before any AJAX related operation. The Ajax engine basically works around the two processes shown in cyan boxes in the above picture. The lifecycle of an AJAX operation is as follows: A user requests a webpage with AJAX implementation in his/h. Page is loaded in computer browser. User interacts with the site and creates an event, like a button or a link clicking. The click event initiates the AJAX call, and sends a data request to the server and also specifies how the needed data should be returned back, either as XML or JSON etc. The server resolves and processes the request and also prepares the response data in the required format. Server responds to the client browser with the requested data. A callback function gets the data, and transforms and updates the web page. This happens all behind the scene and user will never have to see his/her page post back to the server like the regular web pages do. Ajax Frameworks Like any other web application framework, people have developed various frameworks around AJAX so that an these frameworks can be used on a specific platform, with a specific language etc. and basically provides API for developers to easily make use of AJAX technologies in more efficient and abstracted manner. These frameworks have unique components to accept request or process request using AJAX and are adapted to a particular language platform like ASP.NET or PHP etc. There are many AJAX frameworks for different platforms and languages. Some of the notable AJAX frameworks are listed below: For .NET web applications: ASP.NET Ajax Framework Web.Ajax For PHP web applications: Tigermouse Zephyr Pherry For Java web applications: Salto Ajax Buffalo Ajax Apache Wicket For JavaScript based web applications: jQuery Prototype Atom.js etc. Real World Usage of AJAX: Live searches: It is an important feature in modern search engines made possible by AJAX. Users don’t have to type the whole thing and autocomplete kicks in as soon as few letters are typed in and the expected results show up instantly as we start entering the term we are looking for. When we visit the large search engine sites like Google or Bing and search for anything, then we get the autocompleting service as well as list of matching results instantaneously instead of having to wait for the server to process and send back the results. In the below figure, while searching for Chicago Airport, the auto-completion kicks in and the user can see a list of his/her choices. Real time messaging and chat with Ajax: Ajax updates social media pages like Facebook and twitter pages without refreshing the page which helps user see updates and communicate with people real time. Chat web applications like meebo use AJAX extensively to enhance the chat experience. Drag and drop: One of the important features of Ajax is that it lets users drag and drop files and plugins on a webpage and such drag/drop events are automatically persisted to the server. This can be seen in cloud storage sites like dropbox or onedrive. Instant login feedback: When user enters the wrong login credentials, then the login failure response is instantaneous, instead of having for the page to post back to the server and the failed response to come back to the user. Real world Users of AJAX There are many web sites and applications that use AJAX nowadays. The most prominent and early adopters are sites like YouTube, Google maps, Gmail, Facebook etc. Facebook seems to have great implementation of AJAX as the posts and updates are show almost instantaneously and doesn’t need any page refresh. AJAX implementation in Facebook site is what does the trick in instant updates of user status, messages etc. A Google map is one of the oldest and the most popular AJAX based web application. The Google map fetches XML data of the places a user is looking for and transforms the received data into complex map imagery. Users can drag locations around or zoom in and out and the page doesn’t have to reload to reflect the new changes. Gmail also uses AJAX for variety of useful features like spell check, auto save incomplete as drafts, fetching new emails etc. Flickr uses AJAX in its site for loading pictures in a picture carousel manner where when a user clicks for next pict ure, there is no page refresh, the click of the next button simply fetches the next pictures and presents the user with the next picture – which makes perfect sense because there is not really a need to refresh the whole site to just to retrieve one photo in a current sequence of photos. Advantages and disadvantages AJAX has become a vital aspect of modern web application. AJAX has many advantages but it does also have some disadvantages. Here are some advantages and disadvantages of AJAX: Advantages: AJAX helps lessen the round trips between the client and the server. A site’s overall response time will be a lot faster. Open source JavaScript libraries like JQuery, Prototype, etc. for development Disadvantages: AJAX is an extra abstraction layer and will complicate design and development Security is a concern since files are downloaded client side. AJAX based web pages are not indexed for search. Browsers with JavaScript turned off won’t be able to render AJAX web sites. Summary Ajax is a great technology and should be used when sites have a lot of plugins on a page and each need to refresh dynamically. AJAX makes a site more dynamic and performance is improved significantly as it cuts down on the number of post backs the page has to go through. It is also important to know that AJAX has its own advantages and disadvantages. It is important to distinguish which web applications require AJAX and which ones can do without it. Very simple web pages with very little data interactivity can probably do away with AJAX. Developers should always focus on the requirements of the site and wisely if AJAX is necessary or not to match the requirement. References Saikrishna. (2012, June 9).AJAX Asynchronous JavaScript and XML. RetrievedJuly20, 2014, from http://wegonemad.blogspot.com/2012/06/ajax.html Advantages of using Ajax in your website | BounceWeb Web Hosting Blog. (n.d.). Retrieved from  http://blog.bounceweb.com/advantages-of-using-ajax-in-your-website/ Ajax: A New Approach to Web Applications | Adaptive Path. (n.d.). Retrieved from http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/ Ajax History Information. (n.d.). Retrieved from  http://www.xmluk.org/ajax-history-and-information.htm Ajax pros and cons. (n.d.). Retrieved from  http://www.jscripters.com/ajax-disadvantages-and-advantages/ Codeproject. (). What is AJAX? Retrieved from  http://www.codeproject.com/Articles/534632/WhatplusisplusAJAX-3f Getting Started AJAX | MDN. (n.d.). Retrieved from  https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started The characteristics of Ajax Applications. (n. d). Retrieved from http://www.openajax.org/member/wiki/images/8/89/NexawebAjaxCharacteristics.pdf