Original subtitles

1 1

If you want to go really deep and really understand 2

2

how requests and responses work on the Web, 3

3

then this video is for you. 4

4

So this is basically a high level overview 5

5

of how the Web actually works behind the scenes 6

6

in regards to requests and responses. 7

7

Now, this knowledge is not required though, 8

8

for moving on in the course, 9

9

and that's why I marked this video as optional. 10

10

So you can safely skip it 11

11

if you wanna move on more quickly. 12

12

But if you're interested, than just keep watching. 13

13

So this is the diagram that we already saw 14

14

when we first talked about AJAX calls. 15

15

So just to recap, whenever we try to access a Web server, 16

16

the browser, which is the client, 17

17

sends a request to the server 18

18

and the server will then send back a response 19

19

and that response contains the data 20

20

or the Web page that we requested. 21

21

And that's right, this process works the exact same way 22

22

no matter if we're accessing an entire Web page 23

23

or just some data from a Web API. 24

24

And this whole process actually has a name 25

25

and it's called the Request-response model 26

26

or also the Client-server architecture. 27

27

But anyway, let's now dive a bit deeper into this. 28

28

So let's use the example of the URL 29

29

that we actually accessed in the last video 30

30

to get our country data. 31

31

Now, every URL gets an HTTP or HTTPS, 32

32

which is for the protocol 33

33

that will be used on this connection. 34

34

And we're gonna talk about this a bit later in the video. 35

35

Then we have the domain name, 36

36

which is restcountries.eu in this case. 37

37

And also after a slash we have to so-called resource 38

38

that we want to access. 39

39

And in this case, that's /rest/V2 and so on. 40

40

Now this domain name, restcountries.eu 41

41

is actually not the real address 42

42

of the server that we're trying to access. 43

43

It's really just a nice name 44

44

that is easy for us to memorize. 45

45

But what this means is that we need a way of 46

46

kind of converting the domain name 47

47

to the real address of the server. 48

48

And that happens through a so-called D-N-S. 49

49

So DNS stands for domain name server 50

50

and domain name servers are a special kind of server. 51

51

So they are basically like the phone books of the Internet. 52

52

So the first step that happens when we access any Web server 53

53

is that the browser makes a request to a DNS 54

54

and this special server will then 55

55

simply match the web address 56

56

of the URL to the server's real IP address, all right. 57

57

And actually this all happens 58

58

through your Internet service provider, 59

59

but the complete details don't really matter here. 60

60

What you need to retain from this first part 61

61

is that the domain is not the real address 62

62

and that a DNS will convert the domain 63

63

to the real IP address. 64

64

And then after the real IP address has been sent back 65

65

to the browser, we can finally call it. 66

66

So this is how the real address looks like. 67

67

So it still has the protocol, but then comes the IP address. 68

68

And also the port that we access on the server. 69

69

And this port number is really 70

70

just to identify a specific service 71

71

that's running on a server. 72

72

So you can think of it like a sub address, okay. 73

73

This port number has nothing to do 74

74

with the /rest/V2 resource 75

75

that we want to access. 76

76

So that resource will actually 77

77

be sent over in the HTTP request, 78

78

as we will see in a moment. 79

79

Okay, and that actually wraps up the first step. 80

80

So once we have the real IP address, 81

81

a TCP socket connection is established between the browser 82

82

and the server. 83

83

And so they are now finally connected. 84

84

And this connection is typically kept alive 85

85

for the entire time that it takes 86

86

to transfer all files of the Website or all data. 87

87

Now what are TCP and IP? 88

88

Well TCP is the Transmission Control Protocol. 89

89

And IP is the Internet Protocol. 90

90

And together they are communication protocols 91

91

that define exactly how data travels across the Web. 92

92

They are basically the Internet's 93

93

fundamental control system, 94

94

because again, they are the ones 95

95

who set the rules about how data moves on the Internet. 96

96

And don't worry if that sounds confusing, 97

97

we are actually gonna learn a bit more about TCP/IP 98

98

a bit later in this video. 99

99

But anyway, now it's time to finally make our request. 100

100

And the request that we make is an HTTP request, 101

101

where HTTP stands for Hypertext Transfer Protocol. 102

102

So after TCP/IP, HTTP is another communication protocol. 103

103

And by the way, a communication protocol 104

104

is simply a system of rules 105

105

that allows two or more parties to communicate. 106

106

Now in the case of HTTP, 107

107

it's just a protocol that allows clients 108

108

and Web servers to communicate. 109

109

And that works by sending requests 110

110

and response messages from client to server and back. 111

111

Now a request message will look something like this. 112

112

The beginning of the message is the most important part 113

113

called the start line. 114

114

And this one contains the HTTP method 115

115

that is used in the request, 116

116

then the request target and the HTTP version. 117

117

So about the HTTP methods, there are many available, 118

118

but the most important ones are; 119

119

GET, for simply requesting data, 120

120

POST, for sending data 121

121

and PUT and PATCH, to basically modify data. 122

122

So you'll see that an HTTP request to a server 123

123

is not only for getting data, 124

124

but we can also send data, now right. 125

125

Now about the request target. 126

126

This is where the server is told 127

127

that we want to access the rest/V2/alpha resource 128

128

in this case, remember that? 129

