Captain AJAX

#javascript #beginners #firstyearincode

Have you ever wondered how asynchronous requests are made on web pages?

Have you ever wondered what "asynchronous requests" are?

As an average internet-consuming human...probably not, but if you're here, you're probably no longer just that, but now an(at least semi) internet-comprehending human, and that's pretty cool!

One of the most important characteristics of modern web browsing is the use of Asynchronous JavaScript and XML requests, or 'AJAX'. Unbeknownst to the common web user, these 'requests' are happening in the background, pretty much all the time.

AJAX radically changed the face of the internet by keeping it static, yet dynamic. As a child of the 90's, I remember when internet access was still fairly limited and running on dial-up. Back then, web pages were rendered 'synchronously', meaning if you clicked on a hyperlink, the page would have to completely reload, because at that time, data requests were sent from the client(a user's computer) to the server, and then responded to one at a time. (I'm sure by now you realize that half the time spent surfing the web in the 90's was just waiting for the page to load.)

Then, in the 1996, something really magical happened; Microsoft Internet Explorer introduced the tag and changed the world, and my life.

Requests could now be sent to the server in the background of a web page without the face of the web page changing, making websites far more user friendly and speedy. Because of this async wave, new forms of communication and interaction with the internet were made possible.

You may not have ever realized it, but any time you login to any website, use autocomplete, or visit a chatroom, AJAX is happening in the background. Let's break down what's happening in this chart step by step.

Asynchronous processing model

1. An event occurs in a web page, aka the client (like a click event)
2. An XMLHttpRequest(XMR) object is created by JavaScript
3. The XMR object sends a request to a web server using JSON or XML
4. The server processes the request, usually called a 'GET' request 
5. The server sends a response back to the web page
6. The response is read by JavaScript
7. Proper action is performed by JavaScript, HTML/CSS, 
and the DOM to render the information to the screen, uninterrupted

What this is really saying is that AJAX is not a technology in itself, but a compilation of technologies working together to produce a result.

In it's earliest forms, AJAX requests were incredibly convoluted and easy for developers to get caught up in their syntax. Luckily, modern libraries and frameworks have abstracted away a lot of this syntax but the underlying technology still remains the same, to help you understand what I mean by this, let's use the 90s classic cartoon 'Captain Planet' to get more insight.

If you've never heard of CP here's a little background: He was awesome! However, his power could only be summoned by the combined powers of his earthly friends "The Planeteers".

DOM (Document Object Model) - Earth

The very structure on which every web page on the internet is built.

HTML/CSS - Fire

The DOM is represented by the HTML backing structure and Cascading Style Sheets for it to be fleshed out.

HTML is how elements on the page are rendered and CSS is what they look like.

JSON (JavaScript Object Notation)
&& XML/XMR (Extensible Markup Language) - Wind

Original AJAX requests were sent via XML, but this syntax was very easy for programmers to get tangled up in, and the move was made to JavaScript Object Notation or JSON to provide additional clarity..so yes, technically, AJAX is really 'AJAJ'.

This would be considered the wind element due to the parsing and transference of data back and forth across the web.

JavaScript- Water

I would consider JavaScript the water element, due to it's important role in the control flow of data being requested from the server.

Once the server has responded to the client request, again, it's JavaScript's job to implement a callback function that tells this freshly received data what to do.

XMLHttpRequest Object - Heart

The heart of the entire operation is the XMR object, which is available in the JavaScript environment. This very special object's job is to communicate back and forth with the server to produce asynchronous requests.