WEBVTT 0 00:01.200 --> 00:07.950 Of course, there's nothing better than looking at examples, so let's do a quick example of a GET request. 1 00:08.160 --> 00:10.400 Let's just set up a simple HTML document. 2 00:10.680 --> 00:11.820 I'm not going to do the headers. 3 00:11.820 --> 00:13.230 I'm not going to do it 'properly' here. 4 00:13.230 --> 00:14.610 I just want to quickly rush through this. 5 00:15.060 --> 00:16.510 Let's just create a <body>. In the <body>... 6 00:16.530 --> 00:17.520 let's have a <form>. 7 00:18.420 --> 00:21.670 OK, but now I want the form to have a method of GET. 8 00:21.950 --> 00:23.250 OK, let's get rid of action. 9 00:23.370 --> 00:24.180 You don't need action. 10 00:24.820 --> 00:25.680 We'll get onto that later. 11 00:26.330 --> 00:26.900 There we go. 12 00:27.060 --> 00:29.010 We've got a GET request, OK? 13 00:29.550 --> 00:31.140 In fact, we don't even need this, 14 00:31.140 --> 00:31.420 right? 15 00:31.440 --> 00:32.180 You know that already. 16 00:32.190 --> 00:35.100 We could just have this, and that defaults to a GET request. 17 00:35.100 --> 00:39.450 But I just want to be explicit here as to what we are doing. Now... 18 00:39.450 --> 00:45.090 let's just have, say, a name field. It can be input type of text, 19 00:45.270 --> 00:45.680 right. 20 00:45.720 --> 00:50.650 And we can give it a name, a variable name, of 'fname' - first name. 21 00:51.330 --> 00:53.260 Then let's just break it up a bit. 22 00:53.760 --> 00:54.770 OK, there you go. 23 00:55.200 --> 00:59.280 And let's just ask the user what their favorite food is. 24 00:59.280 --> 01:03.980 Again, it can be a text input type, and its name can be favFood. 25 01:04.530 --> 01:05.130 Pretty simple. 26 01:05.130 --> 01:06.500 We don't need an ID here. 27 01:06.840 --> 01:11.520 And again, let's just include some breaks, and we need a way for a user to submit this form, 28 01:11.520 --> 01:11.820 right. 29 01:11.970 --> 01:16.410 Which is why I'm just going to create an input with its type being "submit". 30 01:16.680 --> 01:18.780 And again, we're going to get onto that later in the course... 31 01:18.820 --> 01:22.170 so don't worry too much now what that means or how it works. 32 01:22.560 --> 01:24.120 So here we go. We've saved it. 33 01:24.420 --> 01:25.350 Very, very simple. 34 01:25.500 --> 01:26.900 Let's just use the Live Server, and 35 01:26.910 --> 01:28.570 look at what it looks like on our browser. 36 01:29.140 --> 01:30.650 OK, pretty straightforward. 37 01:30.650 --> 01:31.800 There's "Name" and "Favorite food". 38 01:31.830 --> 01:32.820 Don't worry about how it looks. 39 01:32.820 --> 01:33.540 I know it looks ugly 🤢. 40 01:33.930 --> 01:34.880 That's not the point of this lecture. 41 01:35.010 --> 01:37.320 Let's just see what happens with a GET request. 42 01:37.320 --> 01:43.710 Okay, let's just say name is "WallyTheWarthog" and the favorite food of Wally is "grass". 43 01:43.860 --> 01:45.300 What happens when we click submit? Well... 44 01:45.300 --> 01:49.710 firstly, I just want to go to the development Console, Network tab, and let's click submit. 45 01:50.880 --> 01:56.190 The first thing I want to show you with this, is remember how we said with a GET request that the default 46 01:56.190 --> 02:00.120 encoding type is application/x-www.... 47 02:00.120 --> 02:00.930 -form-urlencoded? 48 02:01.530 --> 02:02.880 Okay, that's the default type. 49 02:03.540 --> 02:07.440 And this will go in the HTTP header. 50 02:07.650 --> 02:09.200 As you can see, though, right... 51 02:09.210 --> 02:10.560 let's don't look at the response headers... 52 02:11.130 --> 02:11.880 Let's don't look at general... 53 02:12.600 --> 02:17.880 I want to look at request headers. You can see that there is no Content-Type specified. And the reason 54 02:17.880 --> 02:18.840 is not specified... 55 02:19.740 --> 02:26.730 is that we can't specify it with a GET request. A GET request has to have the application/x-www-form-urlencoded 56 02:26.730 --> 02:27.630 type. 57 02:27.900 --> 02:33.810 And if we look at the bottom, we see query string parameters of "fname" and "favFood". 58 02:33.960 --> 02:40.590 And if we view the source, we can see that each name:value pair is separated by that ampersand & symbol. 59 02:41.010 --> 02:45.480 And of course each name and value is separated by an equals sign. 60 02:48.030 --> 02:54.450 So each pair is separated by an ampersand, and each name and value itself is separated by an equal sign. 61 02:55.580 --> 03:02.120 This is a query string parameter. This is the default type. As we'll see shortly when we start dealing 62 03:02.120 --> 03:03.100 with POST requests, 63 03:03.470 --> 03:08.420 firstly, we will see that Content-Type header inserted in the HTTP request. 64 03:09.050 --> 03:13.430 And secondly, it doesn't necessarily have to be a query string at all, 65 03:13.430 --> 03:14.720 does it? No. 66 03:15.030 --> 03:16.670 But anyway, let's hop back to the lecture. 67 03:16.700 --> 03:17.540 Let's continue.