1
00:00:02,090 --> 00:00:04,800
Now to conclude this course section

2
00:00:04,800 --> 00:00:08,530
there's one last pretty important feature

3
00:00:08,530 --> 00:00:11,660
of Ajax requests I want to dive in.

4
00:00:11,660 --> 00:00:15,070
And that is the fact that when working with Ajax,

5
00:00:15,070 --> 00:00:18,610
so with those JavaScript-driven HTTP requests,

6
00:00:18,610 --> 00:00:22,830
you actually have more HTTP methods available.

7
00:00:22,830 --> 00:00:27,440
More HTTP methods you can use for those requests.

8
00:00:27,440 --> 00:00:28,880
But let's take a step back.

9
00:00:28,880 --> 00:00:31,880
We know about Get and Post requests.

10
00:00:31,880 --> 00:00:34,830
We use them all the time throughout this course.

11
00:00:34,830 --> 00:00:38,070
We know that a Get request is used to fetch data,

12
00:00:38,070 --> 00:00:40,350
and we typically send a Post request

13
00:00:40,350 --> 00:00:44,730
if we wanna express our intention to store some data.

14
00:00:44,730 --> 00:00:47,200
I also will emphasize again,

15
00:00:47,200 --> 00:00:48,910
as I did before in the course,

16
00:00:48,910 --> 00:00:53,580
that the request method alone doesn't do anything.

17
00:00:53,580 --> 00:00:56,340
It's always up to your server side code

18
00:00:56,340 --> 00:00:58,980
to decide what happens exactly.

19
00:00:58,980 --> 00:01:01,590
You write your own server side code.

20
00:01:01,590 --> 00:01:03,380
So it's that service side code

21
00:01:03,380 --> 00:01:05,480
that decides what should happen

22
00:01:05,480 --> 00:01:08,320
if it receives an incoming Post request.

23
00:01:08,320 --> 00:01:12,200
You could send a Get request to delete posts, for example.

24
00:01:12,200 --> 00:01:15,210
The method alone doesn't imply anything.

25
00:01:15,210 --> 00:01:17,882
You just typically follow certain conventions

26
00:01:17,882 --> 00:01:22,090
to use Post requests if you change something on the server,

27
00:01:22,090 --> 00:01:24,640
or if you store data, and Get requests

28
00:01:24,640 --> 00:01:26,280
if you want to fetch data.

29
00:01:26,280 --> 00:01:28,690
But it's always the server side code in the end

30
00:01:28,690 --> 00:01:33,240
that really decides what should happen in which scenario.

31
00:01:33,240 --> 00:01:34,538
It is just worth pointing out

32
00:01:34,538 --> 00:01:37,560
that because we typically use Post requests

33
00:01:37,560 --> 00:01:40,830
for implying that data should be stored,

34
00:01:40,830 --> 00:01:44,220
indeed Post requests are able to carry data

35
00:01:44,220 --> 00:01:45,830
in their request body

36
00:01:45,830 --> 00:01:48,670
whereas Get requests are not.

37
00:01:48,670 --> 00:01:53,053
So, Get requests can't carry any data, Post requests can.

38
00:01:54,360 --> 00:01:56,254
Now, as also mentioned before,

39
00:01:56,254 --> 00:01:58,730
Get request is for example triggered,

40
00:01:58,730 --> 00:02:01,030
if you enter a URL in the browser,

41
00:02:01,030 --> 00:02:03,520
if you click a link or if you have a form

42
00:02:03,520 --> 00:02:05,680
where the method is set to Get.

43
00:02:05,680 --> 00:02:07,200
And for a Post request,

44
00:02:07,200 --> 00:02:10,889
you'll only trigger that if the method is set to Post.

45
00:02:10,889 --> 00:02:15,040
At least that was the case as long as we didn't know Ajax.

46
00:02:15,040 --> 00:02:18,660
With Ajax, we can also send our own requests

47
00:02:18,660 --> 00:02:20,060
from inside JavaScript,

48
00:02:20,060 --> 00:02:23,760
and set the method to Get or not set any method at all

49
00:02:23,760 --> 00:02:26,560
on the fetch function, since Get is the default there

50
00:02:26,560 --> 00:02:30,830
as you learned, or set method to Post for Post requests.

51
00:02:30,830 --> 00:02:34,870
So, these are the two HTTP methods we use all the time,

52
00:02:34,870 --> 00:02:37,490
because if we leave aside Ajax,

53
00:02:37,490 --> 00:02:40,230
if we ignore what we learned in this section,

54
00:02:40,230 --> 00:02:43,970
then Get and Post were the only HTTP methods

55
00:02:43,970 --> 00:02:46,699
the browser could use or send.

56
00:02:46,699 --> 00:02:49,730
For form submission, you couldn't choose anything

57
00:02:49,730 --> 00:02:51,840
besides Get or Post.

