WEBVTT 00:00.740 --> 00:05.690 We've just discussed perhaps one of the most important attributes, and that is the action attribute. 00:05.720 --> 00:08.700 But now we are on to its brother or sister. 00:08.720 --> 00:14.270 It's also equally important, and that attribute is the method attribute. 00:14.300 --> 00:17.420 We've already seen examples of it, but this is what it looks like. 00:18.050 --> 00:22.490 Yeah, we're just using a GET method, but as we'll see, there are others. 00:22.520 --> 00:26.810 Taking a step back, we know we need to send the data to a server, right? 00:26.810 --> 00:31.880 And with the action attribute we defined where to send the data to. 00:31.910 --> 00:33.100 But what's missing? 00:33.110 --> 00:36.980 We haven't defined "something" to send this data to the server. 00:37.370 --> 00:37.910 That's right. 00:37.910 --> 00:41.610 We haven't defined HOW to send this data to the server. 00:41.630 --> 00:44.990 We've defined where it goes, but not HOW it gets there. 00:45.110 --> 00:46.880 So how does it work? 00:47.720 --> 00:49.210 How does how work? haha... 00:49.220 --> 00:51.200 And I crack myself up sometimes. 00:51.230 --> 00:57.290 Well, in order to understand that, you need a basic knowledge of how the HTTP protocol works. 00:57.620 --> 00:59.840 And it's not that difficult. 00:59.870 --> 01:05.910 Each time you want something on the web, the browser has to send a request to a URL. 01:06.360 --> 01:11.550 This HTTP request can be broken up into two parts. 01:12.120 --> 01:18.150 It can be broken up into a header that contains a set of global metadata about the browser's capabilities. 01:18.300 --> 01:22.860 And the second part is the body of the HTTP request. 01:22.860 --> 01:28.890 And this body can contain information necessary for the server to process the specific request. 01:29.310 --> 01:30.060 Okay, cool. 01:30.060 --> 01:33.390 That's all good and well, Clyde, but how can we send it across? 01:33.390 --> 01:39.510 What are the different ways? Most people, most developers, will tell you there are only two ways: a GET 01:39.510 --> 01:42.930 request and a POST request, but actually there's a third. 01:42.960 --> 01:45.390 There's also the dialogue. 01:45.390 --> 01:51.060 But of course, the two most popular and common are the GET and POST requests. 01:51.360 --> 01:53.400 Okay, Well, let's discuss them quickly. 01:53.400 --> 01:56.220 First, let's look at the GET request. 01:56.310 --> 02:02.730 The GET method is used by the browser to ask the server to send back a given resource. 02:02.760 --> 02:08.820 It's like the browser asking the server this: Hey server, I want to get a resource. 02:08.820 --> 02:11.070 That's a very, very good request, isn't it? 02:11.100 --> 02:12.180 It's very reasonable. 02:12.180 --> 02:12.930 Thank you. 02:12.930 --> 02:19.440 But the important thing to remember is that when this GET method is used, the browser sends an empty 02:19.440 --> 02:26.820 body. And because the body of the HTTP request is empty, if a form is sent using this method, the data 02:26.820 --> 02:29.990 has to be appended to the URL. 02:30.000 --> 02:31.290 Confused. 02:31.410 --> 02:32.130 Don't be. 02:32.130 --> 02:36.180 Let's hop over to the IDE and let me show you exactly what this looks like. 02:37.050 --> 02:40.710 How does the GET method work and what does it look like? 02:40.740 --> 02:44.920 You've already seen it in one of the earlier lectures, but let me just remind you. 02:44.940 --> 02:47.310 So the first thing is let's create a form. 02:47.400 --> 02:49.740 Remember this very important action attribute? 02:49.770 --> 02:55.080 Well, let's just define a fictitious (aka a made up) process URI. 02:55.380 --> 02:57.360 And this is not going to exist. 02:57.360 --> 03:02.120 But I just want to kind of show you how the look and feel would be on a real form. 03:02.120 --> 03:05.030 Then I want us to define a GET request. 03:05.940 --> 03:08.100 A GET request is the default, by the way. 03:08.100 --> 03:12.270 So it's the same as us omitting this entire attribute altogether. 03:12.270 --> 03:14.850 But I want to be explicit here so you remember what we're doing. 03:15.150 --> 03:18.390 Let's just have an input of type text (input type="text"). 03:18.420 --> 03:24.270 We're going to be getting into this a lot later in the course. And we don't need an ID here. And, let's 03:24.270 --> 03:25.290 have a message. 03:25.980 --> 03:30.320 You can also put it into an input element of type text, and we need to give it a name. 03:30.330 --> 03:33.240 If we don't give it a name, it won't be submitted to the server. 03:33.280 --> 03:35.340 I want to give it a name of "message". 03:35.370 --> 03:38.790 And last but not least, we've got another type of input... 03:38.820 --> 03:43.320 the submit input, and this is just going to be a submit button. 03:44.200 --> 03:46.960 This is what I want to show you if we go to our browser. 03:48.420 --> 03:49.590 There's our simple form. 03:49.770 --> 03:54.240 And let's say I type my name and say "Hello world". 03:54.900 --> 03:57.270 What happens when I click on the submit button? 03:57.630 --> 04:00.660 Well, firstly, remember what the GET method does? 04:00.690 --> 04:07.110 The GET method does not send the data in the body of an HTTP request, and because it doesn't send it 04:07.110 --> 04:09.570 in the body, it has to attach it somewhere. 04:09.600 --> 04:11.940 It attaches it to the URL. 04:12.090 --> 04:19.590 So when the user clicks submit, of course we cannot GET that URI as it doesn't exist, which is why we get 04:19.590 --> 04:20.550 this error message. 04:20.550 --> 04:21.720 But look at the URI. 04:23.480 --> 04:25.850 Can you see our variable names? 04:26.330 --> 04:28.010 First name and message. 04:28.790 --> 04:31.400 And our values are appended in the URI. 04:31.430 --> 04:34.760 In fact, they are sent as a series of name-value pairs. 04:34.790 --> 04:40.490 The other thing you'll notice is that after the URL web address has ended, we have a question mark ? 04:40.490 --> 04:47.270 followed by each of the name-value pairs, and each one, each separate variable or set of variables 04:47.480 --> 04:51.240 is separated by an ampersand - that & symbol. 04:51.260 --> 04:55.240 So in our case, of course, we are passing two pieces of data to the server. 04:55.250 --> 05:02.060 We are passing the first name, which has a value of "Clyde", and we are passing the message which has a value 05:02.060 --> 05:03.920 of "Hello World". 05:04.190 --> 05:05.330 Does that make sense? 05:05.630 --> 05:10.560 You can actually also see this GET request in the request header itself. 05:10.580 --> 05:11.270 Let me show you. 05:11.300 --> 05:13.260 Not many people know this, but it's very cool. 05:13.280 --> 05:20.030 If we go to our Network Tab in the dev console, let's just go back here, refresh our page so it's 05:20.030 --> 05:21.310 starting from scratch. 05:21.320 --> 05:24.270 Make sure preserve log is checked. 05:24.750 --> 05:26.070 Let's do exactly the same thing. 05:26.070 --> 05:27.180 Let's type Clyde. 05:27.830 --> 05:28.820 Hello, world. 05:30.010 --> 05:31.840 And let's click Submit. 05:33.660 --> 05:34.230 Here we go. 05:34.230 --> 05:35.240 We know it's failed. 05:35.250 --> 05:37.050 That's why it's all in red. 05:37.080 --> 05:40.340 It's failed because that URL does not exist. 05:40.350 --> 05:43.980 But if we click on this request, let's just make this bigger. 05:44.370 --> 05:48.870 We can see we've got these request headers. And what can we see here? 05:48.870 --> 05:53.400 Well, what's really awesome is that we can see that the request method is GET and of course we can 05:53.400 --> 06:00.420 see the request URL in the actual header request of this HTTP request. 06:00.450 --> 06:01.830 That's very cool, isn't it? 06:03.470 --> 06:03.970 Wow. 06:03.980 --> 06:08.600 And if you really want to see what it looks like, you can scroll to the bottom query string parameters 06:08.600 --> 06:11.270 and you can click on view source code. 06:11.270 --> 06:13.970 And that's exactly what we saw in our URL. 06:14.390 --> 06:14.930 Woohoo! 06:14.960 --> 06:16.310 How awesome is this? 06:16.340 --> 06:21.470 Hope you're having fun, but let's jump back into the lecture because we've only discussed the GET method. 06:21.800 --> 06:24.710 There are still two more methods we need to talk about.