Friday , 23 June 2017
Home / Programming / JavaScript / AJAX – Advanced JavaScript Tutorial
AJAX
AJAX

AJAX – Advanced JavaScript Tutorial

AJAX stands for Asynchronous JavaScript XML. This can be a bit misleading as you can make AJAX calls be synchronous.  This tutorial requires that you upload and use your files on a live or local server.

What is AJAX?

Traditional websites would load a different page every time you needed to make a request to a different page or file. With AJAX, you can stay on the same page and in the background JavaScript will make a request to a different page and load it’s data. You can then choose what to do with the data. You can load images, process forms, and anything you can imagine.

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.

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.

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.

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.

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?

You should always use asynchronous. In a lot of cases, you’ll have other scripts that need to be executed. For example, let’s say you had a chat room that uses AJAX to load messages every 30 seconds. You also have other things like a JavaScript drop down menu. If the user sends a message, then any other JavaScript code will not execute until our call is finished. However, let’s say this call takes 3 seconds to fully run. If the user hovers over our drop down menu powered by JavaScript, then it will not work. This linear process can really ruin the user experience especially if a response takes a long time.

Conclusion

We’ll learn more about AJAX in the next couple of tutorials. For more information on AJAX, then go here.

http://en.wikipedia.org/wiki/Ajax_(programming)

About Jasko Koyn

Check Also

Audio

Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

Your email address will not be published. Required fields are marked *