1 00:00:02,240 --> 00:00:04,910 So what exactly is this module about? 2 00:00:04,910 --> 00:00:10,480 Well of course network requests, but what do I mean by that and why does this matter? 3 00:00:10,580 --> 00:00:13,160 Let's say we have our script and our web page, 4 00:00:13,160 --> 00:00:19,280 so the rendered HTML code which we see in the browser and our script logic and on the screen, 5 00:00:19,310 --> 00:00:25,430 so the rendered HTML code, we might have a form where the user can enter some data and an unordered 6 00:00:25,430 --> 00:00:30,160 list where we output a list of posts which the user created let's say, 7 00:00:30,170 --> 00:00:32,580 that could be a simple web page we're building. 8 00:00:32,810 --> 00:00:38,150 Now we might be powering this with the help of Javascript, though 9 00:00:38,150 --> 00:00:43,910 I really want to emphasize that you could build such a page without any client side Javascript code, 10 00:00:44,210 --> 00:00:50,870 you could dynamically generate this HTML code including the list of posts which might be created dynamically 11 00:00:51,080 --> 00:00:52,180 totally on the server, 12 00:00:52,190 --> 00:00:58,190 you could do all of that on the server with a language like PHP for example where you get data from 13 00:00:58,190 --> 00:01:03,350 a database on the server and then you render different HTML content based on the page the user 14 00:01:03,350 --> 00:01:04,280 is visiting 15 00:01:04,280 --> 00:01:11,270 but in addition to that or as an alternative to that, we could utilize browser side Javascript to provide 16 00:01:11,510 --> 00:01:16,610 a better user experience maybe, where we avoid unnecessary page reloads. 17 00:01:16,610 --> 00:01:21,890 So we could have some Javascript code that runs in the browser attached to this web page basically where 18 00:01:21,890 --> 00:01:28,840 we for example gather the user input, where we may be validate it to show the user an error message 19 00:01:28,850 --> 00:01:34,310 if the title of a post is missing or anything like that and we're gathering all of that, we're maybe 20 00:01:34,310 --> 00:01:43,040 also managing clicks on posts in that list of posts to for example start a deletion process, anything 21 00:01:43,040 --> 00:01:44,000 like that. 22 00:01:44,030 --> 00:01:50,720 Now besides that basic management of what we see on the screen or besides giving us these basic tools 23 00:01:50,720 --> 00:01:57,230 of interacting with the user input, we might want to do more in client side Javascript, let's say the 24 00:01:57,230 --> 00:02:03,620 user submits this form. The traditional way of sending this to the server would be to let the browser 25 00:02:03,620 --> 00:02:10,550 do the default work and send that off to a server where you then have code to handle it. 26 00:02:10,640 --> 00:02:16,010 Now with Javascript, you learned that you can prevent the default so that you can prevent this from 27 00:02:16,010 --> 00:02:22,220 happening, so that the form is not automatically sent to a server and instead you can step in with Javascript 28 00:02:22,370 --> 00:02:29,930 for example to validate it but then also to store it on the server from inside Javascript, to send a 29 00:02:29,930 --> 00:02:36,200 HttpRequest to some backend, to some server without reloading the page which would happen if you 30 00:02:36,200 --> 00:02:42,380 let the browser do its default and you might do the same for fetching posts, so that you fetch posts 31 00:02:42,380 --> 00:02:49,040 to update that list of posts without reloading the entire page because if we only fetched updated posts, 32 00:02:49,070 --> 00:02:54,710 we don't really need to re-render the entire page, right and therefore we might want to interact with 33 00:02:54,710 --> 00:03:00,590 our backend which we need to have in any case from inside Javascript instead of letting the browser 34 00:03:00,590 --> 00:03:07,740 do it with the default behaviors. Now our backend here would typically be an API and that stands for 35 00:03:07,770 --> 00:03:10,140 Application Programming Interface, 36 00:03:10,140 --> 00:03:17,040 that means it's a web server which exposes different so-called endpoints, different URLs to which 37 00:03:17,040 --> 00:03:21,920 we can send requests and based on which request we send to which URL, 38 00:03:21,960 --> 00:03:24,080 different things will happen on the server 39 00:03:24,240 --> 00:03:27,360 and it's the engineers working on that server side logic, 40 00:03:27,360 --> 00:03:32,230 so the people writing the server side code that decide which endpoints exist, 41 00:03:32,310 --> 00:03:38,220 so which HttpRequests are supported, which URLs are offered. 42 00:03:38,220 --> 00:03:44,730 Now as I said, traditionally the page and the browser might have communicated with that server directly 43 00:03:45,120 --> 00:03:50,670 but that's not what we want here because that would mean that our server always needs to return a brand 44 00:03:50,730 --> 00:03:56,460 new HTML page and therefore the page would need to reload, would need to be re-rendered, that could 45 00:03:56,460 --> 00:04:02,660 lead to page flickering and in general, it might not offer the best possible user experience. 46 00:04:02,730 --> 00:04:08,070 Instead what we want to do is we want to reach out to these different endpoints which I described, where 47 00:04:08,070 --> 00:04:15,930 we for example might support on the server side a post request to the serverdomain.com/posts 48 00:04:16,260 --> 00:04:22,140 and a get request to the same domain/posts where we might support certain pieces of data that 49 00:04:22,140 --> 00:04:28,010 can be attached to the incoming post request and I'll come back to post and get in a second and where 50 00:04:28,030 --> 00:04:35,730 therefore this server doesn't really want a default request sent by the browser but needs specific requests 51 00:04:35,760 --> 00:04:43,260 targeting these specific endpoints and that's what we can do with the help of Javascript, with some behind 52 00:04:43,260 --> 00:04:48,840 the scenes communication as I'd like to call it, behind the scenes because it happens without the page 53 00:04:48,990 --> 00:04:55,590 reloading, without us refreshing the web page, instead will utilize Javascript to send requests that are 54 00:04:55,590 --> 00:05:00,780 correctly configured and hold all the data the server wants to these individual endpoints.