3 Apr 2017

Ajax (Asynchronous Java script And XML)

 Introduction

In Jesse Garrett’s original article that coined the term, it was AJAX. The “X” in AJAX really stands for XML HTTP Request though, and not XML. Jesse later conceded that Ajax should be a word and not an acronym and updated his article to reflect his change in heart. So “Ajax” is the correct casing. As its name implies, Ajax relies primarily on two technologies to work: JavaScript and the XML HTTP Request. Standardization of the browser DOM (Document Object Model) and DHTML also play an important part in Ajax’s success, but for the purposes of our discussion we won’t examine these technologies in depth.

How Ajax Works

At the heart of Ajax is the ability to communicate with a Web server asynchronously without taking away the user’s ability to interact with the page. The XML HTTP Request is what makes this possible. Ajax makes it possible to update a page without a refresh. By Ajax, we can refresh a particular DOM object without refreshing the full page. Let’s see now what actually happens when a user submits a request:

  1. Web browser requests for the content of just the part of the page that it needs.
  2. Web server analyzes the received request and builds up an XML message which is then sent back to the Web browser.
  3. After the Web browser receives the XML message, it parses the message in order to update the content of that part of the page.

The XML HTTP Request object is part of a technology called Ajax (Asynchronous JavaScript and XML). Using Ajax, data could then be passed between the browser and the server, using the XML HTTP Request API, without having to reload the web page. With the widespread adoption of the XML HTTP Request object it quickly became possible to build web applications like Google Maps, and Gmail that used XML HTTP Request to get new map tiles, or new email without having to reload the entire page.

Ajax requests are triggered by JavaScript code; your code sends a request to a URL, and when it receives a response, a callback function can be triggered to handle the response. Because the request is asynchronous, the rest of your code continues to execute while the request is being processed, so it’s imperative that a callback be used to handle the response. 

Steps of AJAX Operation

  • A client event occurs.
  • An XML HTTP Request object is created.
  • The XML HTTP Request object is configured.
  • The XML HTTP Request object makes an asynchronous request to the Webserver.
  • The Webserver returns the result containing XML document.
  • The XML HTTP Request object calls the callback() function and processes the result.
  • The HTML DOM is updated.