Contact Us

How AJAX Works

16:14:01 12/18/2016

AJAX is the new miracle pill for developers. It is what every developer wants, desires, needs and dreams of. Using AJAX the developer can:

  1. Update web pages without having to reload the pages

  2. After loading the page the developer can have data requested from the server

  3. Even once the page has been loaded, data can still be received from the server

  4. Data can be sent to the server from the background.

AJAX is something that all developers like as it helps them to do so much more than was earlier capable of. It helps them to use JavaScript functions for calling methods from webpage requests, web services and more in response or when a response is needed. It helps in parsing of response data using DOM. It also helps in retrieving of Asynchronous data using XmlHttpRequest.

Based on the above the basic misconception would be that AJAX is probably a programming language. It is not. It stands for Asynchronous JavaScript and XML. It combines a built in XMLHttpRequest Object which is browser built in so that data can be requested from web servers. It also uses HTML DOM and JavaScript to display data or to use it as well.

The AJAX applications use XML for transporting of data but they also transport data using JSON text or plain text as well. Using it web pages can be asynchronously updated with data being exchanged behind the scenes with the web server. Thereby, parts are possible to be updated without the whole page being reloaded.

The breakdown of how AJAX works is:

  1. There is an event which occurs in the webpage. This could be the loading of the page or clicking of a button

  2. The creation of the XMLHttpRequest object is done through JavaScript

  3. The request is sent to the web server regarding the XMLHttpRequest object

  4. The request is then processed by the server

  5. The response is sent back to the web page by the server

  6. JavaScript then reads the response

  7. JavaScript then performs the proper action needed like updating the page 

AJAX allows the server side of applications to communicate with the client side. Earlier there used to not be a way for the server directly to communicate with the client side of the application and therefore, it was necessary to load the page. With AJAX however, the communication between the server side and the client side can freely take place.

In typical web requests which used to be there earlier, when a URL request was sent to the server, the response from the server would be through the CSS, HTML or corresponding JavaScript. This would generate a completely new page in the browser. 

However, in AJAX, the entire procedure is a contrasting one. In this the HTML, CSS as well as JavaScript already is loaded and rather than have the URL request for a complete new page, the JavaScript communicates with the server and so smaller pieces of information are received from the server and this could be in different formats like JSON, XML or it could even be HTML. Based on this the JavaScript acts on the response and then the page is updated accordingly. This prevents the entire page from being refreshed completely.

A typical AJAX request has the URL where the request is being made, it consists of the settings which are used to handle various responses. The callbacks which are used to make up the settings are:

  1. What should be done if the URL request is deemed as successful.

  2. What should be done if the URL request is deemed as unsuccessful

  3. What should be done and how long should the URL be allowed to continue running before there is an error message which is displayed 

  4. There are also beforesend which is run before the request is made. This is a place where usually a spinner is put into place. Complete on the other hand is what is run when either the URL request has been successfully run or if it has not been successfully run. This is usually the place where the spinner is stopped.

AJAX has helped in sending of asynchronous requests. Infact this is a huge improvement for those that are web developers. The reason is that the tasks which are usually performed on the server consume a lot of time. This could result in the applications hanging or stopping. However, when the data is sent asynchronously, JavaScript does not need the server to respond first instead other scripts can be executed when the server response is being awaited and it also does not need to wait for the server before dealing with the response whenever the response is ready. 

This is the overview of how AJAX functions and generally works.


Contact us Ajax Cart: First steps Copyright ©2016 - 2018 Developed by Oleg Khorev