WEBVTT 0 00:17.080 --> 00:18.280 I told you its not that bad. 1 00:18.630 --> 00:22.630 We've seen the GET method, but now I want to talk about the POST method. 2 00:23.200 --> 00:24.940 The POST method is a little bit different. 3 00:25.310 --> 00:30.610 It's still the method the browser uses to talk to the server, but it's just talking in a slightly different 4 00:30.610 --> 00:30.920 way. 5 00:31.420 --> 00:33.880 It's basically the browser giving this request. 6 00:34.660 --> 00:38.440 "Hey, server, look at this data and send me back a result." 7 00:38.650 --> 00:41.160 That is also a very valid request, isn't it? 8 00:41.770 --> 00:43.540 Our browser is very reasonable. 9 00:43.660 --> 00:48.910 (sound: "Yes, I am not difficult"). But in this instance, there is one very, very important difference, and that... 10 00:48.910 --> 00:54.160 is, the data is added to the body of the HTTP request. 11 00:54.460 --> 00:59.980 And this means when the form is submitted using the POST method, you get no data appended to the 12 00:59.980 --> 01:00.450 URL 😲. 13 01:00.700 --> 01:05.170 And let me show you what this looks like, because you might be a bit confused at this point. 14 01:05.170 --> 01:07.360 But again, it's not that difficult. 15 01:07.360 --> 01:12.250 Let me hop over to the IDE and show you what this looks like. We've looked at the GET method, 16 01:12.250 --> 01:15.730 I want us to now quickly discuss the POST method. 17 01:16.300 --> 01:20.290 And this was the example we looked at with GET, remember. We have name, message and submit. 18 01:20.890 --> 01:22.960 But now I want us to go to our IDE... 19 01:23.380 --> 01:28.900 and the only change I want us to make, is I want us to change this to a POST request. 20 01:29.910 --> 01:35.040 Now, if we go back to our browser and refresh, and type "Clyde" and type "Hello World"... 21 01:36.710 --> 01:44.840 when I now click on submit, look at our URL. Nothing happens! Of course, the URI does not exist... 22 01:44.840 --> 01:46.530 and that's why we get this error message. 23 01:46.980 --> 01:51.710 The point I'm trying to make is that our data is not appended to the URL anymore, is it? 24 01:53.150 --> 01:58.670 Well, where is it? Well, as I mentioned, it's in the body of the request. So to inspect our dev tools, 25 01:59.080 --> 02:00.470 let's go to the network tag again... 26 02:02.260 --> 02:05.320 let's just go back in the browser, refresh everything. 27 02:06.280 --> 02:07.780 Here we go. Clyde. 28 02:08.760 --> 02:14.070 Hello World. Annnnnnd let's submit. The method now in our... 29 02:15.000 --> 02:17.410 dev tools is telling us it was a POST request. 30 02:17.760 --> 02:21.620 We know it's failed because the URI doesn't exist, but ignore that for now. 31 02:21.750 --> 02:22.820 We're not looking at that. 32 02:23.220 --> 02:26.790 We are just looking at how the data is sent to the server... 33 02:26.940 --> 02:28.800 in our case, a server that doesn't exist. 34 02:29.280 --> 02:35.430 If we click on this, we get more detail about the request. And what's very cool is that we can see 35 02:35.430 --> 02:36.420 it's a POST request. 36 02:37.780 --> 02:41.500 If we scroll slightly down, we can see the host. 37 02:43.890 --> 02:47.790 We can even see the content-length, which is pretty cool as well. 38 02:48.570 --> 02:53.160 Another very important property that we're going to be talking about a lot later in this course, is this 39 02:53.310 --> 02:59.460 content-type, this application/x-www-form-urlencoded. 40 03:00.150 --> 03:02.970 That tells us that this is a POST request. 41 03:03.280 --> 03:03.990 "Oh, Clyde. 42 03:03.990 --> 03:05.040 But this is all good and well. 43 03:05.040 --> 03:06.340 But where is our data?" 44 03:06.550 --> 03:12.210 Well, we can keep scrolling down, and actually view the source data? 45 03:12.330 --> 03:13.010 There it is. 46 03:13.620 --> 03:13.980 Wow 🤩. 47 03:13.980 --> 03:14.870 This blows my mind 🤯. 48 03:14.880 --> 03:15.570 Isn't it awesome? 49 03:15.900 --> 03:21.660 You can already tell that one of the main differences between the GET and POST request is where the 50 03:21.660 --> 03:24.170 data is available. With the GET method, 51 03:24.180 --> 03:26.640 we saw that the data was appended to the URL. 52 03:27.000 --> 03:30.980 In this instance, we know it's attached to the body of the request. 53 03:31.990 --> 03:32.610 There we go. 54 03:32.820 --> 03:34.260 I hope it's starting to sink in now. 55 03:34.270 --> 03:40.350 Remember, an HTTP request consists of two components, a header and a body. 56 03:40.680 --> 03:46.790 And with the POST method, all your data from the form is appended to the body of the request. 57 03:46.800 --> 03:47.490 Makes sense. 58 03:48.120 --> 03:50.100 And now, last but not least. 59 03:50.400 --> 03:54.900 Well, actually, it is least, it's not used that often... 60 03:55.320 --> 03:56.480 the dialog... 61 03:56.880 --> 03:57.810 what is that about 🤷‍♀️? 62 03:58.410 --> 04:04.890 This value is specific to forms that are inside a dialogue element. And don't worry too much what it 63 04:04.890 --> 04:05.040 is... 64 04:05.040 --> 04:09.210 the <dialog> tag just defines a dialog box or sub-window. 65 04:09.510 --> 04:13.350 It just makes it easy for us to create pop-up dialogues and modals on a web page. 66 04:13.350 --> 04:19.830 And by having this value, it tells a browser to close the box when a submit event is fired on a 67 04:19.830 --> 04:20.750 form. Again, 68 04:20.760 --> 04:22.500 don't worry too much about the dialog... 69 04:22.500 --> 04:24.210 you're not really going to use it that much. 70 04:24.450 --> 04:29.100 By far, the two most important are the GET and POST methods. 71 04:29.460 --> 04:34.170 But now you might be thinking you've mastered the GET and POST methods and the differences between 72 04:34.170 --> 04:38.540 them, but there are a few other subtle differences we need to talk about. 73 04:38.940 --> 04:43.200 So in the next lecture, let's just talk a little bit more about the GET versus the POST. 74 04:43.500 --> 04:48.660 I really do hope you learning a ton in this course, but at the same time having fun, because that's what 75 04:48.660 --> 04:49.170 it's about. 76 04:49.260 --> 04:50.410 But enough "blibber-blabber". 77 04:50.790 --> 04:52.110 See you in the next lecture.