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.