What is AJAX?
In the old days, AJAX was mimicked using frames and iframes. Now the whole process has been simplified with AJAX. Let’s learn how to perform AJAX requests. Clear your script and add this bit of code.
var req = new XMLHttpRequest();
To get started, we must use the XMLHttpRequest object. This object has properties and methods we can use to perform AJAX requests. Of course, we have to store this in a variable to use it. Add this bit of code next.
req.open( "GET", 'boo.txt', false );
The first method we have to use is the open() method. This method does not start the AJAX request, but simply sets things up for us. There are 3 parameters we need to define. The first parameter is the kind of request we would like to send. For this example, we won’t concern ourselves with the type of request. We’ll learn more about type requests in a future tutorial.
The second parameter is the link to the actual file. This must be relevant to our document. The third parameter is whether the request should asynchronous or synchronous. We’ll discuss this more in detail later. Before we move on, create a file called boo.txt and save it in the same directory as our document. Feel free to input any text you want into this file.
Add this bit of code next.
req.onreadystatechange = function()
if( req.readyState == 4 && req.status == 200 )
document.write( req.responseText );
We are now using an event in the XMLHttpRequest object called onreadystatechange. This event fires when the readyState property changes. This property can have 5 possible values.
- 0 – The default value when the XMLHttpRequest object is created.
- 1 – The open() method has been called.
- 2 – The send() method has been called.
- 3 – Some data has been retrieved, but the request isn’t finished.
- 4 – All data has been retrieved and the request is finished.
The only value worth checking for is 4. So, in our event, we check if the readyState property is equal to 4. We also check the status property. This property contains the status code of our request. You’re probably familiar with the status code 404. Another common status code is 500 when there’s an error on the server. The status code 200 is the code used when a request has been successfully sent and the server’s response has been retrieved successfully.
By checking these 2 properties, we can move forward with our code. We simply output the response we got from the file into our document. The responseText property holds the response from our file. Keep in mind that our file can be anything. You can send a request and be sent back HTML, JSON, or XML data. We’re keeping things simple with a text file.
We’re almost finished. Remember that this code will only fire when we make our request and our data has been retrieved. So, add this bit of code next.
document.write( 'File is loading.' );
The send() method will officially make our AJAX call. We also output a message telling users a file is being loading. You should now be able to view your page and see the text in the .txt file outputted onto the document. You’ll also notice our message of the file being loaded outputted as well.
This is considered a problem. So, how do we fix this? Simple, in your open() method, set the third parameter to true and you should see our message disappear from the document, but why?
Asynchronous vs Synchronous
Code that is synchronous will execute code in a blocking way. This is how code is traditionally executed. As you may know, code is usually executed line by line. When we call the send() method, then our event will fire and our code will execute inside it. The message of our file loading doesn’t output until our event is finished firing. This is blocking because only 1 task at a time is fired.
Asynchronous code executes differently. While our request is being sent, then any other code that needs to execute will. This allows you to have several events running at once. This allows for faster executing and a smoother user experience. In our example, the message of our file loading is outputted onto the document. During this time, our request is still being sent. This happens very fast, but once our event is fired, then our response is outputted onto the document which replaces our message.
Why use asynchronous over synchronous?
We’ll learn more about AJAX in the next couple of tutorials. For more information on AJAX, then go here.