WEBVTT 0 00:00.150 --> 00:06.840 Let's move on, let's move on, as I just said, I want us now to turn our attention to POST requests. 1 00:07.470 --> 00:09.210 And do you remember what a POST request does? 2 00:10.210 --> 00:18.190 Well, yes, when you make a POST request, the data of the form is kept in the body of the HTTP 3 00:18.190 --> 00:22.870 request, it's not kept inside the URL as it is with a GET request. 4 00:23.140 --> 00:27.150 That's the major distinguishing feature between a GET and a POST. 5 00:27.400 --> 00:27.940 Have you got it? 6 00:28.980 --> 00:36.690 Well, that's good, but because the data is kept in the body of the HTTP request, this means we have... 7 00:36.690 --> 00:41.070 to decide, as a developer, how the data should be encoded. 8 00:41.520 --> 00:50.610 And HTML forms provide three methods of encoding form data in an HTTP request, and you can already... 9 00:50.610 --> 00:52.670 see the three types on the screen. 10 00:52.920 --> 00:55.740 We've already looked at application/-... 11 00:55.740 --> 00:58.260 x-www-form-urlencoded. Whew! That is a mouthful. 12 00:58.560 --> 00:59.430 Remember what that is? 13 01:00.060 --> 01:04.320 The request body uses the same format as the query string. 14 01:04.710 --> 01:10.980 In other words, the body of the HTTP message will consist of one giant query string. 15 01:11.790 --> 01:15.540 Each name:value pair will be separated by the ampersand, right. 16 01:15.540 --> 01:18.540 And the name will be separated from the value with an equals sign. 17 01:18.810 --> 01:22.230 So it looks pretty similar to our query string with the GET request, 18 01:22.230 --> 01:22.530 right? 19 01:22.800 --> 01:28.440 And that's right, because they both use the same formatting and that's all good and well. 20 01:28.440 --> 01:35.310 But what's really powerful with a POST request is that we can set the encoding type to this multipart/-... 21 01:35.640 --> 01:40.490 form-data, and this is used when you want to send binary data to a server. 22 01:40.860 --> 01:42.900 I'm going to talk more about binary data later. 23 01:42.900 --> 01:45.320 But binary data is just funky data. 24 01:45.330 --> 01:50.340 It's just not text, it's not plain text, images, audio files, etc, etc.. 25 01:50.340 --> 01:56.400 Those are all, what's referred to in the development industry, as binary data, complicated data, funky 26 01:56.610 --> 01:57.000 data. 27 01:58.050 --> 02:03.330 When you're dealing with that, we're going to see that it's more efficient to send it with the encoding... 28 02:03.330 --> 02:06.070 type set to multipart/form-data. 29 02:06.450 --> 02:10.170 And next, we've got this text/plain type. 30 02:10.440 --> 02:16.680 This text/plain type basically just sends it as is. Form fields are not... 31 02:16.710 --> 02:19.340 URL encoded when sent to the server. 32 02:19.680 --> 02:23.970 In other words, the data is sent without any encoding at all. 33 02:24.130 --> 02:31.010 And for this reason, it's not recommended to use this type because it's difficult to predict its behavior. 34 02:31.380 --> 02:34.410 So this text/plain type is very strange. 35 02:34.440 --> 02:35.910 I ignore it when I code. 36 02:35.910 --> 02:36.720 I never use it. 37 02:37.170 --> 02:47.970 In fact, the HTML5 spec even says that this type is not reliable, reliably, reliably, reliably interpreted... 38 02:48.240 --> 02:50.610 or interpretable by computers. 39 02:51.360 --> 02:56.130 So it's only really intended to be human readable. For that reason... 40 02:56.130 --> 03:00.360 avoid using it, as it's pretty much just meant for human understanding and not for machines. 41 03:00.360 --> 03:02.190 So ignore text/plain. 42 03:03.150 --> 03:04.380 I want to take a step back. 43 03:04.380 --> 03:06.930 We've seen that effectively... 44 03:06.930 --> 03:11.700 there are only really two types that you can set for that encoding type attribute, 45 03:11.880 --> 03:12.240 right. 46 03:12.510 --> 03:20.190 The first type, is that hideous long type, application/x-www-form-urlencoded ... I don't even know who comes up 47 03:20.190 --> 03:20.670 with this stuff. 48 03:21.000 --> 03:27.420 The second main type is that multipart/form-data. It's actually a lot easier to say ๐Ÿ˜‚. But don't get lost 49 03:27.420 --> 03:28.020 in the detail. 50 03:28.020 --> 03:30.020 What is the purpose of this? 51 03:30.060 --> 03:32.220 What is the purpose of both of these types? 52 03:32.400 --> 03:33.000 That's right... 53 03:33.000 --> 03:38.910 its sole purpose is just to transport the form data as name:value pairs, to your server. 54 03:38.910 --> 03:48.360 That's all these types are trying to achieve. And they both achieve it, but in many cases one is more 55 03:48.360 --> 03:49.920 efficient than the other. 56 03:50.040 --> 03:55.200 So the bottom line is that depending on the size and type of data being transported over the web from 57 03:55.200 --> 03:59.130 your form, one of these methods will be better than the other. 58 03:59.250 --> 04:04.350 And in order to fully appreciate which you should use, well, you're going to need to understand how 59 04:04.350 --> 04:05.520 it works under the hood. 60 04:06.330 --> 04:06.840 I gotcha. 61 04:06.990 --> 04:08.190 And that's exactly what we're doing. 62 04:08.580 --> 04:10.110 So let's hop back into the lecture. 63 04:10.590 --> 04:13.650 And now for some awesome party knowledge. 64 04:13.860 --> 04:19.830 Did you know work was being done to add another type of encoding type: application/json. 65 04:19.830 --> 04:25.290 But this has been abandoned. (sad trombone) So for the moment, we... 66 04:25.440 --> 04:28.860 can pretty much rely on those two main types. 67 04:29.810 --> 04:30.200 Got it? 68 04:30.650 --> 04:36.950 So remember, this text/plain option is not really used. But don't take my word for it... 69 04:37.220 --> 04:41.690 here is the snippet from HTML5 specification itself. 70 04:42.380 --> 04:45.770 Now, I want to start looking at this POST request in more detail. 71 04:45.830 --> 04:52.270 OK, so the default encoding type for the POST request is the same as a GET request. 72 04:52.280 --> 04:54.280 Its application/x-www-form... 73 04:54.320 --> 04:55.400 -urlencoded. 74 04:56.390 --> 04:57.800 That's the default type. 75 04:58.160 --> 04:59.140 Let me prove it to you. 76 04:59.240 --> 05:00.470 Let's hop over to the Console. 77 05:00.950 --> 05:02.720 Brilliant, brilliant, brilliant stuff. 78 05:02.930 --> 05:04.550 We've seen a GET request, right. 79 05:04.580 --> 05:07.550 This is exactly what we had last time on the screen. 80 05:08.060 --> 05:14.540 But now I want to look at a POST request. So all we are going to do is jump back to our Visual Studio Code, change 81 05:14.540 --> 05:17.840 the method to a POST, and now you are going to see things change. 82 05:18.260 --> 05:19.190 So let's save the file, 83 05:19.190 --> 05:22.850 go back to the browser. So here's our form, and I want to type the same thing. 84 05:22.850 --> 05:27.260 WallyTheWarthog, and the favorite food of Wally can still be grass ๐ŸŒฟ. 85 05:28.750 --> 05:33.580 I want to inspect this, the Network tab. And what's going to happen now when we submit ๐Ÿคท๐Ÿปโ€โ™‚๏ธ? 86 05:34.530 --> 05:43.200 Well, firstly, you'll notice that we've got Content-Type set in the request header. And that Content-Type, 87 05:43.210 --> 05:49.260 remember I said, its default value is application/x-www-form-urlencoded. Well, here is proof. We can... 88 05:49.260 --> 05:50.160 see it in there. 89 05:50.790 --> 05:54.950 The next thing I want to show you is that we don't have query string data anymore. 90 05:54.950 --> 05:59.940 It's not in the URL, it's in the form body data itself. 91 06:00.240 --> 06:03.330 And yes, it looks exactly the same as when we used the GET request, 92 06:03.330 --> 06:03.640 right? 93 06:03.840 --> 06:09.570 We've got each name:value pair separated by the ampersand, and each name and value itself is separated by... 94 06:09.570 --> 06:10.370 an equal sign. 95 06:10.710 --> 06:11.750 So that's pretty straightforward. 96 06:11.760 --> 06:12.930 It looks exactly the same. 97 06:13.290 --> 06:18.270 But we know now its in the body. And we know that Content-Type header is set. 98 06:18.420 --> 06:19.080 This makes sense, 99 06:19.080 --> 06:19.380 right? 100 06:19.590 --> 06:20.220 Let's continue. 101 06:20.990 --> 06:24.510 OK, so we've seen that the default type is application/x-www-form-... 102 06:24.510 --> 06:27.120 urlencoded! Man, that is just such a long word ๐Ÿ˜ต. 103 06:27.330 --> 06:29.720 I can't stand it! Anyways... 104 06:29.760 --> 06:34.220 my dear students, this type is okay, but it's not enough. 105 06:34.380 --> 06:35.450 Why is it not enough? 106 06:35.460 --> 06:36.390 Why do we need more? 107 06:37.260 --> 06:44.360 Well, let's talk about files. Files or what's referred to in the development industry as binary data. 108 06:44.760 --> 06:49.440 It's kind of weird to call it binary data because you and I know that machines can only speak binary... 109 06:49.440 --> 06:50.100 at the end of the day. 110 06:50.100 --> 06:53.300 So everything is binary, but it's just the lingo... 111 06:53.310 --> 06:58.830 we use. Binary data we kind of refer to as complicated data. 112 06:59.280 --> 07:01.540 All other data is just text data. 113 07:01.710 --> 07:09.360 So if we're talking about boring plain old text, that is text data, we normally refer to files as binary... 114 07:09.360 --> 07:15.120 data because there's rich formatting inside, there's images, all that kind of funky stuff. Files are binary... 115 07:15.120 --> 07:15.540 data. 116 07:15.870 --> 07:23.520 And what's super interesting is that HTTP is a text protocol, the keyword here being "text". 117 07:24.000 --> 07:29.790 And this means that there has to be special requirements for handling binary data. 118 07:30.180 --> 07:32.010 And what are these special requirements? 119 07:32.190 --> 07:39.180 Well, this is exactly why we need this multipart/form-data encoding type. 120 07:39.720 --> 07:43.230 And I want to look at an example now of using multipart/form-data. 121 07:43.230 --> 07:46.640 But before I do, why is it called "multipart" ๐Ÿคทโ€โ™€๏ธ? 122 07:47.600 --> 07:54.620 Well, did you know this attribute is usually set when users upload files, and the reason it's called... 123 07:54.620 --> 08:02.780 multipart is because the form data can be divided into two parts, into multiple parts, one part for... 124 08:02.780 --> 08:08.600 each file attached to the form, plus another part for the text data in the form, you know, like the... 125 08:08.600 --> 08:11.740 user's name, surname, etc etc. 126 08:12.240 --> 08:17.300 So it kind of intuitively makes sense, you're just splitting your form data into different parts, into 127 08:17.300 --> 08:18.890 different categories of data. 128 08:19.100 --> 08:23.380 But enough said, if you're anything like me, pictures ๐Ÿ–ผ๏ธ speak more than a thousand words. 129 08:23.930 --> 08:26.720 So let's jump over to the Console and let's see this in action. 130 08:27.710 --> 08:30.200 Whew, this stuff is super, super interesting. 131 08:30.470 --> 08:33.550 Now, I want to look at multipart/form-data. 132 08:33.680 --> 08:35.660 So let's go back here to our code. 133 08:35.810 --> 08:39.860 And I want to specify the encoding type, encoding type... 134 08:41.420 --> 08:47.840 and I want that to be multipart/form-data. Now, usually we're going to be doing this when the user needs 135 08:47.840 --> 08:49.660 to upload a file to the server. 136 08:50.120 --> 08:56.060 But in our case right now, I just want to stick with simple text in the form so you can at least understand 137 08:56.060 --> 08:56.720 how it works. 138 08:57.410 --> 09:00.430 OK, so we are not going to change our form in any way. 139 09:00.440 --> 09:01.700 What is going to happen now? 140 09:02.010 --> 09:03.000 Let's go back to our browser. 141 09:03.020 --> 09:09.890 Let's go back, refresh the entire page, clear the Network console, and let's do exactly the same 142 09:09.890 --> 09:10.210 thing. 143 09:10.340 --> 09:11.690 WallTheWarthog. 144 09:12.920 --> 09:15.900 Favorite grass is food. Let's submit this. Now... 145 09:15.950 --> 09:18.530 this is where things start getting very interesting. 146 09:18.740 --> 09:25.850 Firstly, that Content-Type has changed to multipart/form-data, but now we've got this other weird value... 147 09:25.850 --> 09:31.310 called "boundary", and it's got that horrible name next to it - all those hyphens ๐Ÿคจ. 148 09:31.820 --> 09:33.050 What is that about? 149 09:33.790 --> 09:34.250 Don't worry, 150 09:34.310 --> 09:36.290 we're going to be talking about it shortly. 151 09:36.320 --> 09:36.830 For now... 152 09:36.830 --> 09:39.740 just know that the Content-Type has changed. 153 09:39.980 --> 09:47.000 And then perhaps what might confuse you even more is when we scroll down into the format of this request, 154 09:47.630 --> 09:49.340 we get this weird thing. 155 09:49.340 --> 09:55.060 We can get this ... that same "boundary" name that we saw above inserted here, 156 09:55.070 --> 09:56.720 and then we get Content-Disposition. 157 09:57.260 --> 09:59.330 We get a whole lot of hyphens everywhere ๐Ÿคฏ. 158 10:00.530 --> 10:02.240 What is this all about? 159 10:02.630 --> 10:07.800 My dear students, this is exactly the format of a multipart/form-data. 160 10:08.300 --> 10:12.710 This is what happens when we specify that encoding type to multipart. 161 10:12.890 --> 10:16.060 But let me jump into the lecture and explain this in a bit more detail. 162 10:16.310 --> 10:18.650 I just wanted you to first see it in action.