129

So we had this in the URL before 130

130

and now it is simply sent 131

131

as the target in the HTTP request. 132

132

And so then the server can figure out what to do with it. 133

133

Now, if this target was empty, 134

134

so if it was just a slash basically 135

135

then we would be accessing the website's route, 136

136

which is just restcountries.eu in this example. 137

137

Then the next part of the request are the request headers, 138

138

which is just some information 139

139

that we sent about the request itself. 140

140

There are tons of standard different headers, 141

141

like what browser is used to make the request, 142

142

at what time, the user's language and many, many more. 143

143

Now finally, in the case, we're sending data to the server. 144

144

There will also be a request body, 145

145

and that body will contain the data that we're sending, 146

146

for example, coming from an HTML form. 147

147

So that is the HTTP request. 148

148

And I hope that it makes sense to you. 149

149

Now, of course, it's not us developers 150

150

who manually write these HTTP requests, 151

151

but it's still helpful and valuable that you understand 152

152

what an HTTP request and also a response look like. 153

153

Also, I want to mention that there's also HTTPS, 154

154

as you probably know. 155

155

And the main difference between HTTP and HTTPS 156

156

is that HTTPS is encrypted using TLS or SSL, 157

157

which are yet some are protocols, 158

158

but I'm not gonna bore you with these. 159

159

But besides that, 160

160

the logic behind HTTP requests and responses 161

161

still applies to HTTPS, alright? 162

162

So our request is formed and now it hits the server, 163

163

which will then be working on it until it has our data 164

164

or Web page ready to send back. 165

165

And once it's ready, it will send it back using, 166

166

as you can guess, an HTTP response. 167

167

And the HTTP response message 168

168

actually looks quite similar to the request. 169

169

So also with a start line, headers and a body. 170

170

Now, in this case, the start line has, 171

171

besides the version also a status code and a message. 172

172

And these are used to let the client know 173

173

whether the request has been successful or failed. 174

174

For example, 200 means, okay. 175

175

And the status code that everyone knows is 404, 176

176

which means page not found. 177

177

So that is where this 404 code, 178

178

that everyone already knew, comes from, okay. 179

179

Then the response headers are information 180

180

about the response itself. 181

181

So just like before, 182

182

and there are a ton available 183

183

and we can also make up our own actually. 184

184

And finally, the last part of the response is, again, 185

185

the body, which is present in most responses, 186

186

and this body usually contains the JSON data coming back 187

187

from an API or the HTML of the Web page that we requested 188

188

or something like that. 189

189

So we talked in great detail 190

190

about the most important parts here, 191

191

which are the HTTP request and the response. 192

192

But in our imaginary example, 193

193

we only just did one request to restcountries.eu 194

194

and got one response back, right? 195

195

And that's how it's gonna work 196

196

when all we do is to access an API. 197

197

However, if it's a Web page that we're accessing, 198

198

then there will be many more requests and responses. 199

199

And that's because when we do the first request, 200

200

all we get back is just the initial HTML file. 201

201

That HTML file will then get scanned by the browser 202

202

for all the assets that it needs in order 203

203

to build the entire Web page 204

204

like JavaScript, CSS files, image files, or other assets. 205

205

And then for each different file, 206

206

there will be a new HTTP request made to the server. 207

207

So basically this entire back and forth 208

208

between client and server happens for every single file 209

209

that is included in the Web page. 210

210

However, there can be multiple requests 211

211

and responses happening at the same time, 212

212

but the amount is still limited 213

213

because otherwise the connection would start to slow down. 214

214

But anyway, when all the files have finally arrived, 215

215

then the Web page can be rendered in the browser, 216

216

according to the HTML, 217

217

CSS and JavaScript specifications that you already know. 218

218

Now, as a final piece of the puzzle, 219

219

let's talk again about TCP/IP 220

220

and figure out how this request and response data 221

221

is actually sent across the Web, okay. 222

222

So we said before that TCP and IP 223

223

are the communication protocols 224

224

that define how data travels across the Web. 225

225

Now I'm not gonna go into a lot of detail here, 226

226

but here is what you need to know. 227

227

So first the job of TCP is to break the requests 228

228

and responses down into thousands of small chunks, 229

229

called packets before they are sent. 230

230

Once the small packets arrive at their final destination, 231

231

TCP will reassemble all the packets 232

232

into the original request or response. 233

233

And this is necessary so that each packet 234

234

can take a different route through the Internet 235

235

because this way the message arrives at the destination 236

236

as quick as possible, 237

237

which would not be possible 238

238

if we sent the entire data simply as a big chunk. 239

239

So that would be like trying to go through dense traffic 240

240

with like the biggest bus that you can imagine. 241

241

So probably not a good idea. 242

242

Now, as a second part, 243

243

the job of the IP protocol is to actually send 244

244

and route these packets through the Internet. 245

245

So it ensures that they arrive 246

246

at the destination they should go, 247

247

using IP addresses on each packet. 248

248

Okay, and that's it. 249

249

That's a broad overview of what really happens 250

250

behind the scenes of the Web. 251

251

And I hope that you found this information useful 252

252

and also interesting and not all too confusing. 253

253

But anyway, now let's go back 254

254

to our JavaScript and AJAX calls.