Transcript

          So then we know what an Http request is now and why we'd use it to get some external data via some kind

of API endpoint.

So now let's see how to actually make a request from our JavaScript code.

So the first thing we need to do is make a request object.

So I'll create a constant and I'm going to call this request.

And the way we create a request object is by saying new and then XML http request.

So this creates us a request object.

Now this XML part represents an older data format we used to work with much before Json arrived on the

scene, but this request object can work with any kind of data now XML, Json, plain text, etcetera.

So now we have this request object and this is the thing that is going to be used to actually send a

request from the browser.

This thing is built into the JavaScript language.

So now we have this request object.

We can actually use it to send a request to get some data.

So how do we do that?

First of all, we take the request variable we just created and now this comes loaded with different

properties and methods we can use.

The first method we need to use is the open method.

Now this open method takes two arguments.

The first argument is a string, and it's the type of request we want to make.

Now remember, when we get some data, we make a get request.

Now, there are other types of requests that we can make, like post to send data or port to update,

etcetera.

There's loads of different types, but we want to get some data and for that we make a get request.

So that is the first argument right there, the type of request we're making.

Now the second argument is where we want to make the request to what is the end point we want to get

data from.

So if we go to the Json placeholder and scroll down a little bit, the end point we want is right here.

This is the data we want.

Now copy all this except for the one.

The one at the end gets us a single to do, but we want all of the to dos and this URL right here will

do that without the one it will get us a list of to dos.

So copy that and head back to the code.

And we need this inside a string again.

So paste that inside there now.

So now we're telling our request what the type of request is and where to get that data from, where

to send the request to.

But at the minute, the request isn't actually being made.

This is just kind of setting up the request.

So to actually send the request, we need to say request dot send, and that sends the request.

So if I save this now and head to the browser, I'm going to go to the network panel over here.

And then I'm going to just refresh and we can see now if we go over here, we can see this request made

here.

So if we click on that request, we can see it's a request method of get.

This is the endpoint and the response over here is all of this data.

But at the minute, we don't know in our code when this is complete, we don't know how to access that

data.

So how do we do all that?

Well, in our code we can track the progress of a request using an event listener and a specific event

called Ready State Change.

So we attach this to the request object itself so we can say request dot, add event listener and the

event is called Ready State Change all one word, all lowercase.

So that's the event.

And this fires every time there's a state change in the request.

Now a state change just means that the request is going through these different phases of the request

and there's four in total.

So what I'm going to do right here is just log those out to the console.

First of all, I'm going to say console, dot log and then the request object every time there's a state

change.

And then I'm going to log out request dot ready state and that gets us the state that the current request

is in.

So if I save this, what's going to happen is we're going to set up the request, then we're going to

send it.

And every time there's some kind of ready state change, then it's going to log these to the console.

So let me save that and come over here and come to the console.

And you can see there's four in total, like I said.

So each time around we get the request object, which has all of these different things on it.

And up here we can see we also have the state one, two, three and four.

But what do these actually mean?

Well, to find out, we're going to head on over to the guide, the Mozilla website.

And we can see down here these different ready states.

So we have zero, which means it's not yet been sent and open, has not been called.

Remember, we use open right here then we get ready state one when we've actually called open.

So after this point right here, we're going to get ready State one then after we.

Use the send method.

We're going to get ready State two, which is this point then ready?

State three is when we're downloading and we've got some kind of response text, and then four is when

the operation is fully complete and we've got access now to the response.

So this right here, this number four, this is the most crucial step because at this point, this is

when we want to take that data and do something with it, we can receive it and do something.

So if we head back to these different things right here, if we open up this object and come down here,

we can see this response text and this response text contains the actual data that we receive.

So over here, what I'm going to do is listen inside this event listener for the ready state changes.

And if the ready state is equal to four, that's the point where we can do something with the response

text.

So what I'm going to do is comment this thing out, first of all, and then I'm going to do a little

if check.

And inside here I'll say if request dot ready state is triple equals to four, then we're going to do

something.

This is when we can do something with the response, the data, not in zero one, 2 or 3.

We can't do it at those stages because it's not ready yet.

But we can do it at this stage.

So we only want to do something at stage four and that's why we're doing this if check, because then

whatever we do with it, we can do that here.

So for now, all I'm going to do is console, dot log and say request dot, response, text.

That's the property which contains the response data.

So if I save this now, then come to the browser.

We're going to see all of this data returned to us.

So we have all that now.

That's really nice and it looks like a gigantic array of JavaScript objects, but this is actually Json

data.

It's all really a giant string called Json.

And we'll look at how we can deal with this data later on.

But for now, just know this is the data that we're getting back.

So now we're sending the request and we're reacting when it's complete and we get a response and we

can see that data in the console.

So we're two thirds of the way there, but this isn't complete yet.

To complete it fully, I want to talk about response statuses and we'll talk about that in the next

video.