1 00:00:07,940 --> 00:00:11,850 Welcome back. Let's talk about what happens behind 2 00:00:11,850 --> 00:00:16,170 the scenes when your browser fetches data from a remote server. 3 00:00:16,170 --> 00:00:20,385 The particular way that we're going to be most interested in having 4 00:00:20,385 --> 00:00:25,275 one computer talks to another is using the HTTP protocol. 5 00:00:25,275 --> 00:00:29,560 So that's when we have a URL that begins 6 00:00:32,720 --> 00:00:43,920 http://www.si.umich.edu and maybe something after the slash. 7 00:00:43,920 --> 00:00:46,315 The first thing that's going to happen, 8 00:00:46,315 --> 00:00:49,445 is my computer is going to take this domain name 9 00:00:49,445 --> 00:00:57,020 www.si.umich.edu convert it into an IP address as I illustrated a minute ago. 10 00:00:57,020 --> 00:01:02,055 Then my computer makes a connection to the remote computer. 11 00:01:02,055 --> 00:01:04,740 If I were using HTTPS, 12 00:01:04,740 --> 00:01:06,610 that's the secure version, 13 00:01:06,610 --> 00:01:10,820 then the first thing that my computer would do was send some information back and 14 00:01:10,820 --> 00:01:14,975 forth to the si.umich.edu server that 15 00:01:14,975 --> 00:01:17,570 would establish encryption keys so that all of 16 00:01:17,570 --> 00:01:20,180 the rest of the communication would be encrypted 17 00:01:20,180 --> 00:01:22,190 and nobody who intercepted that 18 00:01:22,190 --> 00:01:26,015 communication would be able to figure out what we were saying to each other. 19 00:01:26,015 --> 00:01:28,625 After that setup has happened, 20 00:01:28,625 --> 00:01:34,480 now my browser will start to send messages and it will actually send text, 21 00:01:34,480 --> 00:01:36,645 it'll send the word G-E-T, 22 00:01:36,645 --> 00:01:43,050 GET and then it'll send whatever arguments were after the slash. 23 00:01:43,050 --> 00:01:46,200 So it will say what path we're looking for, 24 00:01:46,200 --> 00:01:49,650 it will also send some headers saying things like, 25 00:01:49,650 --> 00:01:54,525 hey I'm a Chrome browser or I'm an Internet Explorer browser, 26 00:01:54,525 --> 00:01:57,930 the current time is certain time, 27 00:01:57,930 --> 00:02:01,040 it'll give a time stamp and a few other headers, 28 00:02:01,040 --> 00:02:07,140 we will then receive back from that server some response headers. 29 00:02:07,140 --> 00:02:09,280 Those response headers will say things like, 30 00:02:09,280 --> 00:02:11,960 I'm sending you HTML and 31 00:02:11,960 --> 00:02:15,050 the current timestamp is such and such and there are a few others, 32 00:02:15,050 --> 00:02:16,945 I'm going to show you this in a minute. 33 00:02:16,945 --> 00:02:22,725 Then most importantly, si.umich.edu is going to send me some HTML, 34 00:02:22,725 --> 00:02:27,050 and that HTML my browser is going to take and turn it into 35 00:02:27,050 --> 00:02:31,505 what we are used to seeing in a browser, a webpage. 36 00:02:31,505 --> 00:02:34,100 So the browser renders that HTML. 37 00:02:34,100 --> 00:02:40,935 Let's take a look and see what this looks like for the umich.edu website. 38 00:02:40,935 --> 00:02:44,930 Here, I have a webpage open in my browser, 39 00:02:44,930 --> 00:02:51,535 the URL is https://www.si.umich.edu, 40 00:02:51,535 --> 00:02:55,685 and you can see that it's all pretty on the screen, 41 00:02:55,685 --> 00:02:58,880 but what's really happening in the background? 42 00:02:58,880 --> 00:03:00,620 What's happening in the background, 43 00:03:00,620 --> 00:03:03,860 I'm using the Chrome debugger tool and I've got it set up to 44 00:03:03,860 --> 00:03:08,090 show us that when I made that request, 45 00:03:08,090 --> 00:03:14,625 my browser opened a connection and the first thing it did was that it made a GET request. 46 00:03:14,625 --> 00:03:18,400 And this is the full URL that it asked for. 47 00:03:18,400 --> 00:03:22,050 We can see all of the request headers. 48 00:03:22,780 --> 00:03:26,485 So we asked for a GET, 49 00:03:26,485 --> 00:03:34,355 we sent the path was just slash because I didn't have anything after the slash. 50 00:03:34,355 --> 00:03:36,770 If I had asked for a particular page, 51 00:03:36,770 --> 00:03:40,235 then we would see something more in the path down here. 52 00:03:40,235 --> 00:03:44,160 The scheme or protocol was HTTPS, 53 00:03:44,160 --> 00:03:47,375 then there's a whole bunch of other things that we won't go into. 54 00:03:47,375 --> 00:03:53,660 The user agent was compatible with all of these things, 55 00:03:53,660 --> 00:03:57,940 it's actually the Chrome browser that I'm using. 56 00:03:57,940 --> 00:04:02,330 So these are all things that my browser sent to 57 00:04:02,330 --> 00:04:08,970 the server and the server responded by sending back a whole bunch of response headers, 58 00:04:10,310 --> 00:04:15,215 there's the timestamp of when it sent it back, 59 00:04:15,215 --> 00:04:18,440 there's various things here including, 60 00:04:18,440 --> 00:04:25,180 I can see a little information that the website is powered by PHP as 61 00:04:25,180 --> 00:04:33,130 its backend and the content type is text/html in the UTF-8 encoding and so on. 62 00:04:33,130 --> 00:04:37,190 So these are all things that my browser uses and 63 00:04:37,190 --> 00:04:42,540 then the most important stuff that we got back was actually all of this HTML. 64 00:04:43,090 --> 00:04:50,705 And all of this stuff got sent back and the browser managed to parse all of this, 65 00:04:50,705 --> 00:04:52,330 this is just text. 66 00:04:52,330 --> 00:04:55,930 This text is not what's normally shown on the webpage, 67 00:04:55,930 --> 00:04:58,700 was shown on the webpage is this very thing 68 00:04:58,700 --> 00:05:03,500 and that's the browser rendering all of that HTML. 69 00:05:03,500 --> 00:05:06,860 If you don't know how to use the Chrome debugger, 70 00:05:06,860 --> 00:05:11,755 it can be a little confusing but if you just want to see what the HTML is for any page, 71 00:05:11,755 --> 00:05:16,000 you can do a Right click and you 72 00:05:16,000 --> 00:05:23,910 Page Source and see all of that stuff that got sent back from the server. 73 00:05:24,040 --> 00:05:29,960 So to summarize, when your browser fetches data from a remote web server, 74 00:05:29,960 --> 00:05:31,415 it makes a connection, 75 00:05:31,415 --> 00:05:34,880 it sends a few headers and asks for the path, 76 00:05:34,880 --> 00:05:37,490 the arguments that it would like to receive, 77 00:05:37,490 --> 00:05:41,570 it gets back some headers and especially it gets back HTML which 78 00:05:41,570 --> 00:05:47,820 your browser renders and makes a pretty web page out of. See you next time.