This lesson is all about Ajax calls, so making fetch and zaatar requests, so before fetch we had one
option and that was X Emelle HTP request or X our requests.
In order to interact with servers, we could retrieve data from another Eurail without having to do
a page refresh.
So this is what's known as Ajax.
There's a quick example of it here and there's a bunch of different ready states.
So do a quick run through of what's available at the Mozilla documentation.
So we've got our event target, we've got our request and then we've got the request object coming back
so we can construct that.
And it's got a bunch of different properties that we utilize, such as status and then the response
text as well.
So this is what comes back from the request.
And these are all read only as there's different ready states that the request will go through.
So at first it's unsent and then it's opened headers received loading and done so already.
State four is a completed request and that's the one that we're looking for when we've got our requests.
You can also check the different ready states.
So using the different methods, we create the X H.R. object and at first it's unsent.
So state will be zero.
Then we use open and this opens up.
This is where we specify the URL.
So this updates the state and this is the state opened next.
We've got loading.
So when we've got our progress method that we're using and we can do stuff here as well at this point
and in this case, we're outputting to the console log that's loading.
And then lastly, but of course, not least is done.
And this is the last ready states ready state for where we're looking for.
And we've got the response back from the server.
And you can also, of course, you need to send it in order to go through the different ready states
because it's not going to move past the first one unless you actually have the H.R. object sent.
Also, status is important because status and the status codes that are returned back and you might
be familiar with some of them, like two hundred is OK.
That means that you had a successful request and one of them that often comes up is four or four.
So that means that the URL is not found and you've probably seen that on webpages.
So these are the error codes that are typically seen.
So let me show you how this works.
So the first thing we do is we set up our our object and we define a new XML http request object.
So within itself, if you go into the console and if you output into the console, you're going to see
that this is the request.
And here's all the ready states and all the different methods that are available.
So we had the onload and everything that can get invoked.
And as well this is that ready state values we're sitting at ready state zero.
The next thing that we want to do, we want to actually set up a URL so this can be a const and setting
up a Eurail.
So there's a number of different Web APIs that you can use.
This one is going to be called Chuck Norris Jokes.
So it's an API, it's an open API.
It's great for testing as well as entertainment.
So you've got API.
Chuck Norris jokes eyehole and we go to jokes and random joke.
You can also load this within your browser and you can see that you're going to get a response back.
So this is going to be within JSON format and see that we get the joke being returned back.
So that's what we're after.
When we do our request, we want to get some information from the server.
So next to that we want to do is we want to excite China and open this and specify the method that we
want to use or using the method and we're posting to the URL that we're specifying.
So when we do that, we see that our state has changed those of you that saw that.
So we state ready, state one.
So that's where we're opening up the request and then the next one is going to be send.
So we're going to send the request and we see the ready state change to four.
So it went through all the ready states and everything was good as well as status.
Two hundred.
So that's another one that you can look for just to make sure that you do have everything ready.
There's another one that you can track.
So that's on ready state change.
And this is expecting a function parameter and this is the one that's commonly used in order to track
the ready state changes.
So if I output the ready state value into the console, you're going to see that once we do the requests,
we start out at 1:00 and then we're outputting that console information and then we're completing the
request.
So we've got information and it's the request has been sent and then we've got the connection to the
server and we've got our response back.
So that was great.
And before you try to use the response, it's always a good idea to make sure that you do have that
response data.
So make sure that the ready state is equal to for.
And also you can also check to make sure that you can also do another one that exceeds our status is
also equal to two hundred, because that means that you have a successful return on the content and
then now you can output into the console your XIKAR response object.
So make sure that's double equal signs, so this is our response back from the server, and then that
means that we can also utilize this within our code so we can get that information sent and using the
JSON pass, because this is a string value that gets returned so you can use and create an object.
So I just call that the joke and we're going to use JSON pass because we've got a string and we're trying
to pass it through.
And what we have is that response value.
And I can console logout the joke, because now it's within an object format and now you can output
that information so you can output the value if you want.
So if you just want to see the joke, you can see the value of its output there.
And this every time the page reloads, it's going to be a different joke because, again, it's connected
to the server for this one.
And you can use any of the information that's coming back here.
So you can also use the image icon if you wanted to and update the HTML.
So selecting the document object and using query selector, we do have a div on the page, so I'm going
to select that div and update the inner html of that div with content that's been returned back.
So we've got our joke value, so I'll put the joke there.
So see that joke gets output into the console and the content and we can also add in and create an image
to that if we want to.
And the source of this.
So to break out of the string.
So I got a single code that and this is a joke, you URL.
So this will be dependent on what the server is returning back and close off that string to see we get
the image being returned back as well and then also the content so you can pause the video and try the
char object.
That's the request.
You can use the same API or connect to any of the other APIs that are available.
And coming up next, we're going to cover fetch to go ahead and try this.
And coming up next, we're going to do fetch within the same format and collecting the same API.
Actually see the difference between the two.