1
00:00:02,160 --> 00:00:04,110
So now that we have this big picture,

2
00:00:04,110 --> 00:00:07,850
let's have a closer look at this HttpRequest thing.

3
00:00:07,860 --> 00:00:09,690
How does this actually work?

4
00:00:09,690 --> 00:00:15,240
Well we have our script, our client side, so the code that runs in the browser and we have our server,

5
00:00:15,300 --> 00:00:17,800
the backend, the server side.

6
00:00:17,820 --> 00:00:22,950
Now we can also name the client side as frontend because it's what the user sees, what the user works

7
00:00:22,950 --> 00:00:26,750
with and that is detached from the backend. The backend,

8
00:00:26,760 --> 00:00:32,130
so our server, could run on a totally different domain, a totally different server than our frontend.

9
00:00:32,220 --> 00:00:38,100
So we might be serving the HTML page and the Javascript which is responsible for what the user

10
00:00:38,100 --> 00:00:39,930
sees on

11
00:00:39,930 --> 00:00:40,940
mypage.com

12
00:00:40,940 --> 00:00:46,590
whereas the server side logic might be hosted on a totally different server, let's say on 

13
00:00:46,620 --> 00:00:48,240
mybackend.com.

14
00:00:48,240 --> 00:00:55,290
Still, these two pieces or these two ends can communicate and the job on the client side is to get the

15
00:00:55,290 --> 00:01:01,410
user input, validate it and then to send it off to the server because the job on the server side is to

16
00:01:01,410 --> 00:01:07,510
store and retrieve it in a database typically and the database would run on yet another server,

17
00:01:07,530 --> 00:01:12,990
it's important to understand this point that you don't directly connect your client side Javascript

18
00:01:12,990 --> 00:01:19,860
code to a database for security reasons because you would expose your database credentials in the client

19
00:01:19,860 --> 00:01:24,630
side code which you don't want to do but instead you talk to a web server and that web server might

20
00:01:24,630 --> 00:01:26,410
then talk to a database server.

21
00:01:26,520 --> 00:01:28,850
Of course using a database is totally optional

22
00:01:28,860 --> 00:01:34,890
but of course often the server side will use one to persistently store data and then get it from the

23
00:01:34,890 --> 00:01:36,210
database.

24
00:01:36,210 --> 00:01:42,360
Now the communication between the client side and the server happens with the help of HttpRequests

25
00:01:42,420 --> 00:01:50,670
and responses and these requests and responses have to be configured and set up in a certain way, following

26
00:01:50,670 --> 00:01:52,440
a certain structure.

27
00:01:52,440 --> 00:01:57,350
When you're sending a request to the server, it needs to know the address,

28
00:01:57,390 --> 00:02:03,720
so it needs to know the URL made up of the domain and the path, the path is the part after the

29
00:02:03,720 --> 00:02:04,350
domain,

30
00:02:04,380 --> 00:02:12,450
so mypage.com/posts, mypage.com would be the domain, /posts would be the path.

31
00:02:12,510 --> 00:02:18,600
In addition, each HttpRequest has a HTTP method that is assigned to it.

32
00:02:18,600 --> 00:02:25,350
Now you have a couple of available HTTP methods, you have for example get, post, patch, put and delete.

33
00:02:25,860 --> 00:02:26,610
These methods

34
00:02:26,610 --> 00:02:33,300
describe what you want to do, though I will say it's totally up to the server to decide for which method

35
00:02:33,330 --> 00:02:36,580
URL combination the server wants to do what,

36
00:02:36,630 --> 00:02:39,930
so with the method you don't tell the server what to do,

37
00:02:39,990 --> 00:02:47,220
the server just exposes different endpoints and for example might support a post request to /posts

38
00:02:47,550 --> 00:02:54,780
whereas it maybe might not support a patch request to /posts but again, it's up to the people writing

39
00:02:54,780 --> 00:03:00,440
the server side code to decide which HTTP method URL combinations are supported.

40
00:03:00,600 --> 00:03:06,570
Typically of course you go for combinations that make sense logically because there the logic is

41
00:03:06,990 --> 00:03:14,010
that get requests typically are there to get data, post requests are there to create data on the server

42
00:03:14,040 --> 00:03:19,890
or create data on the server which might be stored in a database there, patch and put are there to

43
00:03:19,920 --> 00:03:26,250
update data, patch in the sense of updating the existing data, put in the sense of overriding it and

44
00:03:26,250 --> 00:03:29,220
delete as you can guess is there to delete data,

45
00:03:29,250 --> 00:03:36,250
that's what you commonly use but again, it's the server side that decides which HTTP method URL

46
00:03:36,270 --> 00:03:39,030
combinations are supported, on the client side,

47
00:03:39,120 --> 00:03:44,400
you then can send requests to these combinations. If you use a combination that is not supported by the

48
00:03:44,400 --> 00:03:49,050
server side, you'll simply get a HTTP error as a response.

49
00:03:49,050 --> 00:03:55,860
Now other parts of a HttpRequest are potential headers, that is extra metadata which can be attached to

50
00:03:55,890 --> 00:03:58,770
HttpRequests and some requests,

51
00:03:58,770 --> 00:04:06,150
for example a post request, also hold a request body or extra data which is attached to a request.

52
00:04:06,150 --> 00:04:11,160
As you can imagine, if we're getting a list of posts, there is no data we could attach,

53
00:04:11,160 --> 00:04:14,160
we want a list of posts and we're done.

54
00:04:14,160 --> 00:04:20,310
If you want to add a post, if you want to create a brand new post, that of course is different, then you

55
00:04:20,310 --> 00:04:26,850
want to attach the data that is required for the post creation, like the title and the content to the

56
00:04:26,850 --> 00:04:28,620
request you are sending,

57
00:04:28,620 --> 00:04:30,570
so that's the idea here.

58
00:04:30,570 --> 00:04:37,200
Now that data then can be sent in different formats and again, it's the server that tells you which formats

59
00:04:37,260 --> 00:04:39,560
it expects or supports.

60
00:04:39,570 --> 00:04:45,750
The most common format is JSON data, which I'll dive into in more details in a second but we also have

61
00:04:45,810 --> 00:04:51,480
FormData which is supported in Javascript and which is fairly popular and you could also send binary

62
00:04:51,480 --> 00:04:52,950
files or other formats

63
00:04:53,130 --> 00:04:59,370
but again, it's up to the server to decide which data format is supported for which HTTP method URL

64
00:04:59,390 --> 00:05:00,280
combination.

65
00:05:01,460 --> 00:05:03,440
Now that is all the theory,

66
00:05:03,440 --> 00:05:09,080
if that is all brand new to you, attached you find a couple of resources that allow you to dig deeper

67
00:05:09,080 --> 00:05:14,200
into how the web works, into HttpRequests and HTTP methods.

68
00:05:14,210 --> 00:05:20,600
I will now move on and now we'll have a look at how we can actually send HttpRequests to a server

69
00:05:20,660 --> 00:05:21,920
from inside Javascript.