7.2 AJAX

Hi, folks. In this lesson, we're going to look at one of the corner stones of modern interactive websites and rich applications. AJAX, or Asynchronous JavaScript And XML, to give it its full title. The premise behind AJAX is that we can use it to a make a request to the server. And process the response from the server without having to reload the page. AJAX is limited by the browser for security reasons to only being able to access data from the same domain. And this is one of the reasons why we are using Browsersync in this course, so that we can have a local web server. Without a local web server, we wouldn't be able to make AJAX requests. The use of AJAX resolves around creating an XML HTTP request object. We aren't going to be using XML in this lesson, don't worry. Historically, when AJAX was first created, back in 2005, JSON hadn't really taken off on the web. And XML was the primary data exchange mechanism. Thankfully, JSON came out soon afterwards, and it's been a very long time since we've had to worry about XML at all. And that can only be a good thing. But that's why the XHR object, the full title of that object is XML HTTP request, because of this historical use of XML. So when we make an AJAX request, we create an XHR object, and then we manipulate this object in order to make the request. So first of all, let's create this new object. So in order to create an XHR object, we need to use the XMLHttpRequest constructor. And let's just log this object out to the console. And we can see that it has a number of properties, and it also has this upload method. We won't be using this method during this lesson. But as you can probably guess, we would use the upload method to actually do an AJAX upload. So that's a bit more advanced than what we're going to be looking at in this lesson, just be aware that it exists. So we have a series of properties, a lot of these properties tell us the different states that an XHR object can be in. And we also have some event handlers, and we can attach functions to those event handlers. So that we can react to the object's changing state. So to make an AJAX request, we need to use two methods as the XHR objects, the open method and the send method. So the open method takes three arguments. The first argument is the type of XMLHttpRequest that we want to make. In this case, it's a GET request, and when we specify the request type, it needs to be in uppercase, like this. So other common request types that you might use would be POST, or OPTIONS, or PUT, or DELETE. But very frequently, it will be GET or POST. The second argument is the URL that we are making the AJAX request to. In this case, it's a website called numbersapi.com. This website will respond with information about a number whenever that number is passed to it. So in this case, we're passing number 42, and so this website should respond with some information about the number 42. The third argument specifies whether the request should be asynchronous, 99.9% of the time we'll want to set this to true. As well as these arguments, we can also supply username and password arguments in string format if we need to. So they would be the fourth and fifth arguments to the open method. So after we've used the open method to actually make the AJAX request, we then need to use the send method. So let's go back to the browser now. And if we switch over to the Network tab in Chrome here. Then we should see our AJAX request to the numbersapi.com. And we see some other useful information here as well, like the server response was 200. And if we actually click into this network request, then we can see what the NumbersAPI server responded with. And in this case, it responded with a web page. And that might mean that the- The API has changed since the last time I used it. And actually I don't think we need to set the hash anymore, let me just fix that. So the browser is refreshed and- So we can see the request here, it looks slightly different now. And we can see that this time, instead of sending back an HTML page, the server has just sent back some data. And it sent back some data about the number 42. Initially the page did refresh when we saved it in Visual Studio, and Browsersync automatically refreshed it for us. But unlike if we click on a URL, or submit a form, or something like that, our page doesn't reload when we make the AJAX request. And that is incredibly useful, so in this case, we made a request to a specific URL, and we didn't really pass any data. We did pass 42, but we passed that as part of the URL rather than passing it as data. So in this case, we were looking in the browser's console in order to see the response from the server, we wouldn't normally do that. If we do want to handle the response from the server in some way. Then we need to use one of the event handlers attached to the XHR object. So let's go back to the console now. And we can see that we've logged the message from the server to the console. And what happens when the server responds? It will update the XHR object on our side with the data that it's sending back. In this case, it's sending back text and it adds that to the responseText property. Normally, AJAX requests are limited to the same domain on which the code that makes the request originates. So responses from other domains aren't always accepted by the browser. So in this case we're running on LocalHost, that's our own domain, that's the domain that we're making the AJAX request from. And the domain that we're sending the request to is NumbersAPI, and NumbersAPI is a completely different domain than LocalHost. The reason why this is working is because the NumbersAPI server sets something called a cause header. To say that it will accept requests from any domain. And because it sets this cause header, our browser will then go ahead and give us access to the response from the server. If the server didn't set the CORS header, CORS, by the way, stands for Cross Origin Resource Sharing. If the server didn't set that CORS header, it would still respond to us. But our browser would not allow us to access that response just in case it was harmful. So in this lesson, we looked at how to make an AJAX request and work with the response from the server. AJAX, as we saw, allows us to send and receive data to and from a server without having to reload the entire webpage. This is useful because it allows us to update just part of a webpage in response to a user action. As well as sending and receiving data, we can also upload and download files over AJAX. AJAX requests very often return promises, and that's what we're going to be looking at in the next lesson, native JavaScript promises. Thanks for watching.