Have you used Ajax to load an external file?

- [Instructor] Every developer should understand how to make asynchronous requests to a server using AJAX. So, let's get started talking about what AJAX is, and then look at a quick example of how it works. AJAX stands for Asynchronous JavaScript and XML. And that means that you can make requests to a server, and then not wait for an immediate response, but continue to work until the server is done with the request. Once the request is completed, the data is sent back to the browser, and your application can do something with that data. To create the request, we use the XML http request constructor, and then we use a few other functions to manage the request. Now the XML in AJAX can be a bit confusing because it seems to indicate that the language you have to use to make these requests is XML. These days, it's rare to see the older extensible markup language being used. And so, AJAX requests can be retrieved as simple text, and then parsed into a JavaScript object. We'll do that in just a minute. Now the most important methods that you need to know about are the open method, which lets us prepare the original request for the server, and the send method, which actually sends the request to the server. Now, if the request has been sent, then we can track a special event called ready state change. The server will send us data about the request through this event, by returning a request object. And when we receive that request object, it will have some codes that you can use to verify the request. And if everything works out okay, we'll get the data, which we'll then parse into a JavaScript object. So let's go ahead and take a look at how we can do that. Now here's our simple application. This is just a bootstrap project with some simple text. And, as you can see, right here in the builds folder, here is my project. And I have this index.html file in a JavaScript folder. And inside that JavaScript folder, I have a data.json file, which looks like this. This is what we want to import. It doesn't really need to be JSON, but it's really easy to parse into a JavaScript object, so we'll be using that. And everything else here is just different files that this project needs. But this data.json is what we're going to pull in. Now, remember that the way we've been doing these projects is by giving us the option to use ES6. So our JavaScript code is actually in this process folder, and there is a file called script.js, which is completely empty right now. So we'll start by using the constructor. We'll go ahead and place that into a variable we'll call to request. And so we'll need to call a new XML http request. And once we have that object, then we can go ahead and use a couple of the methods. And 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 mastering code and 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 on ready state change, and then we'll make that equal to a function literal here. So this is a call back. And in that call back, 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 ready state, 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. So in here, we'll get this data in a field called response text. So what we can do is create a variable. So actually, let's go ahead and create a variable here called data. And down here, we can say, data equals, and we'll use the JSON parse method. JSON parse will take some text, and convert it into a JavaScript object. So now we can say, from the request, go ahead and read the variable here, called response text. And now let's go ahead and just log that data. So, console log will 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, 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. So, 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 artist's object. Notice that it's not in any particular order, even though I put the calendar first. It's actually reading artists first. And 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. And another thing that you can take a peek 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 ready state 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. And 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.