Categories
Programming

Introduction to AJAX

History of AJAX

The pre-history to AJAX was a technology called “Livescript” developed by Netscape. This allowed users to interact with the browser using small scripts, a precursor to JavaScript.

Later a pseudo-asynchronous method was developed, using iFrames in order to change the content of a page, once it had been loaded and was termed “remote scripting”.

After the dotcom bubble, Microsoft added an API called IXMLHTTPRequest to Outlook Web Access which functions as an HTTP client for JavaScript. This allows the browser to download data, even after the page has been loaded.

Safari soon added support for this method in their 1.2 version of the browser, seemingly in response to the use of it within a social networking website called Orkut which allowed you to rate friends using a star system that was implemented in XMLHttpRequest.

The popularization of this method was caused by Jesse Garret, when he wrote a popular article entitled: Ajax: A New Approach to Web Applications, in which he coined the term AJAX.

The best early implementation of this technology came with the introduction of Gmail, which allowed asynchronous retrieval of email, which to that point had not existed within an email client.

Until recently, the main way to initiate asynchronous data retrieval was XMLHttpRequest, but with the recent introduction of ES6, we now have the Fetch API. Now we’re able to request data asynchronously using multiple methods.

Defining AJAX

Working with AJAX can be intimidating. When I first began to need to incorporate AJAX functionality within an application, I was a little nervous at first. It seemed as if there was a multitude of different definitions, and no one seemed to break them down easily enough. Let’s attempt to break down the various definitions surrounding AJAX.

AJAX

AJAX stands for Asynchronous Javascript And XML. It doesn’t describe a single technology, rather a range of technologies that are used to asynchronously communicate with the server. A more accurate acronym today would be AJAJ (but is rarely used), substituting JSON for XML.

However, AJAX is the dominant and more recognized acronym, so people tend to use AJAX instead.

JSON

JSON stands for Javascript Standard Notation which is an easy and modern approach to encoding data. It was created in 2002 by Douglas Crockford (ever heard of him?) as an alternative to XML

According to JSON.org, the main two ways JSON is structured is:
(a) by collection of name/value pairs
(b) an ordered list values.

Collection of name/values pairs is look a lot like:

{ "hello" : "world", "testing": "values" }

If you are unfamiliar with value pairs, you can copy this code, open the
browser console (CTRL + SHIFT + I on Chrome) and type var example = and paste in the code.

JSON is essentially written in the same structure as a JavaScript object, so you can type something like example.hello and it will return "world".

The second way JSON is structured is an ordered list of values. That essentially is just a JavaScript array, and is structured like this:

{ "testing" : [1,2,3,4,5,6]}

You can copy this too into the browser console, assign it a variable and work with it, almost exactly like a JavaScript array.

These two concepts can be combined, of course. You can write something similar to:

{ "hello": [1,2,3, "testing"], "blue": "is the best color" }

and it will be considered valid JSON.

To play around more with JSON, this is a great tool to learn what is valid and invalid.

XML

XML is an alternative standard to JSON. It stands for Extensible Markup Language and was created in 1996 as a standard for data encoding.

XML lost out to JSON for a few reasons, including; (1) XML didn’t have the data types JSON had, (2) JSON was easier on a computational level to encode and decode in comparison to XML, (3) JSON was practically built into the web (hyperbole), since JSON is a subset of JavaScript. This makes it much more practical to use JSON.

XML does have advantages such as: metadata, it is renderable by the browser, XML is actually a language which allows for advanced interaction and you can mix data types in XML.

Another big reason why XML lost out to JSON, was the movement from SOAP to REST. We won’t dive deeply into it here, but here is a great indepth article about the history of the movement from SOAP to REST.

XML is structured in a tag like, tree structure. It begins with a declarative statement around the structure, something similar to:

<?xml version="1.0" encoding="UTF-8"?>

Unlike HTML, it doesn’t have a set of tags that are required for the browser to interpret. Instead, you can make up your own set of tags to describe the data that is encoded within the XML similar to:

<clothing>
<hat>
<brand>Supreme</brand>
</hat>
</clothing>


If you’re interested in playing with XML, this online XML validator is a great tool to learning and messing around with XML.

XMLHttpRequest

XMLHttpRequest(XHR) is an API that allows asynchronous communications from the browser to the server.

Fetch

The Fetch API was integrated within ES6 and allows us another interface to communicate with the server asynchronously.

How AJAX Works

The following is an image that details how AJAX works from a graphical presentation. We’ll break this image down further into individual parts and describe them to you, so that you have a strong understanding of how AJAX functionality works from an implementation standpoint.

A description of how AJAX works

Step 1: Client Side – User interacts with the DOM

The first step in AJAX is the user interaction with the DOM. This can be a button click, an infinite scroll mechanism, lazy-loading images or any type of interaction with the browser that requests data from the server, without the page refreshing.

Typically, you will attach an event listener to a particular node in the DOM and send the asynchronous request when the event is triggered.

Step 2: Web Communication – An Asynchronous Web Request is Sent

After the user interacts with the DOM and an event listener is triggered, either an XMLHttpRequest or Fetch request is sent to the server.

You can send data along with the web request, including values to validate or user entered data (think a form submission with user input), to the server side.

Step 3: Server Side – Server Receives Asynchronous Request

Finally, the server side receives the request and data from the client side. You can begin processing the data, and formatting a response based off of the data sent along with the response.

Step 4: Server Side – Server sends back data

You can now begin to send back data from the request. Continuing our form example, if there was an error, it can be encoded in a JSON value pair:

{"error" : true }

or string/raw data:

"error" 

or XML

<?xml version='1.0' encoding='UTF-8'?>
   <error>
      <message>
         Broken
      </message>
   </error>
<?xml>

Step 5: Web Communication – Response from Server

The browser then receives the data from the server and processes it. Typically the response is processed by the Javascript, converted from JSON or XML and interpreted.

Step 6: Client Side – User Informed

Finally the client side is updated with a response. Sticking with our example, if there was an error response from the form, the page will update displaying with an error. If the submission was a success, we can update with a success message.

Leave a Reply