Every developer needs to understand how to make asynchronous requests to a server using AJAX. Let's get started by talking about what AJAX is and then look at a quick example.
Once we have that object then we can go ahead and use a couple of the methods. Traditionally you make a request open call as well as a request send call right here, and so this open call will prepare our request, and the send method will actually send it. So in order to open this request, we have to specify two things. How we want to send this information, and we'll use a GET method. That means that we're asking something from the server, and then we're going to specify the file that we need, so we're going to need this data.json file, and that happens to be in the JS folder.
Now remember that because of the way we're processing things, this is actually referring to this JS folder right here. This masteringcode in our project is the root folder, and so it's referring to this JS folder and then this data.json file. And that's all we need to open the method, and really this is all we need in order to send that request. But now we need to worry about what would happen if we get some data back. When you make that request, the server is going to send back information about the request, so we need to track that by using this event called onreadystatechange, and then we'll make that equal to a function, literal here, so this is a callback, and in that callback we need to check a few things.
First of all, we need to make sure that the request was successful, and we can do that with a status message or a status code that we'll get back from the server if the request is successful. If you've been to a page where when you make a request it's not available, you may know about the 404 sort of status code. This is a different status code that means the request is fine, so status code 200 means we made a request, and the request is all good.
Now we also need to check for one more thing, and this will be is the data ready? So let's go request readyState, and we need to check to see if that ready state is four. As the AJAX request gets made, it's going to go through a series of status codes starting with one, two, three and four. If it gets all the way to status code four, it means that the request is okay and we actually have some data that we can do something with.
And now let's go ahead and just log that data, so console log, we'll log the data, and just so you can see what we actually get from the request, we'll go ahead and log the request itself. All right, let's go ahead and save this, and if everything works well once this page gets reloaded, we will inspect element right here. If you're using the practice environments, just make sure you click on the console tab.
Let's go ahead and hide a few of these things here. You'll see that we get actually two things. Number one is the object. So if we see anything right here, this is the actual data that we're getting, so this corresponds to what's in this data.json file, and this has both a calendar as well as an artists object. Notice that it's not in any particular order. Even though I put the calendar first, it's actually reading artists first.
Then this has a series of objects with some artist information which is great, and then this has a calendar of events with some other information, so it's read the data just fine. Another thing that you can take a peak at is this request object, so if we open this up. Let's go ahead and make this bigger. You can see that we have these status codes that we asked for, so readyState is four which means everything is good, and the status is 200, and this is what we're checking for as we write this script, those two codes.
Once we get all that data back, in addition to that, then we can find the response text which is the data from the file in text format, and then we parse that into a JSON object using this method right here, and we can go ahead and use the data all we want. So AJAX seems like it could be sort of a difficult thing, but in reality it's quite simple to do as long as you understand how to make those requests, the codes to check for, and how to parse your text data into a variable that you can do something with.
So here's a page in the Mozilla Developer Network where you can get more information about working with AJAX as well as some related courses with information about working with AJAX and different languages. If you have some ideas for this weekly series or maybe you want to share with me some questions you've been asked or have asked in interviews, connect with me in LinkedIn or just about any other social media network like Twitter or GitHub at planet of the web.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.