This lesson is going to provide a quick overview of the difference between making an extra request and
fetch, and at the point that we're going to be connecting to is a random user taught me first class
API and then questionmark results equaling how many results you want to turn back.
So we're just going to go with 10 results.
So let's go ahead.
Open up the ED.
And I've just got a file called Test, create a new file called Ajax Start HTML.
And then this can just be a blank HTML page that will connect to the JavaScript file where we're going
to be making our Ajax request so within head and then just give it a title and I'll just call that Ajax
and we're not going to do any staling, which is kind of a simple file here.
Add in a couple buttons, give the first one a class of BTN one.
And so this will be the X H.R. request and the second button, give it a label of fetch request and
a class of button two.
So this will just be using JavaScript Futch and then lastly, set the script file, connect to a source
and the source is going to also be stutt, James.
So it's going to be the file that we're going to be connecting to.
So let's go ahead and we'll create that Ajax touch as well.
So Ajax Dutch's same directory so that we're just simply linking to that file from the main Ajax HTML
file so that we can look at connecting it with JavaScript.
And this is the one that we're going to actually run within the live server.
So go ahead and select open live server and you should see the page being output.
Also open up the dev tools so we can see the console content and we've got the two buttons and the console
content and make this minimize it fairly small.
Also have the code here on the left hand side so you can easily see what's going on within the browser
and going into Ajax.
So first of all, let's make connections to the first to the first buttons so that we can access them.
So using the query selector, we're going to select the element with a class of BTN one and then we'll
also do the same for button two.
So button two and then adding that listeners to these elements.
So out of that listener that we're listening for is going to be the click event surpassing in the event
object.
And we can have a function that's going to run here.
So this one will be just doing the request and that's going to be a feature.
So we'll run a function for that and create the function, request access to the campus in the event
object.
So whenever that button gets clicked, we're going to run that function and whenever the second button
gets clicked, then we're going to request and this is going to request fetch and we'll create a second
function that can handle the Thach request when it gets invoked and we're connecting to the same URL.
So let's set up the URL for that.
And that's going to be the content coming from the random user endpoint.
So it's going to be our base URL that we're going to be connecting to.
So first, let's do this with the CHAR request.
So let's create a new char object and by using new and that's XML, HDP request object that we're creating.
So it's going to be referenced with variable name of X and then for X feature we're going to listen
for the ready state and whatever the state changes, then we're going to invoke the anonymous function.
And what this function will do is this will check the ready state.
So right now we're just log out the current ready state so we can take the X HRR object and get the
ready state value and we're going to be looking for the ready state value of four.
So right now, what's going to happen is it's going to change through all the different ready states.
And then once we meet and hit ready state for that, we know that we've got and a successful connection
and that we're able to retrieve back the information.
So let's also open the object and we're using the get method.
And the world is going to be the base URL that we've got for the random user.
So using that in order to retrieve back that object information.
And then lastly, in order to initiate it, we do have to send and use the send function in order to
initiate it.
So refresh the page, click the XIKAR and we've got all of the ready states.
So at this point, when we're hitting ready state for, then that's where we know that we've actually
got access to the data so that it's been complete and we've hit all of the ready states.
So we're checking to see if it's ready state for.
And we can also just to ensure that we do have a status value of two hundred.
That means that we also have a successful connection to the server.
So once we meets these criteria, then we're ready to interact with the data and the data is coming
back as response text.
So for now, what we can do is we'll take the char object and get the response text and we'll put that
into the console.
So this is going to be returned back within a string format.
So we've got this whole long string format that's coming here.
And what we want to do is we want to pass it into a usable object.
So let's take one more step and take it and set it as a variable called data.
And using the JSON method, we're going to pass the response text as data and then we can use that as
needed within our application.
And the results array is the results are actually contained within an array format.
So that's going to be contained within data results.
So let's try that one more time.
So now we've got an array and if we want to loop through the array, so the data results we can use
for each because this is going to be an array pulled that element and we can console logout each one
of the elements that are within the results array.
So that returns back to them all as objects.
And then we can also use that and output it to the page.
So let's create one more area here or just create a diff, give it a class of output.
And then within the JavaScript, we're going to select the element using the query selector, select
the element with a class of output and this is where we can populate the information.
Take one more look at what we've got for the output here.
And as we launch this, we can can add to the output element.
So taking that output and inner HTML.
So we're just going to add to the contents of that object.
And using a template, literals sets those back ticks that are to the left of the one key on the keyboard
and that allows us to bring in the content.
So want to bring in the element and let's double check what the path is going to be.
So we're and results, we want to take the user information.
So it's going to be contained within name object.
And we've got the first and last.
So, so looking at element and then name and then first.
And what I'm going to do is I'm going to shorten this.
So we're going to just take the person.
So just call it piece and that will be the element name.
So using that same object path, we're selecting it.
So that just shortens our path to get to the name so we can do first.
I would not have to type in element name.
We can just simply type in that value and then also let's do one for last and we could also do one for
the title as well and then add to the end and we can get rid of the console message.
So let's see what that looks like.
So now whenever we click the button, we're appending to the list.
So we're continuously adding to the list the new items that have come in through that list.
So once again, this is coming from the Web application, from this Web you URL.
So we can also use Thach in order to request data from the endpoint and fetches newer format for JavaScript,
its promise based.
So you can see more and more of fach being used and the syntax is a whole lot simpler.
It's got some built-In methods that you can make use of, especially when you're connecting to a JSON
data endpoint.
So let's set up the FUTCH request and the fetch by default will use the get.
So same idea here, but by default, it's using the get method, so we don't have to include any further
methods or any other parameters.
If we are using the post, then we can add in headers and there's a bunch of parameters that we can
use with Fach.
So once it makes a connection to the URL, then it's going to move on to the next part of the promise,
and that's going to be where it's returning back the response data.
And depending on how this data's coming back, it can be a number of different formats.
So this is going to come back within a JSON format.
So that's the response object.
And I'm going to use the arrow functions.
So we're simply going to be returning back the response object and doing a return on it.
So that's going to move it to the next part of the promise where now this is going to be responded back.
And because this is JSON, there's a special method that converts the JSON data into JavaScript object
within fetch, and that's just going to be by the JSON and the rounded brackets.
So next up, we're retrieving it back as data.
And then from here, what we'll do right now is we'll just console log out the data.
So we'll be roughly at the same point where we are here, where we've got the response text value.
So let's see how Futch works and we're returning back the results array.
So this is the same point that we have here.
And because this is going to be all the same going forward, what we can do is we can create a function
that will add the text.
So this will add in whatever the new object data is and just call that data and it can loop through
the data results.
And we can even shorten this as well.
We can pass it in as the data results so that we'll just whatever it retrieves back the data results,
it can output those into the output area.
So let's also add that here we've got the data results and now we've got the two requests, methods.
They're both connecting to the same function that's going to output the content onto the page.
Let's refresh.
Just make sure that they're both working and they should both be working actually the same way.
And so there we go.
We've got ability to list out and connect to an endpoint.
So one other thing that I want to do before we conclude.
So if for whatever reason the endpoint isn't working, we can also run with local JSON file.
So let's go ahead and we're going to create our user JSON file.
So I'm saving it on the same folder directory as I've got my other files, my JavaScript files and my
HTML file.
And what I'm going to do is I'm going to go over to the endpoint, just select everything from that
endpoint and save it.
So now instead of using the endpoint and of course I'm going to always have the same data.
So that's one of the disadvantages.
But this is another option in case the random user isn't working.
So you can create your own random user JSON file and that will still work within the file.
But as we can see, the data's always going to be the same because it's just pulling it in from this
JSON file.
So that's an alternative.
If for whatever reason, you can't reach the endpoint, that you can always have the JSON file locally
and make your requests or your fetch requests to those local files as well.