Understanding AJAX as a Beginner Web Developer

What is AJAX?

AJAX stands for Asynchronous JavaScript and XML. XML is rarely relevant, but when developing web applications, we use AJ to do asynchronous things such updating a page, making actions, etc.

In short, AJAX is all about updating parts of a webpage without having to reload the entire thing. That's pretty useful if your website is big and involved, you don't want your users having to load the same piece of information multiple times.

What This Tutorial Aims to Do

Actually implementing AJAX isn't hard, but it is weird. It relies on the interplay of a few different technologies and requires a little knowledge of each. The aim of this tutorial is not to get you up to the point where you can write brilliant AJAX doohickies; but rather to get you to a point where you have enough of an understanding of AJAX that you can communicate about it, see where it can be used, and have a solid foundation onto which you can build the technical skills you will need to actually implement AJAX.

A Brief Background

AJAX relies on a bunch of technologies. You don't have to be an expert in all of them but a little background knowledge will be useful. If you know how to use XML and JSON, and know what an HTTP Post is then feel free to skip this section. Note that this is a very simplified explanation, there is a lot more to the interplay of the technologies mentioned below, and a lot of technologies that I'm just not going to mention. This should give you just enough background to get your head around AJAX.

Hyper Text Markup Language (HTML)

The short version of this is that HTML describes a picture to be drawn by browsers. In general it's combined with a bunch of other technologies in order to produce something pretty, but that is beyond the scope of this tutorial. What you need to know is it describes the positioning of text, links, form elements and images within a page. It describes static (unchanging) content.

Executing code in a browser with JavaScript

But the coolest websites have moving parts - they react to the actions of the user and other events. Their content is not static. That is beyond the abilities of HTML. That is where JavaScript comes in. It is a fully fledged programming language that gets executed by the browser. It can make the browser do stuff.

HTTP Basics

This is a protocol. It is just a set of agreed upon rules of communication. This protocol is pretty fundamental to the functioning of the internet because it is what is used to fetch web pages and many other resources. When you send a message using HTTP it is called a request. When you send a request you should expect a response. Browsers get the HTML of web pages by sending requests to specific locations on the internet and rendering the responses they get. Browsers can really request all sorts of things, not just HTML pages but we'll get to that later.

Every request is associated with a url. If an HTTP request were a letter, the url would be the address written on the outside on the envelope. An example of a url is http://www.codementor.io/. Requests can have data attached to them as well in the form of parameter values, these values can be associated in a few different ways. The take home message here is: An HTTP request always has a url and sometimes has data attached to it as well.

Some well-used data formats: JSON and XML

HTTP can be used to transfer all sorts of data, for example, HTML, JavaScript and pictures. Sometimes it is useful to use formats like XML and JSON as well. HTML is actually a form of XML. And JSON occupies a similar niche to XML but is a bit less verbose and a bit more flexible so is generally preferred when AJAX is concerned. You don't need to know about these technologies to understand how AJAX works, the reason they are mentioned here is because if you want to do anything significant using AJAX you'll probably come across these terms.

The Life Cycle of a Static, Stateless Web Page

Here we'll actually make a little web page. Don't get too excited/scared, it's going to be very easy and very useless. So follow the steps laid out below. Ready?

STEP 1 open up your favourite text editor (notepad will work if you are using Windows)

STEP 2 copy-paste the following code into a new document

 <!DOCTYPE html>
<html>
<head>
  <title>Completely useless web page</title>
</head>
<body>
Code Mentor is delicious!
</body>
</html> 

STEP 3 save it as hi_world.html

STEP 4 open it up in the browser of your choice

Didn't I tell you this was going to be easy? So what just happened? Or rather, what did the browser just do?

When you opened your web page with your browser, the browser opened up and used the path to hi_world.html as the url. It then used that url to fetch the contents of hi_world.html. It then rendered the contents. And that is is. A static web page. It doesn't do anything once it is displayed.

JavaScript Can Make Requests Too!

So the browser can make requests. And JavaScript can make the browser do stuff. It follows that JavaScript can make the browser make requests. That is the fundamental mechanism of AJAX! One common use case of this is called paging.

Say, for example, we have a web page with a table on it. That table contains a list of...erm... cows. So, since the cows are the cows of a very successful and caring dairy farmer there are a few thousand of them and they each have a name. But we don't want to load all of the cows' names in one go because that's a lot of data and maybe we are only interested in looking at the first 50 cows. Enter paging. Paging is any technique that loads pages of data as they are needed.

And here is how we would make this work.

1. make a static page that draws a table of the initial page of cows along with a next button. So far this is all just HTML
2. use JavaScript to make sure that whenever the next button is clicked then we request the next bunch of cows from some url. This data could be communicated as JSON or XML
3. when a response arrives then populate the cows table with the new information

Next Steps

Ok, so now you actually want to make the AJAX happen. Well if you managed to understand everything up until here you are in a pretty good place. But there are still a few pieces of the puzzle missing. Firstly, how does one actually make AJAX requests?

The standard thing to do these days is use a JavaScript Library called JQuery. AJAX is a tricky thing because different browsers work differently so sometimes code that works on one will not on another. JQuery provides AJAX functionality that is robust enough that it works on all modern browsers. Here is a little bit of example code to get your juices going:

$.ajax({
    url : 'whatever/fetch_cows_page/',
    success : function(response_data){
        //this function gets called as soon as a response is received, but only if it doesn't have an error
        populate_cows_table(response_data);
    }
});

So that is the client-side code done. The request needs to actually go somewhere, so the url has to point to something useful. This will be some kind of web application. Actually making a web app is very much outside the scope of this tutorial. The lesson here is that if you write the web app, you can make it respond however you want (within reason).

Conclusion

Now you should have a pretty good high level idea of how AJAX functions. I'll stress again that this tutorial was just an introduction. To be in a position where you can actually implement it I would suggest looking at the JQuery AJAX documentation. If you can get your head around that then you're ready to rock. If that is beyond you then an introductory JavaScript tutorial would be the next step.