Mikke.Learns

What is AJAX?

February 7th, 2019

The way I understand it, AJAX makes it possible for web applications to asynchronously send and recieve data to and from a server without interfering with the presentation and behaviour of the excisting site. In other words, AJAX makes it possible to change content on the webpage dynamically without having to reload the page.

This also means that when a user enters a website, the user don’t have to wait for the server to respond with the data. With AJAX we can load the data when the user is already on the page.

AJAX stands for “Asynchronous Javascript and XLM”. The reson for the XML in the name was that when the term AJAX was coined, XML was used for the transferring of data. Today JSON has become the standard.

AJAX is not a single technology, but rather a group of technologies (many web technologies on the client side):

  • HTML (or XHTML) and CSS for presentation

  • The Document Object Model (DOM) for dynamic display of and interaction with data

  • JSON or XML for the interchange of data

  • The XMLHttpRequest object for asynchronous communication

  • JavaScript to bring these technologies together

Together, these technologies allow for a decoupling of the data interchange layer from the presentation layer. And javascript is always at the core of it. It’s javascript that issues that XMLHttpRequest (XHR object) which connects to the server APIs and transfer data between a web browser and a web server.

Here’s an example of a AJAX request using the “GET” method, written in javascript (from Wikipedia):

// This is the client-side script. // Initialize the HTTP request. var xhr = new XMLHttpRequest(); xhr.open('GET', 'send-ajax-data.php'); // Track the state changes of the request. xhr.onreadystatechange = function () { var DONE = 4; // readyState 4 means the request is done. var OK = 200; // status 200 is a successful return. if (xhr.readyState === DONE) { if (xhr.status === OK) { console.log(xhr.responseText); // 'This is the output.' } else { console.log('Error: ' + xhr.status); // An error occurred during the request. } } }; // Send the request to send-ajax-data.php xhr.send(null); Twitter as an example Let’s look at Twitter as an example. When you log in, you get to your wall of posts.

ajax1

After a while, we see that new posts start to show up in the tweets bar, even though we have not refreshed the webpage.

ajax2

If we take a look at the console under the “network” tab, we can inspect Twitters request:

Request URL: https://twitter.com/i/timeline?composed_count=0&include_available_features=1&include_entities=1&include_new_items_bar=true&interval=10000&latent_count=1&min_position=1094341416774451200 It contains the URL to connect to and several parameters that tells the server how we want to recieve the data. If we keep the network tab open, we can see that the web page makes a new request ever 10 seconds to ask if there are new tweets to our timeline.

ajax3

If we inspect the response of one of those requests, we see that it is JSON:

ajax4

If we prettify it, this is what it looks like: { "inner": { "max_position": "1094336257885384705", "has_more_items": false, "items_html": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n", "new_latent_count": 1 }, "note": { "d": { "status": "ok", "response": null }, "b": { "status": "ok", "response": { "count": 0, "localized_count": "0", "timestamp": -1, "new_timestamp": -1, "show_badge_highlighting": true, "success": false } }, "t": { "status": "ok", "response": null } } } Javascript then takes this JSON data that is returned from the server and change the content on the page, without the need for a refresh.

Steps

In short, these are the steps that make up a AJAX request:

  1. Data is collected on the webpage. Often a event trigger is used to start the process

  2. A new XHR object is created in the code

  3. The XHR object is sent to the server

  4. Data is recieved by the server

  5. The server issues a response

  6. The web page recieves the response from the server

  7. The web page updates the code using the data recieved from the server

  8. The web page provides a visual output to the of the new data to the user