58
00:02:51,840 --> 00:02:55,900
So Get or Post are the two main methods the browser knows.

59
00:02:55,900 --> 00:03:00,240
However, with Ajax, that picture changes a little bit.

60
00:03:00,240 --> 00:03:03,810
There you can, of course, also send Get and Post requests

61
00:03:03,810 --> 00:03:06,250
as you learned in this course section,

62
00:03:06,250 --> 00:03:09,760
but you can also send Put, Patch and Delete requests

63
00:03:09,760 --> 00:03:11,430
in addition to that.

64
00:03:11,430 --> 00:03:14,790
And these are brand new HTTP method types,

65
00:03:14,790 --> 00:03:17,290
which we haven't seen before in this course,

66
00:03:17,290 --> 00:03:20,070
which we also haven't used in this section,

67
00:03:20,070 --> 00:03:22,859
but which exist in addition to Get and Post,

68
00:03:22,859 --> 00:03:25,370
if you are using Ajax.

69
00:03:25,370 --> 00:03:28,750
So, those JavaScript-driven HTTP requests

70
00:03:28,750 --> 00:03:30,840
for sending requests.

71
00:03:30,840 --> 00:03:32,600
Now, what do these methods mean?

72
00:03:32,600 --> 00:03:35,853
And for which kind of requests would you typically use them?

73
00:03:36,900 --> 00:03:39,670
Well, a Put request is typically used

74
00:03:39,670 --> 00:03:42,490
if you want to imply that some data on the server

75
00:03:42,490 --> 00:03:45,399
is updated or replaced.

76
00:03:45,399 --> 00:03:48,160
And you would send it with the fetch function

77
00:03:48,160 --> 00:03:50,163
by setting the method to Put.

78
00:03:51,280 --> 00:03:54,970
A Patch request implies that data is updated.

79
00:03:54,970 --> 00:03:57,900
So just like Put, but Put typically is used

80
00:03:57,900 --> 00:04:01,200
if an entire resource, an entire document

81
00:04:01,200 --> 00:04:03,440
in that database is replaced.

82
00:04:03,440 --> 00:04:06,978
Whereas Patch is used if only parts of a resource,

83
00:04:06,978 --> 00:04:11,210
parts of an element in a database are updated.

84
00:04:11,210 --> 00:04:12,930
And you would send a Patch request

85
00:04:12,930 --> 00:04:15,520
by setting the method to Patch.

86
00:04:15,520 --> 00:04:17,320
The Delete method, as you might guess,

87
00:04:17,320 --> 00:04:19,980
is used if you want to imply that some resource

88
00:04:19,980 --> 00:04:22,874
is deleted, and you would send such a request

89
00:04:22,874 --> 00:04:25,563
by setting the method to Delete.

90
00:04:27,540 --> 00:04:30,380
So, these are brand new methods,

91
00:04:30,380 --> 00:04:33,870
also sometimes called HTTP words,

92
00:04:33,870 --> 00:04:36,370
which are available if you're using

93
00:04:36,370 --> 00:04:40,028
these JavaScript-driven HTTP requests.

94
00:04:40,028 --> 00:04:43,560
Now, this does not mean that you now have to use

95
00:04:43,560 --> 00:04:46,590
JavaScript-driven requests for everything.

96
00:04:46,590 --> 00:04:50,150
For example, in this demo application we worked on,

97
00:04:50,150 --> 00:04:54,040
we do have delete and edit functionalities.

98
00:04:54,040 --> 00:04:56,300
And if I click Delete Post here,

99
00:04:56,300 --> 00:04:59,320
then we actually send a Post request,

100
00:04:59,320 --> 00:05:01,140
not a Delete request,

101
00:05:01,140 --> 00:05:03,503
because I sent this deletion request

102
00:05:03,503 --> 00:05:06,700
with help of this,

103
00:05:06,700 --> 00:05:08,350
here it is in post-item,

104
00:05:08,350 --> 00:05:11,283
with help of this form that wraps this button.

105
00:05:12,690 --> 00:05:14,770
And here I'm sending a Post request

106
00:05:14,770 --> 00:05:16,920
because, as you learned, the browser,

107
00:05:16,920 --> 00:05:21,920
if you rely on form submission, only knows Get or Post.

108
00:05:22,130 --> 00:05:24,550
I can't choose Delete here.

109
00:05:24,550 --> 00:05:29,109
This does not exist in the browser for form submissions.

110
00:05:29,109 --> 00:05:33,200
Of course, we could now write JavaScript code

111
00:05:33,200 --> 00:05:35,740
that prevents this form submission

112
00:05:35,740 --> 00:05:39,500
and where we then send our own behind-the-scenes request,

113
00:05:39,500 --> 00:05:42,260
where we do use the Delete method

