1 00:00:02,380 --> 00:00:09,320 In this lesson, we are going to be creating a mini application that's going to be using fetch to request 2 00:00:09,320 --> 00:00:10,700 a few different text files. 3 00:00:11,120 --> 00:00:17,450 So within our application interface, we're going to creating a dropdown list of all of the text files 4 00:00:17,450 --> 00:00:18,470 that we have available. 5 00:00:18,710 --> 00:00:20,870 You can select from any one of the text files. 6 00:00:21,050 --> 00:00:27,140 And if I select Test two and the click me button, it's going to load whatever content I have within 7 00:00:27,140 --> 00:00:27,620 the file. 8 00:00:27,780 --> 00:00:35,660 If I update the file and go back and load it, it's going to upload and update the current text content. 9 00:00:35,660 --> 00:00:37,990 And these are just a few other test files. 10 00:00:38,300 --> 00:00:44,150 So it's going to be a great practice exercise in building a mini web application that you can practice 11 00:00:44,150 --> 00:00:49,840 Thach with and will also be going over some more information about Ajax and Fetch and how it works. 12 00:00:51,600 --> 00:00:57,690 So let's get started, I'd be reviewing Ajax requests and how they work and also how we can implement 13 00:00:57,690 --> 00:01:05,040 them within our JavaScript projects in order to pull in JSON data and AJAX, things can go very well 14 00:01:05,040 --> 00:01:10,930 together, even though that the official definition of Ajax is an XML objects. 15 00:01:10,930 --> 00:01:13,940 So it's an asynchronous JavaScript and XML object. 16 00:01:14,280 --> 00:01:20,790 So what AJAX is, it's a technique of connecting many web different different web technologies together 17 00:01:20,790 --> 00:01:25,020 to make a request to a server and then pulling back some data. 18 00:01:25,260 --> 00:01:30,960 So now more modern implementations will commonly utilize JSON instead of XML. 19 00:01:31,170 --> 00:01:35,820 So there's a more modern common way to get data. 20 00:01:36,060 --> 00:01:41,340 They've got an example over here on how the conventional model of the Web application. 21 00:01:41,610 --> 00:01:47,040 So you open up your Web browser and the Web browser makes a connection to the Web server. 22 00:01:47,040 --> 00:01:53,100 The Web server sends the content back to the Web browser and you see it being displayed on the page 23 00:01:53,400 --> 00:01:54,450 with Ajax model. 24 00:01:54,450 --> 00:01:55,470 It's slightly different. 25 00:01:55,650 --> 00:02:02,940 And what Ajax really did solve is it solved the problem where whenever we want to take part of a page 26 00:02:03,870 --> 00:02:10,980 and display some new items onto the page, and if we don't want to do a page reload, this is where 27 00:02:10,980 --> 00:02:18,240 Ajax comes in and allows us to solve this, where it allows us to have this extra communication between 28 00:02:18,240 --> 00:02:23,850 the Ajax engine so within the JavaScript, making their request to the server and then getting data 29 00:02:23,850 --> 00:02:30,420 back from the server and updating the Web page using JavaScript and interacting with the DOM. 30 00:02:30,840 --> 00:02:34,730 So now with the more modern format of the Fetch API. 31 00:02:35,070 --> 00:02:40,710 So this is a more recent addition into what we have available for the JavaScript methods. 32 00:02:41,010 --> 00:02:44,210 Previously it was XML HTP request objects. 33 00:02:44,550 --> 00:02:51,480 So with Fetch the Neurotechnologies allowed us to make HGP request directly to the resource. 34 00:02:51,510 --> 00:02:58,110 So just like in the example here where we've got the web user and web browser, so it's loading the 35 00:02:58,110 --> 00:03:03,000 Web page and then the background, the JavaScript can make requests to the server and pull back the 36 00:03:03,000 --> 00:03:03,380 data. 37 00:03:03,570 --> 00:03:07,830 And in this case and in most cases nowadays, it's going to be JSON data. 38 00:03:08,040 --> 00:03:15,450 So it allows us to make the request, go to our favorite website and get dynamic content generated, 39 00:03:15,690 --> 00:03:17,190 such as Amazon. 40 00:03:17,190 --> 00:03:24,480 YouTube's and most other websites are using some type of format where they're making requests and pulling 41 00:03:24,480 --> 00:03:25,080 back data. 42 00:03:25,350 --> 00:03:31,170 There's an example of a JavaScript example of the XML HDP request object. 43 00:03:31,410 --> 00:03:36,550 And then they also have an example of what we can do with J query. 44 00:03:36,570 --> 00:03:40,240 So there's an exit query example and then most recently is fetch. 45 00:03:40,480 --> 00:03:47,880 So as you can see the features the simplest and it allows us to make the request fairly easily where 46 00:03:47,880 --> 00:03:54,630 we only just need the one parameter where we've got the URL and we have been doing fetch and fetch is 47 00:03:54,630 --> 00:03:55,500 Promis space. 48 00:03:55,650 --> 00:03:57,270 So it allows us to make the request. 49 00:03:57,270 --> 00:04:01,860 And once the data comes in, then it handles the response content. 50 00:04:05,020 --> 00:04:13,290 So what Ajax has done is it's allowed us to update page is and refresh the content quickly and easily, 51 00:04:13,720 --> 00:04:17,560 it's also allowed us to download each update and. 52 00:04:19,590 --> 00:04:26,210 Allowed us to not have to load all of the data with every Web page so we can make alternative requests, 53 00:04:26,400 --> 00:04:28,800 save some bandwidth for the Web user. 54 00:04:31,350 --> 00:04:38,970 So the Fetch API in itself is a modern replacement for the X HRR object, so therefore we are only going 55 00:04:38,970 --> 00:04:44,970 to be focusing on fetch in the upcoming lessons and also within the previous lessons that we were focused 56 00:04:44,970 --> 00:04:45,150 on. 57 00:04:46,200 --> 00:04:52,530 And it was really introduced to Web browsers to make HP requests a lot easier to do in JavaScript. 58 00:04:53,100 --> 00:04:56,070 So let's go ahead and create a simple request. 59 00:04:58,730 --> 00:05:05,810 And I'll just call it pro one, James, and go ahead in, will create our JavaScript file. 60 00:05:06,050 --> 00:05:11,900 So we're just using a basic HTML shell or we've got the had the title, the style. 61 00:05:12,230 --> 00:05:14,720 We've got an H1 tag that has JavaScript. 62 00:05:14,990 --> 00:05:20,050 We've got a div where we can connect to an output, some content, we've got a button. 63 00:05:20,060 --> 00:05:26,510 So if we need some interaction, we can connect to that button, object on the page and minimize the 64 00:05:26,750 --> 00:05:33,360 HTML that we have to construct and use and we can optimize what we're doing with JavaScript. 65 00:05:33,380 --> 00:05:41,610 So go ahead and create a new file, call it pro one G.S. and this is going to serve as our project as 66 00:05:41,630 --> 00:05:41,930 well. 67 00:05:42,290 --> 00:05:48,770 So I'm just storing it within the same folder directory as the indexed HTML, so I'm just linking to 68 00:05:48,770 --> 00:05:49,490 it directly. 69 00:05:52,340 --> 00:05:58,340 And we're also going to create another file, so previously we have been working with Jason, but with 70 00:05:58,340 --> 00:06:01,700 vetch, there's more flexibility than just getting the JSON data. 71 00:06:01,820 --> 00:06:08,200 So it is ideal to get Jaeson data, but we can also get text files and image files as well. 72 00:06:08,240 --> 00:06:11,290 So let's go ahead and create a new file. 73 00:06:11,720 --> 00:06:14,240 And this is going to be just a regular text message. 74 00:06:14,250 --> 00:06:26,510 So just save that as text text file and it'll say welcome to my page, will make fetch request and get 75 00:06:26,510 --> 00:06:32,130 the contents of the text file and output that onto the page. 76 00:06:32,960 --> 00:06:35,480 So going into the text file. 77 00:06:38,020 --> 00:06:44,470 Let's set up the JavaScript where it will select the element with the output class, so that will give 78 00:06:44,470 --> 00:06:47,710 us a container that we can output content to. 79 00:06:47,740 --> 00:06:53,440 So using documents and query selector, select the element with a class of output. 80 00:06:53,780 --> 00:07:01,390 So select that into the const object of output and then also for the button and I'll just do B10 one 81 00:07:01,660 --> 00:07:04,630 using the documents and query selector. 82 00:07:04,840 --> 00:07:10,960 Let's select the elements with a class of B10 and that will allow us to add an event listener to the 83 00:07:10,960 --> 00:07:11,970 button fairly easily. 84 00:07:12,790 --> 00:07:14,380 So we're listening for the button. 85 00:07:14,950 --> 00:07:16,360 Add an event listener. 86 00:07:16,360 --> 00:07:18,480 The event that we're listening for is a click. 87 00:07:18,760 --> 00:07:26,290 So whenever it gets clicked, fires off the event object and we want to output some content within the 88 00:07:26,290 --> 00:07:26,750 page. 89 00:07:27,400 --> 00:07:33,820 So for now we'll just output the text content and we'll write clicked. 90 00:07:36,480 --> 00:07:40,620 So we've got our clicked button, so that's firing off whatever the button gets clicked. 91 00:07:40,890 --> 00:07:48,840 So we want to add and make a fetch request to the text file and return back the contents of the text 92 00:07:48,840 --> 00:07:50,840 file onto the Web page. 93 00:07:53,880 --> 00:07:57,650 So let's select our End Point, our Web you URL. 94 00:07:58,050 --> 00:08:01,580 And this is going to be the text file that we've just created. 95 00:08:01,830 --> 00:08:05,160 So it's going to be where we're going to be making the request to. 96 00:08:07,880 --> 00:08:18,290 And then using fetch method, we're making the request to the URL and then on the response return. 97 00:08:21,660 --> 00:08:27,810 We're going to return back the content as text method. 98 00:08:30,650 --> 00:08:37,400 And once we have the data, then we can make use of it within the code. 99 00:08:37,430 --> 00:08:43,400 So for now, we'll just output the contents as data to do a click. 100 00:08:43,410 --> 00:08:45,500 And we've got welcome to my page. 101 00:08:45,770 --> 00:08:48,800 So we're outputting the contents as data. 102 00:08:49,160 --> 00:08:58,130 So now if we want to update the text content with the content from test text, let's go ahead and update 103 00:08:58,730 --> 00:09:04,200 the content with data and save that. 104 00:09:04,250 --> 00:09:05,480 So welcome to my page. 105 00:09:05,720 --> 00:09:13,490 So if we have any changes within the test text content, that will also update on the page whenever 106 00:09:13,490 --> 00:09:14,570 we make the request. 107 00:09:15,370 --> 00:09:19,680 So it's getting the content directly from the text file. 108 00:09:20,540 --> 00:09:23,310 We can have multiple text files if we want as well. 109 00:09:23,660 --> 00:09:24,740 So this can be. 110 00:09:25,900 --> 00:09:33,580 Test text number one, or we can have an array of those, and then as we come into the page, we might 111 00:09:33,580 --> 00:09:35,440 have multiple files. 112 00:09:35,440 --> 00:09:37,720 And I just got to go also create these files. 113 00:09:37,990 --> 00:09:49,120 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 114 00:09:49,120 --> 00:09:49,600 two. 115 00:09:50,200 --> 00:09:52,430 And this one might have a different message. 116 00:09:52,450 --> 00:09:53,520 So hello, world. 117 00:09:54,250 --> 00:09:59,980 So we've got a few different pages there, a few different Web URLs, and we want to make a dropdown 118 00:10:00,250 --> 00:10:07,540 where we can select and make a selection of these options and load the content into the output. 119 00:10:08,060 --> 00:10:16,810 So let's do that where we're going to loop through the euro and for each and as we loop through each 120 00:10:16,810 --> 00:10:24,550 one of the elements, we'll put them to the page and we'll also create a separate object. 121 00:10:26,100 --> 00:10:30,360 So this is going to be where we've got the content or we can just select the. 122 00:10:33,450 --> 00:10:40,860 The first header using the documents and query selector, selecting the element with the H1, so that's 123 00:10:40,860 --> 00:10:42,900 where we've got the JavaScript on the page. 124 00:10:45,010 --> 00:10:55,030 And we'll update the tax content as data and let's update what we've got for you or else sort of make 125 00:10:55,030 --> 00:10:56,320 a quick update there. 126 00:10:58,900 --> 00:11:02,230 And I'll take this request and put it in a function. 127 00:11:05,630 --> 00:11:11,630 And just call it get file, so we'll be looking for whatever the you are jealous that we're passing 128 00:11:11,630 --> 00:11:11,900 in. 129 00:11:15,500 --> 00:11:22,640 And as we loop through, we'll create a select object, so using the document. 130 00:11:26,130 --> 00:11:27,930 Creates elements. 131 00:11:31,220 --> 00:11:39,980 And this an equal sign there, so the element that we're creating is the select dropdown and then for 132 00:11:39,980 --> 00:11:42,460 each one of these, we're going to add them as options. 133 00:11:43,670 --> 00:11:46,310 So for Output's append. 134 00:11:48,060 --> 00:11:48,660 Select. 135 00:11:51,170 --> 00:11:58,700 So there's our select object that's been appended, so as we loop through the walls, we create the 136 00:11:58,700 --> 00:11:59,240 option. 137 00:11:59,390 --> 00:12:06,040 So using once again document create elements and the element that we're creating is going to be an option. 138 00:12:06,710 --> 00:12:09,330 So the option is going to get appended. 139 00:12:09,590 --> 00:12:15,450 So select append and it's going to select and append the option. 140 00:12:16,250 --> 00:12:18,620 So that gives us the three options there. 141 00:12:18,650 --> 00:12:20,560 We don't have anything filled out yet for it. 142 00:12:20,870 --> 00:12:26,360 So option value and that's going to be equal to whatever the element value is. 143 00:12:26,720 --> 00:12:33,380 Option text content is also going to be equal to the element. 144 00:12:33,920 --> 00:12:36,580 So now we've got all three of the files there. 145 00:12:36,950 --> 00:12:42,850 You can do an inspect on the select just to make sure that we do have the values present. 146 00:12:43,430 --> 00:12:48,020 And so when we do make the selection of the button where we've got the click me. 147 00:12:50,560 --> 00:12:52,990 Will console log out the. 148 00:12:54,900 --> 00:13:03,200 Select objects and whatever the current value is for it, and that way we should be seeing the euro 149 00:13:05,010 --> 00:13:09,950 and we can load the page content dynamically in. 150 00:13:09,960 --> 00:13:12,930 So that's going to serve as the Web URL. 151 00:13:14,970 --> 00:13:16,710 So do get file. 152 00:13:18,180 --> 00:13:23,440 And now we can select from any one of the files in the dropdown and output the page content. 153 00:13:24,600 --> 00:13:30,480 So this is a quick little application that you can create and practice working with fetch. 154 00:13:32,440 --> 00:13:37,540 The task for this lesson is to create some text filicide in some content, you can add whatever you 155 00:13:37,540 --> 00:13:43,990 want, just some regular text files, save them to the directory or just get the Web URLs for the text 156 00:13:43,990 --> 00:13:50,110 files, create an array of those files within the JavaScript code, and then also loop through that 157 00:13:50,110 --> 00:13:55,690 array, creating a dropdown, selecting, allowing the user to select whatever file they want to make 158 00:13:55,690 --> 00:13:56,530 the request to. 159 00:13:56,710 --> 00:14:03,760 When they click the button, let it load the contents using fach on output, the contents of the text 160 00:14:03,760 --> 00:14:05,620 file onto the webpage.