WEBVTT 0 00:00.110 --> 00:01.550 Well done for sticking with me. 1 00:01.580 --> 00:02.910 Hope you're having a lot of fun. 2 00:02.930 --> 00:06.980 Now I just want to talk about how to send data client side. 3 00:06.980 --> 00:12.580 And what I mean by that is how do you define where and how to send the form data? 4 00:12.590 --> 00:14.960 And right now I'm not going to be looking at AJAX. 5 00:14.960 --> 00:18.470 I'm going to be looking at our traditional form, right? 6 00:18.470 --> 00:22.340 Submitting it via the HTML form. And as a very quick recap, 7 00:22.340 --> 00:25.640 you know the client/server architecture already, don't you? 8 00:25.670 --> 00:27.500 We've got a browser, we've got a server. 9 00:27.530 --> 00:31.130 The browser sends an HTTP request to a server. 10 00:31.160 --> 00:35.600 The server responds with a response using the same protocol. 11 00:35.600 --> 00:38.180 But you already know this, you already know this. 12 00:38.270 --> 00:40.430 But let's talk about this in a bit more detail. 13 00:40.430 --> 00:44.000 Specifically, I want to talk about the request part of it. 14 00:44.030 --> 00:47.570 How does the browser define where and how to send the form data? 15 00:47.570 --> 00:50.210 Well, as you know, we've got two attributes, right? 16 00:50.210 --> 00:55.070 The action attribute and the method attribute that we place on the form element itself. 17 00:55.070 --> 00:59.030 And these are the two most important attributes on the form element. 18 00:59.030 --> 01:01.560 So then how exactly do they fit in? 19 01:01.590 --> 01:07.860 Firstly, let's look at the action attribute. And the action attribute basically defines or tells the 20 01:07.860 --> 01:15.360 browser where to send the data to. And its value must be a valid relative or absolute URL. 21 01:15.390 --> 01:17.520 What happens if it's not provided at all? 22 01:17.520 --> 01:21.960 If the attribute isn't provided, then the data is going to be sent to the URL of the page containing 23 01:21.960 --> 01:24.630 the form aka the current page. 24 01:24.630 --> 01:30.120 And because the action attribute is telling the browser where to send the data, the obvious counter 25 01:30.120 --> 01:37.920 to that is that that action value or URL should be a file on the server that is listening to that data 26 01:37.920 --> 01:39.840 and that can handle the data. 27 01:39.840 --> 01:48.180 And as a bit of FYI, it is possible to specify a URL that uses HTTPS, you know, secure HTTP. 28 01:48.450 --> 01:53.100 And when you do this, the data will be encrypted along with the rest of the request, even if the form 29 01:53.100 --> 01:57.690 itself is hosted on an insecure page accessed via HTTP. 30 01:57.930 --> 02:00.840 What's interesting is the flip can also work right? 31 02:00.840 --> 02:09.510 If the form is hosted on a secure HTTP page, but you specify an insecure HTTP URL with the action attribute, 32 02:09.510 --> 02:15.720 all browsers will display a security warning to the user each time they try and send the data because 33 02:15.720 --> 02:18.240 the data is not going to be encrypted. Anyway, 34 02:18.240 --> 02:19.680 that's just a bit of FYI. 35 02:20.040 --> 02:21.510 So that's the action attribute. 36 02:21.510 --> 02:26.190 You can kind of view the action and the server going hand in hand - it's the end point, right? 37 02:26.190 --> 02:27.960 It's where the data should go to. 38 02:27.960 --> 02:34.320 And then we've got this method attribute. And the method tells the browser how to send the data. 39 02:34.320 --> 02:38.910 And the HTTP protocol does provide several ways to perform a request. 40 02:39.210 --> 02:46.590 HTML form data can be transmitted via a number of different methods, specifically using a GET method 41 02:46.590 --> 02:52.710 or a POST method. And to understand the differences between a GET and POST, you need to step back and 42 02:52.710 --> 02:55.170 examine how HTTP works. 43 02:55.200 --> 03:00.750 Every time you want to reach a resource on the web, the browser sends a request to a URL and an HTTP 44 03:00.750 --> 03:05.760 request consists of two parts - a header and what else? 45 03:05.790 --> 03:06.600 And a body. 46 03:06.600 --> 03:07.350 That's right. 47 03:07.350 --> 03:13.230 The header contains a set of global metadata about the browser's capabilities, and the body contains 48 03:13.230 --> 03:17.280 information necessary to the server to process the specific request. 49 03:17.280 --> 03:18.690 So then what is a GET method? 50 03:18.690 --> 03:24.120 Well, the get method is the method used by the browser to ask the server to send back a given resource 51 03:24.150 --> 03:28.740 and in this case the browser is going to send an empty body. Because the body is empty 52 03:28.770 --> 03:35.220 if a form is sent using this method, the data sent to the server is going to be appended to the URL 53 03:35.250 --> 03:37.470 as a series of name:value pairs. 54 03:37.470 --> 03:39.480 And we've seen many examples of this in the course. 55 03:39.480 --> 03:43.980 After the URL web address has ended, there's a question mark and then followed by the name value pairs 56 03:43.980 --> 03:45.900 and each one is separated by an ampersand. 57 03:45.930 --> 03:49.620 We've seen this many times. And then we've got this POST method. 58 03:49.620 --> 03:51.750 The POST method is a little different to GET. 59 03:51.750 --> 03:54.690 It's the method the browser uses to talk to the server 60 03:54.690 --> 04:01.500 when asking for a response, that takes into account the data provided in the body of the HTTP request. 61 04:01.530 --> 04:07.770 As you already know, if a form is sent using this method, the data is appended to the body, not the 62 04:07.770 --> 04:10.710 URL of the HTTP request. 63 04:10.710 --> 04:11.880 So there you have it. 64 04:11.880 --> 04:18.050 This is how we define where and how to send form data to a server. 65 04:18.060 --> 04:22.710 I know you already know this, but it's always good to recap, especially at the end, so everything 66 04:22.710 --> 04:23.850 can just sink in. 67 04:23.880 --> 04:25.590 Hope it's making sense.