I will assume that you are familiar with Javascript and HTML - read up on jsforcats.com if you need Javascript chops, and Learn HTML for HTML.
AJAX is a feature of Javascript and your browser that downloads new data after you initially request a page: so you live-update content and pull in new bits of content a user requests. AJAX is how the Pinterest home page keeps loading content when you scroll, and it's how Gmail can ring in new emails without requiring you to click 'refresh' all the time.
Let's clear things up. Like Javascript for Cats, it's best to use Google Chrome for this, and to use your web developer extensions.
When you go to a webpage, your browser downloads parts of it. Most web pages have more than one part: the initial page you download is index.html, but there are other parts: images, CSS styles, Javascript files, and more. An index.html might look like:
<html>
<head>
<title>My Homepage></title>
<link href='style.css' type='text/css' rel='stylesheet' />
<script src='jquery.js'></script>
<script src='site.js'></script>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>Your browser sees this page, notices that it'll need style.css, jquery.js, and site.js, and it goes out and downloads them from the same server before displaying the page. If you open up the 'Network Resources' tab of your Google Chrome and load a page, you can see this requests going out and coming in.
And so browsers have the ability to request things like CSS, Javascript, images, and HTML. But they do these requests the first time you load a page.
What if you want content after you request a page? If you have want to have a temperature ticker, and so you have a section of your page like <div id='temperature'>90</div>, but you want it to update quickly?
One option would be to tell users to refresh the page, or to have the page auto-refresh. It's doable, but that way you will have to re-request everything every couple of minutes, or even seconds.
A faster way to do this would be to request something new, after the page has been initially loaded. This is what AJAX lets us do.
The fathers of the internet gave AJAX a rather awkward name - XMLHttpRequest.
The XML in the name is irrelevant most of the time - you can use it to download XML, but most of time time you'll be downloading other types of files, like text files.
HTTP is how you request files - it's the system through which you download web pages and images normally, and XMLHttpRequest just uses it more, to download new things.
And, of course, it's all about Requesting content.
XMLHttpRequest is a Javascript class, and it's one of the ones provided by your browser: it's built-in if you're writing Javascript in a webpage. You already have it.
You can create a new request like so:
var request = new XMLHttpRequest();So, XMLHttpRequest is the class - it's the type of thing - and you've created a new one that you've named request. But you haven't told it what you want, or what it should do once you've got it.
Let's repeat: AJAX is a way to request new files after your web page has finished loading.
Let's take the next part slow: it is a tricky part of Javascript but an important one to understand.
request.onload = function() {
alert(request.reponse);
};This needs some explanation, right? Okay.
So, if you're coming from Python or some other language, or if you just have a searching mind, you might expect this code to read a bit more like
var response = request.load('http://google.com/');Right? Yes.
Here it goes: what you're doing in Javascript is using events. This can be harder to understand than just 'doing it', but it's an important part of Javascript, and a big part of why it works quite well.
When you set request.onload, you're setting a function that runs when the response is received. It might take two seconds to get that response. It might just never come. So it's good that the rest of your code isn't pausing to wait for its arrival: there's other important work to be done.
An experienced or astute reader might notice that this code looks quite similar to click events:
buttonElement.onclick = function() { alert('hi!'); };It's similar, and for the same reason: we don't know when a user will click or whether they never will, so let's not sit around waiting.
Got the advantage of events? We'll return to them later.
Now that you've told your script what you'll do once you get a response, let's make the request:
request.open('GET', 'weather.txt', true);GET is the name of the HTTP Method you'll be using. GET is used for… well, getting things. There are others, like POST, which we submit forms with, and a few others that are less popular.
weather.txt is the name of the file you want. The third argument is true: don't worry about that one.
So now we know what we want and what we'll do once we get it. Let's press go.
request.send();See how we're requesting weather.txt? Although you can get a lot of stuff with AJAX, you can't get everything. Exceptions include:
Stuff on different domains than the one you're on. For instance, if you have a site at www.tomscats.com, you can't do an AJAX request grabbing the cat listing at www.alexscats.com. The technical reason for this is the same origin policy.[1]
AJAX can request text-based stuff: although you can technically do an AJAX request for an image, movie, or another non-text-based file, it is not likely to be very useful or fast.
So, from start to finish, making a request will be like:
var request = new XMLHttpRequest();
request.open("GET", 'weather.txt', true);
request.onload = function() {
alert(request.response);
};
request.send();Let's return to that bit about events!
So, the tricky thing about events is that they run out of order.
Let's say that you have a button called buttonElem in Javascript.
var catMood = 'happy';
buttonElem.onclick = function() {
catMood = 'cranky';
};
alert(catMood);What will be alerted? If you guessed happy, you're right: your cat won't get cranky until someone clicks the button. So, the easy predictability of code running top-to-bottom is a bit lost. Such is life!
So, remember: the same is true of AJAX.
var request = new XMLHttpRequest();
var sky = 'blue';
request.open("GET", 'skycolor.txt', true);
request.onload = function() {
stockStatus = 'red';
};
request.send();
alert(sky);The sky will still be blue when you get alerted, since the file, skycolor.txt is still being loaded - you're still waiting for it. If instead you write the code
var request = new XMLHttpRequest();
var sky = 'blue';
request.open("GET", 'skycolor.txt', true);
request.onload = function() {
stockStatus = 'red';
alert(sky);
};
request.send();Then you only get alerted of the sky color once skycolor.txt is downloaded - so it'll be red.
Initially, web browsers didn't support AJAX well - they lacked some parts of it or had kind-of-the-same-but-not-the-same ripoffs of the technique. Mostly these are older browsers now - Internet Explorer 5-6, but it's good to be wary.
In order to avoid thinking about those nitpicky differences, many people use jQuery.
For instance, our weather-checking example from earlier would look like
$.ajax('weather.txt', {
success: function(resp) {
alert(resp.response);
}
})The $.ajax function additionally accepts a whole lot of other options.
- Want to know everything about
XMLHttpRequest? Read XMLHttpRequest on Mozilla Developer Network.
- There are some new ways around it like CORS, but it's usually something you have to live with.
TODO: