1 00:00:02,450 --> 00:00:06,910 Now for this module, we again have a little starting project which you find attached, 2 00:00:07,050 --> 00:00:12,530 it's a HTML file with some content in there, some styling and an empty script file which is already 3 00:00:12,530 --> 00:00:18,350 getting imported here and that's of course the script file where we will add our logic. If you load the 4 00:00:18,360 --> 00:00:24,140 HTML file, you'll get this output on the screen, as you'll see this is a project which will allow us to 5 00:00:24,140 --> 00:00:32,180 send data and to also get data and now the tricky thing is we need a server, the browser side 6 00:00:32,180 --> 00:00:34,400 Javascript is not enough. 7 00:00:34,460 --> 00:00:41,780 Now we could write our own server with the help of Javascript and Node.js, Node.js is a Javascript 8 00:00:41,780 --> 00:00:42,770 runtime 9 00:00:42,920 --> 00:00:47,570 outside of the browser which basically enables you to execute Javascript anywhere 10 00:00:47,660 --> 00:00:54,160 and it's a popular solution for writing server side code. Actually later down in the course, 11 00:00:54,240 --> 00:00:57,390 I'll have a module where I introduce you to Node.js, 12 00:00:57,450 --> 00:01:02,360 so that might be interesting. For the moment, in order to focus just on the browser side, 13 00:01:02,370 --> 00:01:10,200 we'll use a dummy API, a dummy web service we can talk to and that's this page, 14 00:01:10,230 --> 00:01:12,180 jsonplaceholder.typeicode.com, 15 00:01:12,270 --> 00:01:13,850 you'll find a link to that attached. 16 00:01:14,400 --> 00:01:20,700 This basically is a page that gives us a dummy web service, a dummy API we can send different requests 17 00:01:20,700 --> 00:01:27,270 to, any data we send to it of course is not permanently stored there, it's just a dummy API which fakes 18 00:01:27,360 --> 00:01:31,980 to store the data but it's great for a getting started with all of that. 19 00:01:32,070 --> 00:01:37,080 Now you'll learn how to use it here on this page, you even get working Javascript code here though we'll 20 00:01:37,080 --> 00:01:43,880 not start with this code here and therefore, it is super simple and a great place to start practicing. 21 00:01:43,980 --> 00:01:49,440 Now if you scroll down a bit on the starting page, you'll see the supported routes or endpoints you could 22 00:01:49,440 --> 00:01:55,530 say and there, you see various HTTP method URL combinations are supported. 23 00:01:55,560 --> 00:01:58,980 Now these are just the paths but they're always appended to this domain, 24 00:01:58,980 --> 00:02:06,090 building a URL therefore and it's a get request to /posts which for example is supported or a 25 00:02:06,090 --> 00:02:13,200 post request to /posts or a delete request to /posts and then some specific post ID and 26 00:02:13,200 --> 00:02:17,850 we'll use this in this module, we'll see various different HTTP methods in action 27 00:02:17,970 --> 00:02:24,060 and this just shows you which kind of requests this fake API accepts. 28 00:02:24,060 --> 00:02:31,050 If you would try to send a different request, let's say a request with the method of post to a URL 29 00:02:31,050 --> 00:02:34,590 or a path which is not listed here, then you would get an error. 30 00:02:34,590 --> 00:02:35,930 So that's what supported, 31 00:02:35,940 --> 00:02:37,900 now let's see how we use it. 32 00:02:38,130 --> 00:02:42,800 Now we'll work with this /posts endpoint and that's the first important thing. 33 00:02:42,810 --> 00:02:45,360 If we click on that, you'll see this data, 34 00:02:45,360 --> 00:02:48,680 this is actually JSON data and I'll come back to that in a second. 35 00:02:48,720 --> 00:02:52,100 What we have here in the URL is the domain, 36 00:02:52,230 --> 00:02:59,520 so jsonplaceholder.typeicode.com and then /posts would be the path and what we sent here 37 00:02:59,520 --> 00:03:05,300 by just entering it like this in the browser is a get request because the browser, if you enter a URL 38 00:03:05,300 --> 00:03:07,100 sends a get request. 39 00:03:07,210 --> 00:03:12,300 Now of course, we don't want to fetch data like this, we want to fetch it from inside Javascript, so that's 40 00:03:12,300 --> 00:03:13,110 what we'll do, 41 00:03:13,110 --> 00:03:17,400 we now just found out that we can send the request to this URL in the end 42 00:03:17,430 --> 00:03:19,230 so that's a great starting point. 43 00:03:19,230 --> 00:03:25,860 And with that, back in app.js, let's get started and let's send our first HttpRequest, starting with 44 00:03:25,860 --> 00:03:31,590 the XMLHttpRequest object and later I'll come back to that and which alternatives you have 45 00:03:31,580 --> 00:03:32,760 and when you want to use which.