In this lesson, we are going to be creating a mini application that's going to be using fetch to request
a few different text files.
So within our application interface, we're going to creating a dropdown list of all of the text files
that we have available.
You can select from any one of the text files.
And if I select Test two and the click me button, it's going to load whatever content I have within
the file.
If I update the file and go back and load it, it's going to upload and update the current text content.
And these are just a few other test files.
So it's going to be a great practice exercise in building a mini web application that you can practice
Thach with and will also be going over some more information about Ajax and Fetch and how it works.
So let's get started, I'd be reviewing Ajax requests and how they work and also how we can implement
them within our JavaScript projects in order to pull in JSON data and AJAX, things can go very well
together, even though that the official definition of Ajax is an XML objects.
So it's an asynchronous JavaScript and XML object.
So what AJAX is, it's a technique of connecting many web different different web technologies together
to make a request to a server and then pulling back some data.
So now more modern implementations will commonly utilize JSON instead of XML.
So there's a more modern common way to get data.
They've got an example over here on how the conventional model of the Web application.
So you open up your Web browser and the Web browser makes a connection to the Web server.
The Web server sends the content back to the Web browser and you see it being displayed on the page
with Ajax model.
It's slightly different.
And what Ajax really did solve is it solved the problem where whenever we want to take part of a page
and display some new items onto the page, and if we don't want to do a page reload, this is where
Ajax comes in and allows us to solve this, where it allows us to have this extra communication between
the Ajax engine so within the JavaScript, making their request to the server and then getting data
back from the server and updating the Web page using JavaScript and interacting with the DOM.
So now with the more modern format of the Fetch API.
So this is a more recent addition into what we have available for the JavaScript methods.
Previously it was XML HTP request objects.
So with Fetch the Neurotechnologies allowed us to make HGP request directly to the resource.
So just like in the example here where we've got the web user and web browser, so it's loading the
Web page and then the background, the JavaScript can make requests to the server and pull back the
data.
And in this case and in most cases nowadays, it's going to be JSON data.
So it allows us to make the request, go to our favorite website and get dynamic content generated,
such as Amazon.
YouTube's and most other websites are using some type of format where they're making requests and pulling
back data.
There's an example of a JavaScript example of the XML HDP request object.
And then they also have an example of what we can do with J query.
So there's an exit query example and then most recently is fetch.
So as you can see the features the simplest and it allows us to make the request fairly easily where
we only just need the one parameter where we've got the URL and we have been doing fetch and fetch is
Promis space.
So it allows us to make the request.
And once the data comes in, then it handles the response content.
So what Ajax has done is it's allowed us to update page is and refresh the content quickly and easily,
it's also allowed us to download each update and.
Allowed us to not have to load all of the data with every Web page so we can make alternative requests,
save some bandwidth for the Web user.
So the Fetch API in itself is a modern replacement for the X HRR object, so therefore we are only going
to be focusing on fetch in the upcoming lessons and also within the previous lessons that we were focused
on.
And it was really introduced to Web browsers to make HP requests a lot easier to do in JavaScript.
So let's go ahead and create a simple request.
And I'll just call it pro one, James, and go ahead in, will create our JavaScript file.
So we're just using a basic HTML shell or we've got the had the title, the style.
We've got an H1 tag that has JavaScript.
We've got a div where we can connect to an output, some content, we've got a button.
So if we need some interaction, we can connect to that button, object on the page and minimize the
HTML that we have to construct and use and we can optimize what we're doing with JavaScript.
So go ahead and create a new file, call it pro one G.S. and this is going to serve as our project as
well.
So I'm just storing it within the same folder directory as the indexed HTML, so I'm just linking to
it directly.
And we're also going to create another file, so previously we have been working with Jason, but with
vetch, there's more flexibility than just getting the JSON data.
So it is ideal to get Jaeson data, but we can also get text files and image files as well.
So let's go ahead and create a new file.
And this is going to be just a regular text message.
So just save that as text text file and it'll say welcome to my page, will make fetch request and get
the contents of the text file and output that onto the page.
So going into the text file.
Let's set up the JavaScript where it will select the element with the output class, so that will give
us a container that we can output content to.
So using documents and query selector, select the element with a class of output.
So select that into the const object of output and then also for the button and I'll just do B10 one
using the documents and query selector.
Let's select the elements with a class of B10 and that will allow us to add an event listener to the
button fairly easily.
So we're listening for the button.
Add an event listener.
The event that we're listening for is a click.
So whenever it gets clicked, fires off the event object and we want to output some content within the
page.
So for now we'll just output the text content and we'll write clicked.
So we've got our clicked button, so that's firing off whatever the button gets clicked.
So we want to add and make a fetch request to the text file and return back the contents of the text
file onto the Web page.
So let's select our End Point, our Web you URL.
And this is going to be the text file that we've just created.
So it's going to be where we're going to be making the request to.
And then using fetch method, we're making the request to the URL and then on the response return.
We're going to return back the content as text method.
And once we have the data, then we can make use of it within the code.
So for now, we'll just output the contents as data to do a click.
And we've got welcome to my page.
So we're outputting the contents as data.
So now if we want to update the text content with the content from test text, let's go ahead and update
the content with data and save that.
So welcome to my page.
So if we have any changes within the test text content, that will also update on the page whenever
we make the request.
So it's getting the content directly from the text file.
We can have multiple text files if we want as well.
So this can be.
Test text number one, or we can have an array of those, and then as we come into the page, we might
have multiple files.
And I just got to go also create these files.
So we've got an array of files and let's receive this as text one and then also I'll receive it as text
two.
And this one might have a different message.
So hello, world.
So we've got a few different pages there, a few different Web URLs, and we want to make a dropdown
where we can select and make a selection of these options and load the content into the output.
So let's do that where we're going to loop through the euro and for each and as we loop through each
one of the elements, we'll put them to the page and we'll also create a separate object.
So this is going to be where we've got the content or we can just select the.
The first header using the documents and query selector, selecting the element with the H1, so that's
where we've got the JavaScript on the page.
And we'll update the tax content as data and let's update what we've got for you or else sort of make
a quick update there.
And I'll take this request and put it in a function.
And just call it get file, so we'll be looking for whatever the you are jealous that we're passing
in.
And as we loop through, we'll create a select object, so using the document.
Creates elements.
And this an equal sign there, so the element that we're creating is the select dropdown and then for
each one of these, we're going to add them as options.
So for Output's append.
Select.
So there's our select object that's been appended, so as we loop through the walls, we create the
option.
So using once again document create elements and the element that we're creating is going to be an option.
So the option is going to get appended.
So select append and it's going to select and append the option.
So that gives us the three options there.
We don't have anything filled out yet for it.
So option value and that's going to be equal to whatever the element value is.
Option text content is also going to be equal to the element.
So now we've got all three of the files there.
You can do an inspect on the select just to make sure that we do have the values present.
And so when we do make the selection of the button where we've got the click me.
Will console log out the.
Select objects and whatever the current value is for it, and that way we should be seeing the euro
and we can load the page content dynamically in.
So that's going to serve as the Web URL.
So do get file.
And now we can select from any one of the files in the dropdown and output the page content.
So this is a quick little application that you can create and practice working with fetch.
The task for this lesson is to create some text filicide in some content, you can add whatever you
want, just some regular text files, save them to the directory or just get the Web URLs for the text
files, create an array of those files within the JavaScript code, and then also loop through that
array, creating a dropdown, selecting, allowing the user to select whatever file they want to make
the request to.
When they click the button, let it load the contents using fach on output, the contents of the text
file onto the webpage.