1 00:00:00,450 --> 00:00:04,010 We've now see a couple of ways to trigger get requests in a browser. 2 00:00:04,010 --> 00:00:07,550 We can either include an anchor with an href attribute that lists another page 3 00:00:07,550 --> 00:00:09,990 on our site or another site, or 4 00:00:09,990 --> 00:00:14,160 we can include a form whose method attribute has the value get. 5 00:00:14,160 --> 00:00:18,490 In the first case a user clicking on the anchor will trigger an HTTP get 6 00:00:18,490 --> 00:00:22,420 request to the URL listed in the href attribute. 7 00:00:22,420 --> 00:00:27,330 In the second case submitting the form will result in an http get request to 8 00:00:27,330 --> 00:00:29,580 the URL listed in the action attribute. 9 00:00:31,310 --> 00:00:34,470 All this is great, but what about post request? 10 00:00:34,470 --> 00:00:38,060 What about those times when we want to update a resource on the server? 11 00:00:38,060 --> 00:00:41,760 Like adding a new contact or editing a current one? 12 00:00:41,760 --> 00:00:44,950 It turns out that the change in HTML is fairly trivial and 13 00:00:44,950 --> 00:00:48,330 what the browser does with the data does with the data is fully in line with how 14 00:00:48,330 --> 00:00:53,600 data is meant to be transferred in a post request according to the HTTP specs. 15 00:00:54,950 --> 00:01:00,220 Let's look at an example on httpben.org to see a post request in action. 16 00:01:02,130 --> 00:01:06,828 In Chrome with Developer Tools open I'll navigate to httpbin.org. 17 00:01:06,828 --> 00:01:11,805 Now if you scroll down you'll see a link to /forms/post. 18 00:01:11,805 --> 00:01:14,430 Go ahead and click on that. 19 00:01:14,430 --> 00:01:18,780 In this form we have some other input types such as radio buttons, 20 00:01:18,780 --> 00:01:23,510 check boxes, here's a time field and even a text area. 21 00:01:23,510 --> 00:01:25,200 One thing remains the same though. 22 00:01:25,200 --> 00:01:26,970 All of these elements have name attributes and 23 00:01:26,970 --> 00:01:30,130 the values will be determined by what the user fills in. 24 00:01:30,130 --> 00:01:34,840 And I can see that that's the case if I inspect one of these elements. 25 00:01:34,840 --> 00:01:39,530 Let's expand the label element there to reveal the underlying input 26 00:01:39,530 --> 00:01:42,180 whose name has value of topping. 27 00:01:42,180 --> 00:01:45,290 And the value that's passed, when the form is submitted, 28 00:01:45,290 --> 00:01:48,560 will be determined by whether or not the user has checked this box. 29 00:01:49,640 --> 00:01:53,450 I can take a peek at some of the other input elements if I inspect those as well, 30 00:01:53,450 --> 00:01:56,020 just to verify all their name attributes. 31 00:01:56,020 --> 00:01:58,730 There we have a cust name, standing for customer name. 32 00:01:59,990 --> 00:02:01,400 We'll click on that one. 33 00:02:01,400 --> 00:02:04,140 The name there is custtel, standing for customer telephone. 34 00:02:04,140 --> 00:02:08,550 And then finally, the email address, whose name is custemail. 35 00:02:08,550 --> 00:02:13,265 Now, if you scroll up, what you'll notice if you check the opening tag 36 00:02:13,265 --> 00:02:16,015 is that the method attribute has a value of post. 37 00:02:16,015 --> 00:02:19,345 This is exactly what we would expect from a post form. 38 00:02:19,345 --> 00:02:24,415 Also notice the action attribute has a value of slash post that is the relative 39 00:02:24,415 --> 00:02:29,970 URL where the HTTP request will be sent when this form is submitted. 40 00:02:29,970 --> 00:02:34,650 That is a relative URL, which means this is relative to the domain name. 41 00:02:34,650 --> 00:02:40,406 It starts with /, which means it's relative to the domain, 42 00:02:40,406 --> 00:02:45,400 the full URL for which would be httpbin.org/post. 43 00:02:45,400 --> 00:02:50,247 Let's fill in some information in this form to examine the http request that 44 00:02:50,247 --> 00:02:52,378 happens when we submit the form. 45 00:02:52,378 --> 00:02:56,655 So I'll just drop in whatever information I feel like. 46 00:03:01,732 --> 00:03:05,790 I'll take a medium pizza with onions and mushrooms. 47 00:03:05,790 --> 00:03:08,170 I want that right at noon. 48 00:03:08,170 --> 00:03:10,250 Very hungry at lunch. 49 00:03:10,250 --> 00:03:14,279 And I would like it delivered directly to my mouth. 50 00:03:18,471 --> 00:03:19,210 Okay. 51 00:03:19,210 --> 00:03:25,270 And let's go ahead and submit that order to see that HTTP Request that was sent. 52 00:03:25,270 --> 00:03:29,400 Now, I'm going to, for now, ignore the results in the view port up 53 00:03:29,400 --> 00:03:33,730 above because we are going to focus on the http request. 54 00:03:33,730 --> 00:03:38,030 Now remember, that appears in the network tab. 55 00:03:38,030 --> 00:03:41,310 Let's drag this panel up a little bit to give ourselves some more room. 56 00:03:41,310 --> 00:03:46,790 And, I'll click on net post request to reveal the request headers. 57 00:03:48,170 --> 00:03:52,070 And if you click view source you can view the raw request headers that were sent 58 00:03:52,070 --> 00:03:55,440 exactly as they appear in the HTTP request. 59 00:03:56,530 --> 00:04:01,230 First you see the request method is indeed post as opposed to get, and 60 00:04:01,230 --> 00:04:04,390 here's our host httpbin.org. 61 00:04:04,390 --> 00:04:09,460 Also worth noting here is the content-length header of 193. 62 00:04:09,460 --> 00:04:12,100 Remember, that's measured in bytes. 63 00:04:12,100 --> 00:04:15,180 And that's the length of the data that was included in the payload. 64 00:04:15,180 --> 00:04:18,050 The payload is simply the query string of data sent. 65 00:04:18,050 --> 00:04:21,840 In Chrome developer tools you'll find the payload of a request in the form 66 00:04:21,840 --> 00:04:26,070 data section, so I'll scroll down to the bottom and here's the form data section. 67 00:04:26,070 --> 00:04:31,410 If you'd like to see the raw form data that was sent you can again choose 68 00:04:31,410 --> 00:04:34,570 view source and you'll see the query string version 69 00:04:34,570 --> 00:04:37,740 of that data that was submitted with the request. 70 00:04:38,870 --> 00:04:41,660 Now you might see some characters in here that you didn't actually 71 00:04:41,660 --> 00:04:45,050 enter that are included in the values of the form data. 72 00:04:45,050 --> 00:04:49,400 For example this percent 40, we've got a percent 3A here. 73 00:04:49,400 --> 00:04:52,660 What those are are URL encoded characters, and 74 00:04:52,660 --> 00:04:56,030 they allow a browser to use a special sequence of characters starting with 75 00:04:56,030 --> 00:05:00,350 a percent sign, that make the query string safe to transfer in a URL. 76 00:05:01,540 --> 00:05:06,645 For example, this percent 40 is the URL encoded version of the @ sign and 77 00:05:06,645 --> 00:05:11,145 this percent 3a is the URL encoded version of the colon sign. 78 00:05:11,145 --> 00:05:15,660 Check the teacher's notes for the reference of the URL encoded characters. 79 00:05:15,660 --> 00:05:19,740 Now, in a post request the data isn't sent through the URI like it 80 00:05:19,740 --> 00:05:23,890 is in a GET-Request but the same approach is used in constructing a Query string 81 00:05:23,890 --> 00:05:27,580 regardless of whether they are being transfer with GET or Post request. 82 00:05:27,580 --> 00:05:34,835 That is the name value pairs are separated by ampersands and for each parameter 83 00:05:34,835 --> 00:05:39,970 name-value pair, the name is separated from its value with an equals sign. 84 00:05:41,100 --> 00:05:45,750 If you want to verify the content length, copy the entire query string 85 00:05:47,990 --> 00:05:53,580 and paste it into a character counter website like Charactercounter.com or 86 00:05:53,580 --> 00:05:56,850 I'll use charcounter.com. 87 00:05:56,850 --> 00:06:01,320 When I paste that in there, I will see 193 characters. 88 00:06:01,320 --> 00:06:04,220 I'll go back to my original request. 89 00:06:04,220 --> 00:06:10,470 Scroll up a bit to verify that my content length was indeed 193 bytes. 90 00:06:10,470 --> 00:06:13,300 That's one byte per character. 91 00:06:13,300 --> 00:06:16,770 The nice thing is we didn't have to calculate that value ourselves and 92 00:06:16,770 --> 00:06:19,650 construct an HTTP request using that value. 93 00:06:19,650 --> 00:06:21,380 The browser takes care of that for us. 94 00:06:22,420 --> 00:06:25,400 There is one more new header that you might notice and 95 00:06:25,400 --> 00:06:28,620 that is the Content-Type header. 96 00:06:28,620 --> 00:06:35,010 In this request it has the value application/x-www-form-urlencoded. 97 00:06:35,010 --> 00:06:37,950 This communicates to the server that the data has been encoded with 98 00:06:37,950 --> 00:06:39,800 URL safe characters. 99 00:06:39,800 --> 00:06:40,920 Check out the teacher's notes for 100 00:06:40,920 --> 00:06:45,560 some information on how this differs when a form includes a file upload field. 101 00:06:47,710 --> 00:06:51,600 And there you have an example of a browser performing a post request 102 00:06:51,600 --> 00:06:53,680 upon submitting a form. 103 00:06:53,680 --> 00:06:56,910 Just like I did with the GET form submission, let me give you 104 00:06:56,910 --> 00:07:00,950 an illustration of what is happening in the browser with the POST form submission. 105 00:07:02,080 --> 00:07:07,020 First, the browser renders the HTML for a form to present it to the user. 106 00:07:07,020 --> 00:07:09,940 The form contains a method, an action attribute. 107 00:07:09,940 --> 00:07:12,430 And inside the form are various named elements 108 00:07:12,430 --> 00:07:15,390 giving the user a chance to provide information. 109 00:07:15,390 --> 00:07:18,770 After entering this information, the user submits the form, 110 00:07:18,770 --> 00:07:22,080 either by clicking a submit button or by pressing enter. 111 00:07:22,080 --> 00:07:26,460 This send the browser into action, using the URL in the action attribute, 112 00:07:26,460 --> 00:07:29,850 the browser establishes a network connection to host, 113 00:07:29,850 --> 00:07:33,500 then begins to construct a HTTP POST request, 114 00:07:33,500 --> 00:07:36,090 since the the forms method attribute is always set as POST. 115 00:07:37,110 --> 00:07:41,180 The forms data is put together as a query string using the name attributes as 116 00:07:41,180 --> 00:07:46,100 parameter names, and the user provided values as the parameter values. 117 00:07:46,100 --> 00:07:50,100 Since this is a post request your browser calculates the number of 118 00:07:50,100 --> 00:07:54,850 bytes in the query string and adds a content length header to the request. 119 00:07:54,850 --> 00:07:58,870 Then it sticks this query string into the payload of the request 120 00:07:58,870 --> 00:08:01,070 after the blank line following the header section. 121 00:08:02,300 --> 00:08:04,960 When the browser is done constructing the request 122 00:08:04,960 --> 00:08:08,590 the request is sent over the established network connection and 123 00:08:08,590 --> 00:08:12,510 when the response arrives as HTML the browser renders the results. 124 00:08:14,140 --> 00:08:18,790 When compared to a get form submission, the differences in a post form submission, 125 00:08:18,790 --> 00:08:24,410 are that in a post request content type and content length headers are required. 126 00:08:24,410 --> 00:08:28,320 And the query string data is included in the pay low below the headers 127 00:08:28,320 --> 00:08:31,280 instead of in the request line above the headers.