WEBVTT 1 00:00:01.190 --> 00:00:04.670 If you want to go really deep and really understand 2 00:00:04.670 --> 00:00:07.936 how requests and responses work on the Web, 3 00:00:07.936 --> 00:00:10.530 then this video is for you. 4 00:00:10.530 --> 00:00:13.820 So this is basically a high level overview 5 00:00:13.820 --> 00:00:17.060 of how the Web actually works behind the scenes 6 00:00:17.060 --> 00:00:20.400 in regards to requests and responses. 7 00:00:20.400 --> 00:00:23.390 Now, this knowledge is not required though, 8 00:00:23.390 --> 00:00:25.210 for moving on in the course, 9 00:00:25.210 --> 00:00:28.770 and that's why I marked this video as optional. 10 00:00:28.770 --> 00:00:30.470 So you can safely skip it 11 00:00:30.470 --> 00:00:32.720 if you wanna move on more quickly. 12 00:00:32.720 --> 00:00:35.913 But if you're interested, than just keep watching. 13 00:00:37.884 --> 00:00:40.890 So this is the diagram that we already saw 14 00:00:40.890 --> 00:00:44.280 when we first talked about AJAX calls. 15 00:00:44.280 --> 00:00:48.780 So just to recap, whenever we try to access a Web server, 16 00:00:48.780 --> 00:00:51.190 the browser, which is the client, 17 00:00:51.190 --> 00:00:53.660 sends a request to the server 18 00:00:53.660 --> 00:00:57.240 and the server will then send back a response 19 00:00:57.240 --> 00:00:59.890 and that response contains the data 20 00:00:59.890 --> 00:01:02.660 or the Web page that we requested. 21 00:01:02.660 --> 00:01:06.670 And that's right, this process works the exact same way 22 00:01:06.670 --> 00:01:09.890 no matter if we're accessing an entire Web page 23 00:01:09.890 --> 00:01:12.610 or just some data from a Web API. 24 00:01:12.610 --> 00:01:16.260 And this whole process actually has a name 25 00:01:16.260 --> 00:01:19.530 and it's called the Request-response model 26 00:01:19.530 --> 00:01:22.780 or also the Client-server architecture. 27 00:01:22.780 --> 00:01:26.123 But anyway, let's now dive a bit deeper into this. 28 00:01:27.180 --> 00:01:30.192 So let's use the example of the URL 29 00:01:30.192 --> 00:01:33.180 that we actually accessed in the last video 30 00:01:33.180 --> 00:01:35.570 to get our country data. 31 00:01:35.570 --> 00:01:39.713 Now, every URL gets an HTTP or HTTPS, 32 00:01:40.710 --> 00:01:42.370 which is for the protocol 33 00:01:42.370 --> 00:01:44.870 that will be used on this connection. 34 00:01:44.870 --> 00:01:48.250 And we're gonna talk about this a bit later in the video. 35 00:01:48.250 --> 00:01:50.240 Then we have the domain name, 36 00:01:50.240 --> 00:01:53.990 which is restcountries.eu in this case. 37 00:01:53.990 --> 00:01:57.971 And also after a slash we have to so-called resource 38 00:01:57.971 --> 00:01:59.410 that we want to access. 39 00:01:59.410 --> 00:02:04.410 And in this case, that's /rest/V2 and so on. 40 00:02:05.746 --> 00:02:09.840 Now this domain name, restcountries.eu 41 00:02:09.840 --> 00:02:11.967 is actually not the real address 42 00:02:11.967 --> 00:02:15.050 of the server that we're trying to access. 43 00:02:15.050 --> 00:02:16.853 It's really just a nice name 44 00:02:16.853 --> 00:02:19.490 that is easy for us to memorize. 45 00:02:19.490 --> 00:02:22.520 But what this means is that we need a way of 46 00:02:22.520 --> 00:02:24.730 kind of converting the domain name 47 00:02:24.730 --> 00:02:27.380 to the real address of the server. 48 00:02:27.380 --> 00:02:31.620 And that happens through a so-called D-N-S. 49 00:02:31.620 --> 00:02:35.420 So DNS stands for domain name server 50 00:02:35.420 --> 00:02:39.120 and domain name servers are a special kind of server. 51 00:02:39.120 --> 00:02:42.533 So they are basically like the phone books of the Internet. 52 00:02:43.450 --> 00:02:47.520 So the first step that happens when we access any Web server 53 00:02:47.520 --> 00:02:51.180 is that the browser makes a request to a DNS 54 00:02:51.180 --> 00:02:53.280 and this special server will then 55 00:02:53.280 --> 00:02:54.980 simply match the web address 56 00:02:54.980 --> 00:02:59.980 of the URL to the server's real IP address, all right. 57 00:03:00.720 --> 00:03:02.660 And actually this all happens 58 00:03:02.660 --> 00:03:05.310 through your Internet service provider, 59 00:03:05.310 --> 00:03:08.680 but the complete details don't really matter here. 60 00:03:08.680 --> 00:03:11.470 What you need to retain from this first part 61 00:03:11.470 --> 00:03:14.570 is that the domain is not the real address 62 00:03:14.570 --> 00:03:17.590 and that a DNS will convert the domain 63 00:03:17.590 --> 00:03:19.765 to the real IP address. 64 00:03:19.765 --> 00:03:23.610 And then after the real IP address has been sent back 65 00:03:23.610 --> 00:03:26.980 to the browser, we can finally call it. 66 00:03:26.980 --> 00:03:29.860 So this is how the real address looks like. 67 00:03:29.860 --> 00:03:34.180 So it still has the protocol, but then comes the IP address. 68 00:03:34.180 --> 00:03:37.591 And also the port that we access on the server. 69 00:03:37.591 --> 00:03:40.220 And this port number is really 70 00:03:40.220 --> 00:03:42.876 just to identify a specific service 71 00:03:42.876 --> 00:03:45.100 that's running on a server. 72 00:03:45.100 --> 00:03:49.450 So you can think of it like a sub address, okay. 73 00:03:49.450 --> 00:03:51.700 This port number has nothing to do 74 00:03:51.700 --> 00:03:55.460 with the /rest/V2 resource 75 00:03:55.460 --> 00:03:57.410 that we want to access. 76 00:03:57.410 --> 00:03:59.350 So that resource will actually 77 00:03:59.350 --> 00:04:02.011 be sent over in the HTTP request, 78 00:04:02.011 --> 00:04:04.420 as we will see in a moment. 79 00:04:04.420 --> 00:04:08.830 Okay, and that actually wraps up the first step. 80 00:04:08.830 --> 00:04:11.403 So once we have the real IP address, 81 00:04:11.403 --> 00:04:16.130 a TCP socket connection is established between the browser 82 00:04:16.130 --> 00:04:17.580 and the server. 83 00:04:17.580 --> 00:04:20.440 And so they are now finally connected. 84 00:04:20.440 --> 00:04:23.230 And this connection is typically kept alive 85 00:04:23.230 --> 00:04:25.580 for the entire time that it takes 86 00:04:25.580 --> 00:04:30.360 to transfer all files of the Website or all data. 87 00:04:30.360 --> 00:04:34.050 Now what are TCP and IP? 88 00:04:34.050 --> 00:04:38.490 Well TCP is the Transmission Control Protocol. 89 00:04:38.490 --> 00:04:41.500 And IP is the Internet Protocol. 90 00:04:41.500 --> 00:04:44.540 And together they are communication protocols 91 00:04:44.540 --> 00:04:48.470 that define exactly how data travels across the Web. 92 00:04:48.470 --> 00:04:50.210 They are basically the Internet's 93 00:04:50.210 --> 00:04:52.500 fundamental control system, 94 00:04:52.500 --> 00:04:54.930 because again, they are the ones 95 00:04:54.930 --> 00:04:59.340 who set the rules about how data moves on the Internet. 96 00:04:59.340 --> 00:05:01.930 And don't worry if that sounds confusing, 97 00:05:01.930 --> 00:05:06.450 we are actually gonna learn a bit more about TCP/IP 98 00:05:06.450 --> 00:05:08.810 a bit later in this video. 99 00:05:08.810 --> 00:05:13.410 But anyway, now it's time to finally make our request. 100 00:05:13.410 --> 00:05:17.570 And the request that we make is an HTTP request, 101 00:05:17.570 --> 00:05:22.570 where HTTP stands for Hypertext Transfer Protocol. 102 00:05:22.640 --> 00:05:27.640 So after TCP/IP, HTTP is another communication protocol. 103 00:05:28.970 --> 00:05:31.880 And by the way, a communication protocol 104 00:05:31.880 --> 00:05:33.870 is simply a system of rules 105 00:05:33.870 --> 00:05:37.532 that allows two or more parties to communicate. 106 00:05:37.532 --> 00:05:39.962 Now in the case of HTTP, 107 00:05:39.962 --> 00:05:43.020 it's just a protocol that allows clients 108 00:05:43.020 --> 00:05:45.830 and Web servers to communicate. 109 00:05:45.830 --> 00:05:47.900 And that works by sending requests 110 00:05:47.900 --> 00:05:52.850 and response messages from client to server and back. 111 00:05:52.850 --> 00:05:56.970 Now a request message will look something like this. 112 00:05:56.970 --> 00:06:00.120 The beginning of the message is the most important part 113 00:06:00.120 --> 00:06:02.020 called the start line. 114 00:06:02.020 --> 00:06:04.880 And this one contains the HTTP method 115 00:06:04.880 --> 00:06:07.220 that is used in the request, 116 00:06:07.220 --> 00:06:11.690 then the request target and the HTTP version. 117 00:06:11.690 --> 00:06:16.060 So about the HTTP methods, there are many available, 118 00:06:16.060 --> 00:06:17.930 but the most important ones are; 119 00:06:17.930 --> 00:06:20.830 GET, for simply requesting data, 120 00:06:20.830 --> 00:06:22.970 POST, for sending data 121 00:06:22.970 --> 00:06:27.170 and PUT and PATCH, to basically modify data. 122 00:06:27.170 --> 00:06:30.906 So you'll see that an HTTP request to a server 123 00:06:30.906 --> 00:06:33.660 is not only for getting data, 124 00:06:33.660 --> 00:06:37.530 but we can also send data, now right. 125 00:06:37.530 --> 00:06:40.050 Now about the request target. 126 00:06:40.050 --> 00:06:42.320 This is where the server is told 127 00:06:42.320 --> 00:06:47.320 that we want to access the rest/V2/alpha resource 128 00:06:47.440 --> 00:06:50.130 in this case, remember that? 129 00:06:50.130 --> 00:06:52.780 So we had this in the URL before 130 00:06:52.780 --> 00:06:54.620 and now it is simply sent 131 00:06:54.620 --> 00:06:57.860 as the target in the HTTP request. 132 00:06:57.860 --> 00:07:02.240 And so then the server can figure out what to do with it. 133 00:07:02.240 --> 00:07:04.560 Now, if this target was empty, 134 00:07:04.560 --> 00:07:07.570 so if it was just a slash basically 135 00:07:07.570 --> 00:07:10.600 then we would be accessing the website's route, 136 00:07:10.600 --> 00:07:15.040 which is just restcountries.eu in this example. 137 00:07:15.040 --> 00:07:19.490 Then the next part of the request are the request headers, 138 00:07:19.490 --> 00:07:21.560 which is just some information 139 00:07:21.560 --> 00:07:25.030 that we sent about the request itself. 140 00:07:25.030 --> 00:07:27.960 There are tons of standard different headers, 141 00:07:27.960 --> 00:07:30.930 like what browser is used to make the request, 142 00:07:30.930 --> 00:07:35.373 at what time, the user's language and many, many more. 143 00:07:36.420 --> 00:07:40.340 Now finally, in the case, we're sending data to the server. 144 00:07:40.340 --> 00:07:43.240 There will also be a request body, 145 00:07:43.240 --> 00:07:46.410 and that body will contain the data that we're sending, 146 00:07:46.410 --> 00:07:49.920 for example, coming from an HTML form. 147 00:07:49.920 --> 00:07:52.760 So that is the HTTP request. 148 00:07:52.760 --> 00:07:55.470 And I hope that it makes sense to you. 149 00:07:55.470 --> 00:07:58.100 Now, of course, it's not us developers 150 00:07:58.100 --> 00:08:01.313 who manually write these HTTP requests, 151 00:08:01.313 --> 00:08:04.930 but it's still helpful and valuable that you understand 152 00:08:04.930 --> 00:08:09.710 what an HTTP request and also a response look like. 153 00:08:09.710 --> 00:08:13.495 Also, I want to mention that there's also HTTPS, 154 00:08:13.495 --> 00:08:15.480 as you probably know. 155 00:08:15.480 --> 00:08:19.930 And the main difference between HTTP and HTTPS 156 00:08:19.930 --> 00:08:24.930 is that HTTPS is encrypted using TLS or SSL, 157 00:08:25.670 --> 00:08:27.468 which are yet some are protocols, 158 00:08:27.468 --> 00:08:30.470 but I'm not gonna bore you with these. 159 00:08:30.470 --> 00:08:31.810 But besides that, 160 00:08:31.810 --> 00:08:35.460 the logic behind HTTP requests and responses 161 00:08:35.460 --> 00:08:39.820 still applies to HTTPS, alright? 162 00:08:39.820 --> 00:08:44.220 So our request is formed and now it hits the server, 163 00:08:44.220 --> 00:08:47.530 which will then be working on it until it has our data 164 00:08:47.530 --> 00:08:50.810 or Web page ready to send back. 165 00:08:50.810 --> 00:08:54.320 And once it's ready, it will send it back using, 166 00:08:54.320 --> 00:08:58.400 as you can guess, an HTTP response. 167 00:08:58.400 --> 00:09:00.780 And the HTTP response message 168 00:09:00.780 --> 00:09:04.160 actually looks quite similar to the request. 169 00:09:04.160 --> 00:09:08.860 So also with a start line, headers and a body. 170 00:09:08.860 --> 00:09:11.600 Now, in this case, the start line has, 171 00:09:11.600 --> 00:09:16.240 besides the version also a status code and a message. 172 00:09:16.240 --> 00:09:18.840 And these are used to let the client know 173 00:09:18.840 --> 00:09:22.880 whether the request has been successful or failed. 174 00:09:22.880 --> 00:09:25.790 For example, 200 means, okay. 175 00:09:25.790 --> 00:09:29.660 And the status code that everyone knows is 404, 176 00:09:29.660 --> 00:09:31.890 which means page not found. 177 00:09:31.890 --> 00:09:34.087 So that is where this 404 code, 178 00:09:34.087 --> 00:09:38.150 that everyone already knew, comes from, okay. 179 00:09:38.150 --> 00:09:41.150 Then the response headers are information 180 00:09:41.150 --> 00:09:43.270 about the response itself. 181 00:09:43.270 --> 00:09:45.010 So just like before, 182 00:09:45.010 --> 00:09:47.260 and there are a ton available 183 00:09:47.260 --> 00:09:50.800 and we can also make up our own actually. 184 00:09:50.800 --> 00:09:54.490 And finally, the last part of the response is, again, 185 00:09:54.490 --> 00:09:58.350 the body, which is present in most responses, 186 00:09:58.350 --> 00:10:02.110 and this body usually contains the JSON data coming back 187 00:10:02.110 --> 00:10:06.423 from an API or the HTML of the Web page that we requested 188 00:10:06.423 --> 00:10:09.070 or something like that. 189 00:10:09.070 --> 00:10:10.710 So we talked in great detail 190 00:10:10.710 --> 00:10:12.950 about the most important parts here, 191 00:10:12.950 --> 00:10:16.750 which are the HTTP request and the response. 192 00:10:16.750 --> 00:10:18.860 But in our imaginary example, 193 00:10:18.860 --> 00:10:22.910 we only just did one request to restcountries.eu 194 00:10:22.910 --> 00:10:26.210 and got one response back, right? 195 00:10:26.210 --> 00:10:27.790 And that's how it's gonna work 196 00:10:27.790 --> 00:10:31.220 when all we do is to access an API. 197 00:10:31.220 --> 00:10:34.294 However, if it's a Web page that we're accessing, 198 00:10:34.294 --> 00:10:38.430 then there will be many more requests and responses. 199 00:10:38.430 --> 00:10:41.530 And that's because when we do the first request, 200 00:10:41.530 --> 00:10:45.780 all we get back is just the initial HTML file. 201 00:10:45.780 --> 00:10:49.440 That HTML file will then get scanned by the browser 202 00:10:49.440 --> 00:10:52.140 for all the assets that it needs in order 203 00:10:52.140 --> 00:10:54.370 to build the entire Web page 204 00:10:54.370 --> 00:10:59.370 like JavaScript, CSS files, image files, or other assets. 205 00:10:59.590 --> 00:11:01.317 And then for each different file, 206 00:11:01.317 --> 00:11:06.180 there will be a new HTTP request made to the server. 207 00:11:06.180 --> 00:11:08.403 So basically this entire back and forth 208 00:11:08.403 --> 00:11:12.640 between client and server happens for every single file 209 00:11:12.640 --> 00:11:15.330 that is included in the Web page. 210 00:11:15.330 --> 00:11:17.800 However, there can be multiple requests 211 00:11:17.800 --> 00:11:20.800 and responses happening at the same time, 212 00:11:20.800 --> 00:11:22.680 but the amount is still limited 213 00:11:22.680 --> 00:11:26.490 because otherwise the connection would start to slow down. 214 00:11:26.490 --> 00:11:30.028 But anyway, when all the files have finally arrived, 215 00:11:30.028 --> 00:11:32.843 then the Web page can be rendered in the browser, 216 00:11:32.843 --> 00:11:35.230 according to the HTML, 217 00:11:35.230 --> 00:11:40.090 CSS and JavaScript specifications that you already know. 218 00:11:40.090 --> 00:11:42.690 Now, as a final piece of the puzzle, 219 00:11:42.690 --> 00:11:45.830 let's talk again about TCP/IP 220 00:11:45.830 --> 00:11:48.856 and figure out how this request and response data 221 00:11:48.856 --> 00:11:52.820 is actually sent across the Web, okay. 222 00:11:52.820 --> 00:11:56.270 So we said before that TCP and IP 223 00:11:56.270 --> 00:11:58.210 are the communication protocols 224 00:11:58.210 --> 00:12:02.240 that define how data travels across the Web. 225 00:12:02.240 --> 00:12:05.174 Now I'm not gonna go into a lot of detail here, 226 00:12:05.174 --> 00:12:08.010 but here is what you need to know. 227 00:12:08.010 --> 00:12:12.270 So first the job of TCP is to break the requests 228 00:12:12.270 --> 00:12:16.630 and responses down into thousands of small chunks, 229 00:12:16.630 --> 00:12:19.283 called packets before they are sent. 230 00:12:20.170 --> 00:12:24.360 Once the small packets arrive at their final destination, 231 00:12:24.360 --> 00:12:27.330 TCP will reassemble all the packets 232 00:12:27.330 --> 00:12:30.485 into the original request or response. 233 00:12:30.485 --> 00:12:33.630 And this is necessary so that each packet 234 00:12:33.630 --> 00:12:37.260 can take a different route through the Internet 235 00:12:37.260 --> 00:12:40.650 because this way the message arrives at the destination 236 00:12:40.650 --> 00:12:42.610 as quick as possible, 237 00:12:42.610 --> 00:12:44.094 which would not be possible 238 00:12:44.094 --> 00:12:48.232 if we sent the entire data simply as a big chunk. 239 00:12:48.232 --> 00:12:52.070 So that would be like trying to go through dense traffic 240 00:12:52.070 --> 00:12:55.640 with like the biggest bus that you can imagine. 241 00:12:55.640 --> 00:12:58.180 So probably not a good idea. 242 00:12:58.180 --> 00:12:59.860 Now, as a second part, 243 00:12:59.860 --> 00:13:03.400 the job of the IP protocol is to actually send 244 00:13:03.400 --> 00:13:06.953 and route these packets through the Internet. 245 00:13:06.953 --> 00:13:09.330 So it ensures that they arrive 246 00:13:09.330 --> 00:13:11.460 at the destination they should go, 247 00:13:11.460 --> 00:13:14.655 using IP addresses on each packet. 248 00:13:14.655 --> 00:13:16.960 Okay, and that's it. 249 00:13:16.960 --> 00:13:19.924 That's a broad overview of what really happens 250 00:13:19.924 --> 00:13:22.810 behind the scenes of the Web. 251 00:13:22.810 --> 00:13:25.630 And I hope that you found this information useful 252 00:13:25.630 --> 00:13:30.370 and also interesting and not all too confusing. 253 00:13:30.370 --> 00:13:32.230 But anyway, now let's go back 254 00:13:32.230 --> 00:13:34.923 to our JavaScript and AJAX calls.