Asynchronous JavaScript and XML (AJAX)

asynchronous JavaScript and XML (AJAX)Anjan ThapaliyaAbstractAJAX stands for Asynchronous JavaScript and XML. It is a nett engineering that evolved in ahead of time 2000 and engrosss a amalgamate of technology ilk JavaScript and XML. This paper discusses ab come out how AJAX technology entire works in forward-looking mesh practise and various advantages and disadvantages. This paper to a fault discusses about various frameworks for sale for AJAX that net be apply on discordent computer programs.HistoryIn the past, when thither was no such thing as AJAX, the tissue situations needed to load each and every time for retrieving even small bits of information from the emcee or processing a tiniest client solicit, which make the net pageboys very ineffective. every time there is a page refresh, it honk consumed some bandwidth and put some load on the petition processing calculateer. In cast to overcome this cycle of request- resolution, and bring mandatory ent ropy from the horde without having to curb a round trip, Microsoft came up with iframe technology is as early as 1999 nevertheless it was clunky and non efficient. The core of todays AJAX technology, cognize as XMLHTTP butt was jump implemented by Microsoft Outlook in 1999. The term AJAX itself was first used my Jesse James in peerless of his articles in 2005 to talk about this vernal technology. W3C came up with its first round of sustenance for the XMLHttpRequest and tendered it a meshing standard in 2006.Classic wind vane application vs. Ajax nett applicationAJAX has transformed how heap view at webpages from a simple HTML document into a high-energy web application. The early web puts rendered the webpage as a plain HTML pages. It lacked features bid dynamic updates and synchronization with services and legions. The web server in classic web applications performed all the serving up replys to requests with each round trip. Due to this strike of constant ser ver round trips, web sites in the early 2000 performed sick and were not as dynamic in terms of updates and synchronization.On the contrary, AJAX establish web sites perform better in terms of faster adaptation and quicker updates. Not all the entropy processing is done on the sever human face, as a connection is silently made to the server in the bearground which responds back by giving back the required selective information in some format like XML or JSON. The resulted data is then formatted utilise 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 brand-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 much efficient web applications. AJAX frees web sites from the need to piazza the whole webpage back to the server for s mall piece of information and lets pages or parts of a page update by receiving small chunks of data from the server magi nookiecely slowly the mount without drug users b atomic number 18ly noticing the page refresh. This is what is referred to when people talk about the Asynchronous behavior of AJAX. In a tradition intellect, a classic web site al manners has to defecate an event send some tolerant of request to the server which will then result a solvent beingness sent back to the client from the server. That usually essence, only one request can be responded at a time and every subsequent request have to wait until the previous requests have been process by the server. When a user clicks on a release, that will set out some kind of event resulting in either post or get request to the server, which will need to be processed by the server first and then the right view is served up to the user. today this can happen slow 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 cigarette 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 AJAXJavaScript It is a client side scripting language interpreted by browsers. JavaScript is one of the most outstanding components of AJAX technologies. It is responsible for(p) 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 respons e of an AJAX call doesnt just have to be in XML format, but it can as well 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 boilersuit state of the browser.CSS CSS stands for Cascading Style Sheet and is used to present data or document in a legitimate style. It is the language to decorate the content, fundamentally separating the style from the actual content.XMLHttpRequest XMLHttpRequest is probably one of the most powerful JavaScript Objects that has properties and methods to sincerely change the overall architecture of todays modern web application. It was designed by Microsoft and are now widely being adopt 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 small-arm the user is doing something else without really modify users 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 ongoing 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 methodsabort () This methods basically cancels an asynchronous call being made to a server.getAllResponseHeaders () This methods returns all headers information as a filament. 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 give lessons 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 objectonreadystatechange This property determines which recall function to call when the readyState property changesreadyState It is the current status of XMLHttpRequest object and can have any possible value 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 responseresponseXML 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 invigoration cycleThe 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 locomotive is first loaded and initialized before any AJAX related military 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 followsA user requests a webpage with AJAX implementation in his/h. varlet 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 equal any other web application framework, people have actual 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 absorbed 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 variant platforms and languages. Some of the notable AJAX frameworks are listed belowFor .NET web applications ASP.NET Ajax FrameworkWeb.Ajax For PHP web applicationsTigermouseZephyrPherryFor Java web applicationsSalto AjaxBuffalo AjaxApache WicketFor JavaScript based web applicationsjQueryPrototypeAtom.js etc.Real World Usage of AJAXLive searches It is an important feature in modern search engines made possible by AJAX. Users dont 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 entranceway 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 now alternatively 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 pag e which helps user see updates and communicate with people real time. Chat web applications like meebo use AJAX extensively to enkindle the chat experience.Drag and set down 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 mechanically 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 AJAXThere are many web sites and applications that use AJAX nowadays. The most prominent and early adopters are sites like YouTube, Google purposes, Gmail, Facebook etc. Facebook seems to have great implementation of AJAX as the posts and updates are show almost instantaneously and doesnt need any page refresh. AJAX implementation in Facebook site is what does the trick in instant updates of user status, messages etc. A Google affair 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 doesnt have to reload to reflect the new changes. Gmail also uses AJAX for variety of useful features like spell check, auto save fractional as drafts, fetching new emails etc. Flickr uses AJAX in its site for load up pictures in a picture carousel manner where when a user clicks for next picture, 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 disadvantagesAJAX has become a vita l aspect of modern web application. AJAX has many advantages but it does also have some disadvantages. hither are some advantages and disadvantages of AJAXAdvantagesAJAX helps lessen the round trips between the client and the server.A sites overall response time will be a lot faster.Open source JavaScript libraries like JQuery, Prototype, etc. for emergenceDisadvantagesAJAX is an extra abstraction layer and will complicate design and cultivationSecurity is a concern since files are downloaded client side.AJAX based web pages are not indexed for search.Browsers with JavaScript turned off wont be able to render AJAX web sites.SummaryAjax 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 hunch that AJAX has its own advantages and disadvantages. I t 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.ReferencesSaikrishna. (2012, June 9).AJAX Asynchronous JavaScript and XML. RetrievedJuly20, 2014, from http//wegonemad.blogspot.com/2012/06/ajax.htmlAdvantages of using Ajax in your website BounceWeb Web Hosting Blog. (n.d.). Retrieved fromhttp//blog.bounceweb.com/advantages-of-using-ajax-in-your-website/Ajax A New Approach to Web Applications adjustive Path. (n.d.). Retrieved from http//www.adaptivepath.com/ideas/ajax-new-approach-web-applications/Ajax History Information. (n.d.). Retrieved fromhttp//www.xmluk.org/ajax-history-and-information.htmAjax pros and cons. (n.d.). Retrieved fromhttp//www.jscripters.com/ajax-disadvantages-and-advantages/Codeproject. (). What is AJAX? Retrieved fromhttp//www.codeproject.com/Articles/534632/WhatplusisplusAJAX-3fGetting Started AJAX MDN. (n.d.). Retrieved fromhttps//developer.mozilla.org/en-US/docs/AJAX/Getting_StartedThe characteristics of Ajax Applications. (n. d). Retrieved from http//www.openajax.org/member/wiki/images/8/89/NexawebAjaxCharacteristics.pdf