114
00:05:42,260 --> 00:05:45,100
to send such a delete request.

115
00:05:45,100 --> 00:05:46,800
That would be possible.

116
00:05:46,800 --> 00:05:50,400
We then just also have to handle a response appropriately.

117
00:05:50,400 --> 00:05:54,260
And for example, manually remove the Delete as DOM element

118
00:05:54,260 --> 00:05:55,136
from the DOM,

119
00:05:55,136 --> 00:06:00,136
if that response tells us that the deletion was successful.

120
00:06:00,276 --> 00:06:03,740
At the moment, that's not something we have to care about

121
00:06:03,740 --> 00:06:05,620
because at the moment, for deleting,

122
00:06:05,620 --> 00:06:09,813
I just redirect and therefore efficiently I reload the page.

123
00:06:09,813 --> 00:06:12,990
That is not necessarily how we would handle it,

124
00:06:12,990 --> 00:06:15,490
if we send such a behind-the-scenes request,

125
00:06:15,490 --> 00:06:18,700
because there we typically handle the response ourselves

126
00:06:18,700 --> 00:06:20,870
with our own JavaScript code.

127
00:06:20,870 --> 00:06:24,300
Instead of letting the server redirect us somewhere.

128
00:06:24,300 --> 00:06:25,450
You could do that,

129
00:06:25,450 --> 00:06:27,970
but very often you would want to handle it yourself

130
00:06:27,970 --> 00:06:31,050
in your own JavaScript code that runs in the browser.

131
00:06:31,050 --> 00:06:33,015
And there you then might have code

132
00:06:33,015 --> 00:06:35,540
for manually updating the DOM,

133
00:06:35,540 --> 00:06:39,540
and manually removing the deleted item from there.

134
00:06:39,540 --> 00:06:41,690
So, these are all things you can do,

135
00:06:41,690 --> 00:06:43,193
but they're not mandatory.

136
00:06:44,105 --> 00:06:48,167
I do just mention these extra HTTP methods here,

137
00:06:48,167 --> 00:06:51,760
because we will encounter them later in the course again.

138
00:06:51,760 --> 00:06:54,340
Of course when we do, I will, again,

139
00:06:54,340 --> 00:06:57,020
briefly explain why we are using them then.

140
00:06:57,020 --> 00:06:59,660
But you should already be aware of them.

141
00:06:59,660 --> 00:07:01,584
Also, because of course you will see them

142
00:07:01,584 --> 00:07:05,310
in more advanced web development resources

143
00:07:05,310 --> 00:07:07,030
into which you might want to dive

144
00:07:07,030 --> 00:07:09,190
once you're done with this course.

145
00:07:09,190 --> 00:07:11,570
So, keep these extra methods in mind.

146
00:07:11,570 --> 00:07:13,640
Keep in mind that they're only available

147
00:07:13,640 --> 00:07:17,280
if you are working with JavaScript-driven HTTP requests.

148
00:07:17,280 --> 00:07:20,160
And keep in mind that you would use them

149
00:07:20,160 --> 00:07:23,580
for implying different actions

150
00:07:23,580 --> 00:07:25,280
that should happen on the server,

151
00:07:25,280 --> 00:07:27,607
but it's then still up to the server side code

152
00:07:27,607 --> 00:07:30,220
to do the actual work.

153
00:07:30,220 --> 00:07:33,800
You can send a Put request and just get back some data,

154
00:07:33,800 --> 00:07:35,340
if the service side code

155
00:07:35,340 --> 00:07:38,810
doesn't actually replace or update any resource.

156
00:07:38,810 --> 00:07:40,750
So it's always the server side code

157
00:07:40,750 --> 00:07:42,430
that does the actual work,

158
00:07:42,430 --> 00:07:44,280
but if you were building your own website,

159
00:07:44,280 --> 00:07:46,540
you'll of course want to write server-side code

160
00:07:46,540 --> 00:07:50,090
that expects certain methods, that imply a certain message,

161
00:07:50,090 --> 00:07:52,150
and then do the appropriate work.

162
00:07:52,150 --> 00:07:55,620
And you then would also send the appropriate requests

163
00:07:55,620 --> 00:07:56,890
from your client side,

164
00:07:56,890 --> 00:07:59,052
so from your browser side code.

165
00:07:59,052 --> 00:08:01,620
This already is a bit more advanced though,

166
00:08:01,620 --> 00:08:05,159
and therefore it is something we will encounter again later.

167
00:08:05,159 --> 00:08:07,400
As a last note, it is just worth knowing

168
00:08:07,400 --> 00:08:10,600
that Put and Patch, just like Post,

169
00:08:10,600 --> 00:08:12,800
can carry a request body.

170
00:08:12,800 --> 00:08:14,380
Delete can't.

171
00:08:14,380 --> 00:08:17,483
So, Delete works a lot like Get when it comes to that.