Hey, everyone, in the previous video, we learned what is Ajax, we learned what is an age TGP request
and how it works, and now it's time for us to do our first request.
So the first thing we need to do is creating a new XML http request object.
So this is part of the window object of our browser.
And if you see down here, I'm showing this code, this is actually really, really old.
We don't even need to do this anymore.
What happened is that in the past, some browsers like Internet Explorer prior to Version six, they
didn't have this XML htp request object.
So what we did before is first checking if this object exists.
If it exists, then we can go ahead and create a new one.
If not, then we use the fallback, which is the active X object that worked on those versions of Internet
Explorer.
But as I've said, this is really old.
We don't have to worry about this anymore.
In the last couple of years, I've seen the number of users of Internet Explorer dropping and Microsoft
even announced that soon they're going to stop providing support for Internet Explorer.
So I just wanted to show you this because maybe you will see this in some code that you work.
So just so you know why this was done before, but right now it's safe to just create a new one if you
have doubts, if many browsers support this object, you can always use the can I use website?
This one is really good.
So you can see what are the chances of your code breaking on some browsers.
So let's search for the HTML HTP request object.
So as you can see, all green here.
So it's supported by.
Pretty much all the browsers, you can see the global support here, so ninety six point eight percent
of the browsers, they offer support for this object.
Actually, this is not 96 percent of the browsers, but ninety six percent of all users.
Won't have any problem to load this, so it's safe to just do this, so let's copy this code and let's
take this to Visual Studio Code.
So the first thing we do is creating a variable, which is going to carry an XML HTP request.
So here we are creating a variable that's going to carry a new XML http request object.
Now that we have this object, we just need to write our request and send it to a service on the Internet
that is going to send us back the data we want.
But before doing that, there are two important things we need to understand about a request which are
the state and the status of a request.
So let's go back to our page.
When we send in a request, it's important to track what is the state of that request.
So state zero means that the request has been initialized.
So when we send it.
It is going to be on state zero automatically then state number one.
Is when the connection to the server has been established.
Then the next state number two is when the request has been received by the server.
Number three, the server is processing the request and number four, which is the most important to
us is when the response is received and the request is finalized.
So why is this one the most important one?
Because when we send the request, what we are trying to do is getting some data.
So when this request is at state four, it means that we already received that data and we can start
working with it.
So after the request has been finalized, another important thing to check is the status of the request,
because maybe it's been finalized, but it wasn't successful.
So when we received the response, if the status is two hundred, it means that everything went OK.
The response has been received successfully.
So this is what we would need to check when we receive the response.
If the status is two hundred, OK, we can go ahead and start working with the data.
If not, then we need to create an exception.
So the most common status codes that you are going to see are four oh three, which is not authorized.
Some services out there, they require an API key and if you don't provide one, you will get a not
authorized status.
So if that happens, you can't work with the data.
You need to do something else.
Another common status is for 004, which is not found.
So when we do an HTP request, we're going to need to type A you around.
And if we type the incorrect you, we we're going to get a four or four back.
So those are the most common status codes for HTP requests.
If you want to learn more about this, you can go on Google and search for HTP request status codes.
You can just go to this first search result on the Valborg Musila dot org, and you will see that actually
there are many, many different codes for the status.
All right.
So now we are ready to do our first request.
So when using the XML HTP request object.
Four properties are going to be important for us, so the first one is the honourary state change.
This is like a JavaScript event, which we're going to use to track the change of state of the request.
So why is this one important?
Because we need to know when this request has reached state four, which is when we can start working
with the response.
Then we need the red state.
To check if it is for.
We need the status that we just talked about and.
If everything went well, if we have stayed for status two hundred, then we need the response text,
the response text is the actual data that we are looking for.
So now enough talking.
Let's do a real life example.
So going back to Visual Studio Code, we already created our XML HTP request object.
As I've already mentioned, we are not going to be working with XML in the SCHAUS, but if you want
to learn more, you can search on Google.
So now, before writing our request and sending it, let's use that unready state change event to track
the changes in the state of our request.
So let's call this object we just created.
So X HTP.
You can name this variable any way you want, but this is a convention, so I suggest you use the same
name.
So then we are going to use the property called on ready state change, which is going to track the
change in the state's.
And every time this occurs, so every time there's a change of state, we are going to execute a function.
And before doing what we really have to do, I'm just going to do a consult log and every time it changes,
I'm just going to send this, which is the X HTP variable with this object.
So this dot ready state, which is the name of the property.
So by doing this, when we send the request, we're just going to send to the consul the state of the
request every time it changes.
So this is our function and now we can actually go ahead and open the request and send it so again,
X htp, now we are going to use the open method.
And here we are going to pass two arguments, the first one is going to be the method used to send the
request.
I'm not going to go into details about this, but the most common ones are aget or post.
If you want to learn more, you can search for HTP request methods on Google.
So in this case, I'm just going to use the GET method, which is the only one we are going to use when
we are just trying to get data from an external source.
And now.
I need to type the euro.
So where are we sending this request?
Well, Instagram is probably sending the request to their own servers, but on the Internet, we have
many, many services that we can use.
So these are called APIs.
And one API, that's very interesting that I chose to use it in the course because we don't need an
API key, we don't have to log in, create an account or anything, we can just go ahead and use it.
It's called the Open Trivia API.
So if you go inside here, you will see that this is a database of trivia questions.
So let's go here to AP.
Let's get a random question about any category, any difficulty or anything, let's generate the API
you URL.
So if we send an HTP request to this address, let's see what we are going to receive back.
So as you can see, we've just received something that looks like a Jason string, and we can.
Pass it into Asia, have a script object, so this is the response from the request, which has the
results.
And the results are a trivia question that we are going to use and we have the correct answer and the
incorrect answers.
So if we copy this URL, let's go back to the code to see what we get in return.
So this is an API, it's a service.
That we can use to make a request and receive something.
So this trivia API is going to send us a random trivia question.
So we are going to use this to create a cool trivia game.
All right.
So now that we have written our request with the method and the Yooralla for the request, we can just
send it.
So X htp dot.
Send.
So when we do this, let's remember that the only thing we are doing is just tracking when the state
changes and when it happens, we are sending the red state to the council.
So let's save this.
Let's go back to our page.
I'm just going to open the inspector.
Here it is.
Let me go to the consul.
And now I'm going to reload the page, as you can see, we have the states here, we didn't even receive
the zero state, but we can see that our request went all the way to state number four.
So this means that we have received the response.
So going back to the code now, we need to do something with it.
I just wanted to show you how the state's changed.
And now, as I've said.
We need to know if the state is for.
And the status is two hundred, because if those two things happen, it means that our request was successful
and we are ready to start using the data.
So let's test this.
So if this dot red state.
Is for and this.
That status.
Is two hundred.
It means that we can start using the data, so instead of sending to the council just the red state,
let's send the actual response.
So this DOT response text, which is going to be what matters to us.
So let's do this and let's see what happens.
So going back to the browser, let's refresh the page.
And now when we have the state for and the status two hundred, we are sending the response text to
the console.
And this is the trivia question that we are going to present to our users.
This seems a little crazy right now because this is only a string as we received the response in Jason.
This is still a string and we know that we need to pass this into a JavaScript object in order to start
working with it.
So in the next video, we are going to do this and start working with the response.
I'll see you then.