1
00:00:02,070 --> 00:00:04,410
So let's get started with Ajax.

2
00:00:04,410 --> 00:00:05,700
And as mentioned in the

3
00:00:05,700 --> 00:00:07,660
beginning of this course section,

4
00:00:07,660 --> 00:00:11,490
Ajax, and this entire idea behind this concept,

5
00:00:11,490 --> 00:00:14,900
is all about sending HTTP requests from

6
00:00:14,900 --> 00:00:18,630
inside your browser-side JavaScript code.

7
00:00:18,630 --> 00:00:21,850
And therefore, if you want to use this Ajax concept,

8
00:00:21,850 --> 00:00:23,630
we first of all have to write some

9
00:00:23,630 --> 00:00:26,270
browser-side JavaScript code.

10
00:00:26,270 --> 00:00:28,750
And for this I'll go to the public folder,

11
00:00:28,750 --> 00:00:30,850
since the contents of that folder are

12
00:00:30,850 --> 00:00:33,250
statically-served and made available to

13
00:00:33,250 --> 00:00:35,250
the visitors of our page.

14
00:00:35,250 --> 00:00:36,083
And in there,

15
00:00:36,083 --> 00:00:37,960
I'll add a scripts folder,

16
00:00:37,960 --> 00:00:39,823
next to the styles folder.

17
00:00:40,760 --> 00:00:42,200
In the scripts folder,

18
00:00:42,200 --> 00:00:44,330
I'll add a "comments" JS file,

19
00:00:44,330 --> 00:00:46,520
because I'll write some JavaScript code,

20
00:00:46,520 --> 00:00:49,110
some browser-site JavaScript code,

21
00:00:49,110 --> 00:00:52,360
that will deal with fetching and saving comments

22
00:00:52,360 --> 00:00:55,423
with those Ajax requests to be precise.

23
00:00:56,970 --> 00:00:59,980
And since I want to start with fetching comments,

24
00:00:59,980 --> 00:01:02,620
let's see how that could work.

25
00:01:02,620 --> 00:01:04,739
For this, let's have a look at the template

26
00:01:04,739 --> 00:01:08,100
where I do want to fetch comments.

27
00:01:08,100 --> 00:01:10,930
That's the post-details EJS file.

28
00:01:10,930 --> 00:01:14,430
And in there I have this load comments button,

29
00:01:14,430 --> 00:01:16,180
which is wrapped by a form,

30
00:01:16,180 --> 00:01:18,410
just to ensure that a get request

31
00:01:18,410 --> 00:01:21,763
is sent to this URL if this button is clicked.

32
00:01:22,860 --> 00:01:24,780
So this form doesn't submit any

33
00:01:24,780 --> 00:01:26,530
data that should be stored.

34
00:01:26,530 --> 00:01:27,900
That's why I'm using a GET

35
00:01:27,900 --> 00:01:29,670
instead of a POST request.

36
00:01:29,670 --> 00:01:32,940
It's only there to GET a new URL

37
00:01:32,940 --> 00:01:34,830
when we click a button,

38
00:01:34,830 --> 00:01:35,680
alternatively,

39
00:01:35,680 --> 00:01:37,973
we could simply use a link to this URL,

40
00:01:38,880 --> 00:01:41,040
that would work as well.

41
00:01:41,040 --> 00:01:44,180
But now I do want to change this all a little bit.

42
00:01:44,180 --> 00:01:46,510
And instead of using such a form,

43
00:01:46,510 --> 00:01:49,410
I want to add a click listener to this button.

44
00:01:49,410 --> 00:01:51,260
And when the button is clicked,

45
00:01:51,260 --> 00:01:54,053
then I want to send such an Ajax request.

46
00:01:55,360 --> 00:01:57,210
Therefore, as a first step,

47
00:01:57,210 --> 00:01:59,650
we can actually get rid of this

48
00:01:59,650 --> 00:02:01,123
form element here,

49
00:02:02,110 --> 00:02:04,093
and just add the button like this,

50
00:02:05,160 --> 00:02:07,050
because whilst the button now

51
00:02:07,050 --> 00:02:08,970
normally wouldn't do anything,

52
00:02:08,970 --> 00:02:11,290
we can of course add a click listener to

53
00:02:11,290 --> 00:02:12,980
the button with JavaScript,

54
00:02:12,980 --> 00:02:15,330
and then write our own browser-side

55
00:02:15,330 --> 00:02:17,900
JavaScript logic that will be kicked off

56
00:02:17,900 --> 00:02:19,433
once this button is clicked.

57
00:02:21,090 --> 00:02:22,390
For this, we just need a way of

58
00:02:22,390 --> 00:02:24,420
getting access to this button.

59
00:02:24,420 --> 00:02:26,750
And one easy way of getting access

60
00:02:26,750 --> 00:02:28,910
is to add an ID to it.

61
00:02:28,910 --> 00:02:30,587
And for example, name this the

62
00:02:30,587 --> 00:02:34,430
"load comments" button, like this.

63
00:02:34,430 --> 00:02:36,580
And then in our comments JS file,

64
00:02:36,580 --> 00:02:38,240
which will run in the browser,

65
00:02:38,240 --> 00:02:39,257
we can get access to the

66
00:02:39,257 --> 00:02:42,003
"load comments" button element

67
00:02:42,003 --> 00:02:45,100
by using document get element by ID,

68
00:02:45,100 --> 00:02:46,883
and passing this ID here.

69
00:02:47,750 --> 00:02:50,240
So, this will then give us access to this button,

70
00:02:50,240 --> 00:02:51,970
so, that as a next step,

71
00:02:51,970 --> 00:02:53,730
we can add an event listener to it.

72
00:02:53,730 --> 00:02:55,830
As we also did it many times before

73
00:02:55,830 --> 00:02:57,193
in this course already.

74
00:02:58,510 --> 00:03:01,130
And here, I then wanna add a click listener to

75
00:03:01,130 --> 00:03:03,760
then execute a function that should then

76
00:03:03,760 --> 00:03:06,853
actually send a request to fetch those comments.

77
00:03:08,790 --> 00:03:10,647
So, therefore we can add a function,

78
00:03:10,647 --> 00:03:13,170
"fetch comments for post" could be

79
00:03:13,170 --> 00:03:15,620
the function name, describing what

80
00:03:15,620 --> 00:03:16,743
the function will do.

81
00:03:17,950 --> 00:03:21,212
And then here, I'll pass this function,

82
00:03:21,212 --> 00:03:23,420
pointer at this function,

83
00:03:23,420 --> 00:03:27,733
as a second parameter value to this button.

84
00:03:29,300 --> 00:03:31,140
Now, in here, in this function,

85
00:03:31,140 --> 00:03:33,900
I now do want to send such an Ajax request to

86
00:03:33,900 --> 00:03:36,110
my server to fetch that data,

87
00:03:36,110 --> 00:03:37,723
that comments data.

88
00:03:38,790 --> 00:03:39,880
And as I mentioned,

89
00:03:39,880 --> 00:03:43,760
we could do this with this XML HTTP request object,

90
00:03:43,760 --> 00:03:46,460
but that's a bit clunky to use.

91
00:03:46,460 --> 00:03:48,920
Or we add a third party library,

92
00:03:48,920 --> 00:03:49,900
like Axios,

93
00:03:49,900 --> 00:03:51,793
and use stat in this function then.

94
00:03:52,920 --> 00:03:56,100
Or we use the built-in "fetch" function,

95
00:03:56,100 --> 00:03:58,820
and I'll go for that approach.

96
00:03:58,820 --> 00:04:01,030
So, we can call the fetch function here,

97
00:04:01,030 --> 00:04:02,790
even though we haven't defined it,

98
00:04:02,790 --> 00:04:04,633
because it's built into the browser.

99
00:04:05,670 --> 00:04:07,630
And then the fetch function takes a

100
00:04:07,630 --> 00:04:10,520
string as a parameter value.

101
00:04:10,520 --> 00:04:12,170
And the concrete value here

102
00:04:12,170 --> 00:04:14,103
should be the URL to which you

103
00:04:14,103 --> 00:04:17,160
want to send a GET request;

104
00:04:17,160 --> 00:04:18,649
Because the fetch function by

105
00:04:18,649 --> 00:04:20,950
default sends a get request,

106
00:04:20,950 --> 00:04:22,720
though you can configure it to

107
00:04:22,720 --> 00:04:25,200
send different kinds of requests as well.

108
00:04:25,200 --> 00:04:27,580
We will explore that later though.

109
00:04:27,580 --> 00:04:29,493
So, here we'll send a get request.

110
00:04:30,970 --> 00:04:33,040
Now, the URL to which I do want to

111
00:04:33,040 --> 00:04:35,861
send a request here is in the end,

112
00:04:35,861 --> 00:04:37,390
"/",

113
00:04:37,390 --> 00:04:40,090
so appended to the domain of

114
00:04:40,090 --> 00:04:41,670
the page we're currently on,

115
00:04:41,670 --> 00:04:46,096
and then, "/" "posts", "/", the concrete post ID.

116
00:04:46,096 --> 00:04:49,542
We'll have to see how we get that,

117
00:04:49,542 --> 00:04:50,637
"/", "comments".

118
00:04:51,800 --> 00:04:53,720
So, I want to send a request to

119
00:04:53,720 --> 00:04:56,220
this path on the currently loaded domain,

120
00:04:56,220 --> 00:04:59,043
on the currently loaded website, in the end.

121
00:05:01,010 --> 00:05:03,120
Now, how can we get this ID here,

122
00:05:03,120 --> 00:05:05,193
inside of this Java script file?

123
00:05:06,220 --> 00:05:08,950
There are various ways of getting that,

124
00:05:08,950 --> 00:05:12,010
one rather simple, yet very good way

125
00:05:12,010 --> 00:05:13,370
of getting the ID,

126
00:05:13,370 --> 00:05:15,193
is to add it to this button.

127
00:05:16,070 --> 00:05:19,590
With such a "data-" attribute.

128
00:05:19,590 --> 00:05:22,350
You might recall this special attribute.

129
00:05:22,350 --> 00:05:25,050
I did cover it early in the course when

130
00:05:25,050 --> 00:05:27,440
we built this tic-tac-toe game.

131
00:05:27,440 --> 00:05:29,890
It's an attribute that allows you to

132
00:05:29,890 --> 00:05:33,850
append or add arbitrary data values to

133
00:05:33,850 --> 00:05:36,970
any HTML element of your choice.

134
00:05:36,970 --> 00:05:39,360
So all HTML elements can take

135
00:05:39,360 --> 00:05:41,480
these data attributes,

136
00:05:41,480 --> 00:05:43,710
and you can then use these values,

137
00:05:43,710 --> 00:05:46,310
which you added to HTML elements

138
00:05:46,310 --> 00:05:47,823
in your JavaScript code.

139
00:05:48,810 --> 00:05:50,070
So for example, here we could add

140
00:05:50,070 --> 00:05:53,550
a post ID data attribute like this,

141
00:05:53,550 --> 00:05:57,700
with "data-", and then any identifier of your choice,

142
00:05:57,700 --> 00:06:00,240
in this case post ID,

143
00:06:00,240 --> 00:06:01,890
and then simply set this equal to

144
00:06:02,772 --> 00:06:03,605
"post._ID"

145
00:06:04,520 --> 00:06:06,840
injected with EJS,

146
00:06:06,840 --> 00:06:09,540
so that the concrete post Id value is

147
00:06:09,540 --> 00:06:11,470
injected dynamically when

148
00:06:11,470 --> 00:06:13,520
this template is rendered.

149
00:06:13,520 --> 00:06:14,910
So once it was rendered,

150
00:06:14,910 --> 00:06:16,630
this will be a fixed value,

151
00:06:16,630 --> 00:06:18,040
but it will of course be different

152
00:06:18,040 --> 00:06:19,503
for different posts.

153
00:06:20,870 --> 00:06:23,680
And now we can extract that from the button

154
00:06:23,680 --> 00:06:25,890
when the button is clicked.

155
00:06:25,890 --> 00:06:28,010
Because in this function here,

156
00:06:28,010 --> 00:06:31,520
will automatically get an "event" object.

157
00:06:31,520 --> 00:06:32,890
We also learned about this

158
00:06:32,890 --> 00:06:34,840
early on the course already.

159
00:06:34,840 --> 00:06:36,380
When you trigger a function

160
00:06:36,380 --> 00:06:38,170
based on an Event Listener,

161
00:06:38,170 --> 00:06:40,327
JavaScript automatically gives you an

162
00:06:40,327 --> 00:06:42,574
"event" object describing the

163
00:06:42,574 --> 00:06:44,033
event that occurred.

164
00:06:44,910 --> 00:06:46,790
And in there you, for example,

165
00:06:46,790 --> 00:06:48,760
get the target of the event.

166
00:06:48,760 --> 00:06:50,210
So in this case,

167
00:06:50,210 --> 00:06:52,893
the button that caused the event, like this.

168
00:06:54,500 --> 00:06:56,330
Though, we don't even need that, of course.

169
00:06:56,330 --> 00:06:57,870
Because we already got access to

170
00:06:57,870 --> 00:07:00,600
the button here, through line one.

171
00:07:00,600 --> 00:07:02,120
So whilst we could get access to it,

172
00:07:02,120 --> 00:07:03,960
like this with event target,

173
00:07:03,960 --> 00:07:06,050
we don't even have to use this way.

174
00:07:06,050 --> 00:07:08,990
Instead, we can get our post ID therefore,

175
00:07:08,990 --> 00:07:10,760
by getting access to this button,

176
00:07:10,760 --> 00:07:13,210
the "load comments button" here,

177
00:07:13,210 --> 00:07:14,800
and then there,

178
00:07:14,800 --> 00:07:17,510
we can use the "dataset" property to

179
00:07:17,510 --> 00:07:19,120
get access to all these

180
00:07:19,120 --> 00:07:21,760
data attributes we added.

181
00:07:21,760 --> 00:07:23,730
And then the identifier we chose

182
00:07:23,730 --> 00:07:25,810
for our data attributes.

183
00:07:25,810 --> 00:07:26,717
In this case,

184
00:07:26,717 --> 00:07:27,550
"postid".

185
00:07:29,130 --> 00:07:30,540
Like this.

186
00:07:30,540 --> 00:07:33,150
This will give us the post ID we added,

187
00:07:33,150 --> 00:07:36,290
because I chose post ID here as an identifier,

188
00:07:36,290 --> 00:07:37,313
after a dash.

189
00:07:38,690 --> 00:07:41,470
And that's how we can get the concrete post ID.

190
00:07:41,470 --> 00:07:43,320
And now we can add this here,

191
00:07:43,320 --> 00:07:46,020
and to easily inject this into the string,

192
00:07:46,020 --> 00:07:48,570
I'll use this template string,

193
00:07:48,570 --> 00:07:49,673
with the back ticks.

194
00:07:51,760 --> 00:07:54,890
We learned about that earlier in the course.

195
00:07:54,890 --> 00:07:58,160
Where I have back ticks instead of single quotes,

196
00:07:58,160 --> 00:08:00,650
and this still creates a regular string,

197
00:08:00,650 --> 00:08:02,850
but it's a string into which

198
00:08:02,850 --> 00:08:05,760
you can inject values like this,

199
00:08:05,760 --> 00:08:09,280
with this dollar sign, curly brace syntax.

200
00:08:09,280 --> 00:08:11,230
So this then constructs a string,

201
00:08:11,230 --> 00:08:13,723
which contains the post ID value.

202
00:08:14,800 --> 00:08:16,170
And this will then send a

203
00:08:16,170 --> 00:08:19,083
HTTP request to this URL.

204
00:08:20,250 --> 00:08:21,100
So now with that,

205
00:08:21,100 --> 00:08:24,300
we'll send a GET request to this URL.

206
00:08:24,300 --> 00:08:27,430
That already is a Ajax request,

207
00:08:27,430 --> 00:08:28,860
if you want to call it like this,

208
00:08:28,860 --> 00:08:32,480
or simply a JavaScript driven request.

209
00:08:32,480 --> 00:08:35,039
A HTTP request, which is invoked by

210
00:08:35,039 --> 00:08:36,982
our own JavaScript code.

211
00:08:37,850 --> 00:08:39,470
And that is a key difference to

212
00:08:39,470 --> 00:08:41,520
all the requests we sent before.

213
00:08:41,520 --> 00:08:43,289
It's now not sent automatically

214
00:08:43,289 --> 00:08:44,847
by the browser and therefore,

215
00:08:44,847 --> 00:08:46,960
the response won't automatically

216
00:08:46,960 --> 00:08:48,760
be handled by the browser.

217
00:08:48,760 --> 00:08:51,250
Instead it's sent manually and therefore now,

218
00:08:51,250 --> 00:08:53,440
we as a developer also have to

219
00:08:53,440 --> 00:08:56,060
define the exact code that should

220
00:08:56,060 --> 00:08:59,260
be executed once we get a response.

221
00:08:59,260 --> 00:09:00,600
And that's why we're doing this,

222
00:09:00,600 --> 00:09:02,780
because now we'll have full control

223
00:09:02,780 --> 00:09:05,440
over what we do with the response.

224
00:09:05,440 --> 00:09:07,800
We don't automatically load a new page,

225
00:09:07,800 --> 00:09:10,770
we can instead just update the existing page.

226
00:09:10,770 --> 00:09:12,623
Which is exactly what I want to do.

227
00:09:13,860 --> 00:09:15,823
Now, how do we do this, though?

228
00:09:16,780 --> 00:09:19,400
Well, as I mentioned before, on the slides,

229
00:09:19,400 --> 00:09:22,483
the fetch function returns a promise.

230
00:09:23,470 --> 00:09:25,520
So therefore, we can actually add the

231
00:09:25,520 --> 00:09:27,310
async keyword here.

232
00:09:27,310 --> 00:09:29,080
As we did it multiple times before

233
00:09:29,080 --> 00:09:30,650
on the server site,

234
00:09:30,650 --> 00:09:34,030
when we worked with Mongo DB or mySQL.

235
00:09:34,030 --> 00:09:36,630
Now ,I'm doing it here in the client-side,

236
00:09:36,630 --> 00:09:38,280
in the browser side code,

237
00:09:38,280 --> 00:09:41,410
because there we can also use async await.

238
00:09:41,410 --> 00:09:44,070
It's not Node JS specific.

239
00:09:44,070 --> 00:09:45,810
And we can use async await

240
00:09:45,810 --> 00:09:47,150
whenever we're dealing with

241
00:09:47,150 --> 00:09:50,120
asynchronous operations that use promises,

242
00:09:50,120 --> 00:09:52,217
like the fetch function does here.

243
00:09:52,217 --> 00:09:54,960
And we can then await this response,

244
00:09:54,960 --> 00:09:56,883
which we get eventually back.

245
00:09:57,820 --> 00:10:00,090
So fetch will give us a promise,

246
00:10:00,090 --> 00:10:02,670
which will resolve to a response eventually.

247
00:10:02,670 --> 00:10:04,710
And that response can be stored

248
00:10:04,710 --> 00:10:06,193
in a constant like this.

249
00:10:08,030 --> 00:10:09,350
Now in this response,

250
00:10:09,350 --> 00:10:11,720
we'll get a bunch of information.

251
00:10:11,720 --> 00:10:14,160
This response here, is simply an object

252
00:10:14,160 --> 00:10:17,200
with a bunch of information about the response.

253
00:10:17,200 --> 00:10:20,040
For example, we can look into the headers,

254
00:10:20,040 --> 00:10:21,980
which are as some metadata,

255
00:10:21,980 --> 00:10:24,880
some pieces of metadata that are attached.

256
00:10:24,880 --> 00:10:26,810
We get an "ok" field,

257
00:10:26,810 --> 00:10:28,580
which is true or false,

258
00:10:28,580 --> 00:10:31,270
telling us whether it's a success response,

259
00:10:31,270 --> 00:10:33,500
or if an error occurred,

260
00:10:33,500 --> 00:10:34,753
and much more.

261
00:10:35,910 --> 00:10:37,260
For us most importantly,

262
00:10:37,260 --> 00:10:38,710
we want to get the body,

263
00:10:38,710 --> 00:10:40,120
which is the data that was

264
00:10:40,120 --> 00:10:42,210
sent back by the server.

265
00:10:42,210 --> 00:10:44,520
Though, we actually don't get it

266
00:10:44,520 --> 00:10:46,160
in a convenient format here,

267
00:10:46,160 --> 00:10:48,720
if we access this body field.

268
00:10:48,720 --> 00:10:50,770
Instead, we typically use one of

269
00:10:50,770 --> 00:10:52,640
the utility functions,

270
00:10:52,640 --> 00:10:55,290
the find on this response object.

271
00:10:55,290 --> 00:10:57,990
So, also built into the browser,

272
00:10:57,990 --> 00:11:02,090
which will part the response body for us.

273
00:11:02,090 --> 00:11:04,760
For example, if we get back such JSON data,

274
00:11:04,760 --> 00:11:07,600
which is the data format commonly used,

275
00:11:07,600 --> 00:11:10,630
we would call the JSON function here,

276
00:11:10,630 --> 00:11:12,960
or the JSON method to be precise,

277
00:11:12,960 --> 00:11:14,570
on the response.

278
00:11:14,570 --> 00:11:16,030
And this would give us the

279
00:11:16,030 --> 00:11:18,600
extracted and already parsed

280
00:11:18,600 --> 00:11:22,450
response data as a JavaScript object,

281
00:11:22,450 --> 00:11:26,063
or as JavaScript value types in general.

282
00:11:27,300 --> 00:11:29,760
Now, JSON doesn't give us the data like this.

283
00:11:29,760 --> 00:11:32,700
Instead, it actually also yields a promise,

284
00:11:32,700 --> 00:11:35,700
because this parsing can also take a bit longer.

285
00:11:35,700 --> 00:11:38,770
And therefore is an asynchronous task.

286
00:11:38,770 --> 00:11:41,130
And hence, we can also wait this

287
00:11:41,130 --> 00:11:43,380
before we then actually got the data

288
00:11:43,380 --> 00:11:44,660
which we want.

289
00:11:44,660 --> 00:11:47,713
So the actual response data.

290
00:11:50,330 --> 00:11:52,160
And that (inaudible) the data which

291
00:11:52,160 --> 00:11:54,118
we can use in code to continue,

292
00:11:54,118 --> 00:11:56,040
to then, for example,

293
00:11:56,040 --> 00:11:58,303
update parts of the loaded page.

294
00:11:59,330 --> 00:12:00,570
But before we do that,

295
00:12:00,570 --> 00:12:01,870
we'll have to move back to

296
00:12:01,870 --> 00:12:03,940
the server-side first.

297
00:12:03,940 --> 00:12:05,260
Because it's good that we

298
00:12:05,260 --> 00:12:08,060
try to parse some JSON data here,

299
00:12:08,060 --> 00:12:10,530
when we send the request to this URL,

300
00:12:10,530 --> 00:12:12,350
or to this path.

301
00:12:12,350 --> 00:12:14,720
But at the moment this would fail,

302
00:12:14,720 --> 00:12:16,200
because at the moment,

303
00:12:16,200 --> 00:12:18,350
if we have a look at our routes,

304
00:12:18,350 --> 00:12:20,210
this get route here,

305
00:12:20,210 --> 00:12:22,150
to which we're sending a request,

306
00:12:22,150 --> 00:12:25,220
does not return any JSON.

307
00:12:25,220 --> 00:12:26,053
Instead,

308
00:12:26,053 --> 00:12:29,260
this get route returns a rendered template,

309
00:12:29,260 --> 00:12:32,760
and therefore in the end some HTML code.

310
00:12:32,760 --> 00:12:33,810
Which was great

311
00:12:33,810 --> 00:12:35,920
as long as the browser should handle this,

312
00:12:35,920 --> 00:12:37,650
but which is not what we want

313
00:12:37,650 --> 00:12:40,780
now that we are sending our own request.

314
00:12:40,780 --> 00:12:44,380
Now we're not interested in a full HTML document.

315
00:12:44,380 --> 00:12:47,010
We don't want a rendered template.

316
00:12:47,010 --> 00:12:48,930
We want the raw data,

317
00:12:48,930 --> 00:12:50,590
so that we can use that in our

318
00:12:50,590 --> 00:12:53,053
own client-side, JavaScript code.

319
00:12:54,110 --> 00:12:54,943
And therefore,

320
00:12:54,943 --> 00:12:56,690
now we want to change the response

321
00:12:56,690 --> 00:12:58,320
that's sent back here,

322
00:12:58,320 --> 00:13:00,720
in this get route.

323
00:13:00,720 --> 00:13:03,950
Instead of sending back a rendered template,

324
00:13:03,950 --> 00:13:06,300
we want to call the JSON method

325
00:13:06,300 --> 00:13:08,370
on the response object here,

326
00:13:08,370 --> 00:13:10,223
in our Node Express code.

327
00:13:11,960 --> 00:13:14,030
And the JSON method is a

328
00:13:14,030 --> 00:13:16,660
built-in method on this response object,

329
00:13:16,660 --> 00:13:20,150
just as render was a built-in method.

330
00:13:20,150 --> 00:13:21,740
Render was a built-in method

331
00:13:21,740 --> 00:13:23,800
for rendering templates.

332
00:13:23,800 --> 00:13:25,720
JSON is a built in method for

333
00:13:25,720 --> 00:13:27,523
sending back JSON data.

334
00:13:28,610 --> 00:13:30,540
And this can be confusing because we

335
00:13:30,540 --> 00:13:32,360
got a JSON method here in

336
00:13:32,360 --> 00:13:35,320
our Node JS Express code.

337
00:13:35,320 --> 00:13:37,290
And we got a JSON method here

338
00:13:37,290 --> 00:13:39,493
in our client-side JavaScript code.

339
00:13:40,550 --> 00:13:42,330
But the two methods are coming from

340
00:13:42,330 --> 00:13:44,310
totally different places,

341
00:13:44,310 --> 00:13:46,560
here in the client-side Java script code

342
00:13:46,560 --> 00:13:48,580
it's built into the browser.

343
00:13:48,580 --> 00:13:50,480
Here on the server-side code

344
00:13:50,480 --> 00:13:52,653
it's built into the Express library.

345
00:13:53,540 --> 00:13:56,020
And they do different things.

346
00:13:56,020 --> 00:13:58,390
Here, when we call it on the server-side,

347
00:13:58,390 --> 00:14:01,710
we in the end, encode data as JSON,

348
00:14:01,710 --> 00:14:03,833
to send it back as a response.

349
00:14:04,890 --> 00:14:06,970
On the client-side we do the opposite.

350
00:14:06,970 --> 00:14:11,680
We decode data which is currently encoded in JSON,

351
00:14:11,680 --> 00:14:15,240
to convert it back into JavaScript data values,

352
00:14:15,240 --> 00:14:18,103
with which we can work in our JavaScript code here.

353
00:14:19,180 --> 00:14:20,960
So we've got the two opposite sides

354
00:14:20,960 --> 00:14:22,670
working together here,

355
00:14:22,670 --> 00:14:24,910
between request and response.

356
00:14:24,910 --> 00:14:26,743
And therefore here, we now wanna send back

357
00:14:26,743 --> 00:14:30,630
a response where we encode our data as JSON

358
00:14:30,630 --> 00:14:32,818
so that we can and decode, and use it,

359
00:14:32,818 --> 00:14:35,240
here in our client-side code

360
00:14:35,240 --> 00:14:37,930
with help of that JSON method.

361
00:14:37,930 --> 00:14:40,530
Because JSON is that data format,

362
00:14:40,530 --> 00:14:42,930
that machine-readable data format,

363
00:14:42,930 --> 00:14:44,420
which is typically used for

364
00:14:44,420 --> 00:14:47,990
transmitting data between client and server.

365
00:14:47,990 --> 00:14:49,690
Now the JSON method here,

366
00:14:49,690 --> 00:14:52,480
in our server-side Node Express code,

367
00:14:52,480 --> 00:14:56,630
wants a value that should be encoded to JSON,

368
00:14:56,630 --> 00:14:57,500
and that should then be

369
00:14:57,500 --> 00:15:00,440
sent back as to response data.

370
00:15:00,440 --> 00:15:02,000
And in my case here,

371
00:15:02,000 --> 00:15:04,140
that should be the comments,

372
00:15:04,140 --> 00:15:05,760
the comments which have fetched here,

373
00:15:05,760 --> 00:15:07,410
this array of comments.

374
00:15:07,410 --> 00:15:09,113
That's what I wanna send back.

375
00:15:11,080 --> 00:15:13,250
We could also send back an object

376
00:15:13,250 --> 00:15:14,770
that has a "comments" key,

377
00:15:14,770 --> 00:15:16,810
which then stores to comments.

378
00:15:16,810 --> 00:15:18,610
So then the comments array would be a

379
00:15:18,610 --> 00:15:20,503
nested array in this object.

380
00:15:21,370 --> 00:15:22,860
This is totally up to you.

381
00:15:22,860 --> 00:15:24,220
You can wrap the array in

382
00:15:24,220 --> 00:15:25,830
such an extra object,

383
00:15:25,830 --> 00:15:28,640
or you directly sent back the comments array,

384
00:15:28,640 --> 00:15:30,120
which is what I'll do here,

385
00:15:30,120 --> 00:15:32,253
but ultimately that is totally up to you.

386
00:15:34,200 --> 00:15:36,350
What we now don't need any more here,

387
00:15:36,350 --> 00:15:38,230
in our server-side route,

388
00:15:38,230 --> 00:15:41,783
is this line here, line 119.

389
00:15:42,940 --> 00:15:44,920
Previously, I needed to fetch the

390
00:15:44,920 --> 00:15:46,840
post in addition to the comments,

391
00:15:46,840 --> 00:15:48,370
because I had to render the

392
00:15:48,370 --> 00:15:51,450
complete post detailed template.

393
00:15:51,450 --> 00:15:53,670
Now, since we don't load a new page,

394
00:15:53,670 --> 00:15:55,810
but only sent back specific data

395
00:15:55,810 --> 00:15:57,690
that we want on the front-end,

396
00:15:57,690 --> 00:15:59,900
we don't need to get the post again.

397
00:15:59,900 --> 00:16:01,720
Instead, we just need to send back

398
00:16:01,720 --> 00:16:04,800
that specific data that was requested,

399
00:16:04,800 --> 00:16:07,740
and the specific data that was requested were

400
00:16:07,740 --> 00:16:09,100
these comments.

401
00:16:09,100 --> 00:16:11,923
So sending back the comments is all we need to do.

402
00:16:14,010 --> 00:16:15,620
And therefore now with that,

403
00:16:15,620 --> 00:16:18,990
we updated this server-side route.

404
00:16:18,990 --> 00:16:21,130
Now back on the front-end,

405
00:16:21,130 --> 00:16:23,030
we get this response data,

406
00:16:23,030 --> 00:16:24,930
and parsing this from the JSON

407
00:16:24,930 --> 00:16:26,130
data should now work,

408
00:16:26,130 --> 00:16:28,560
because we are now getting JSON data

409
00:16:28,560 --> 00:16:29,783
in the response.

410
00:16:30,960 --> 00:16:33,470
Now, before we do anything useful with it,

411
00:16:33,470 --> 00:16:35,450
let's simply console-log this

412
00:16:35,450 --> 00:16:36,880
response data here,

413
00:16:36,880 --> 00:16:39,083
to see whether that all works.

414
00:16:41,350 --> 00:16:43,880
So now, after adding all this code,

415
00:16:43,880 --> 00:16:47,320
if we now save all our files on the server,

416
00:16:47,320 --> 00:16:48,883
and on the client,

417
00:16:48,883 --> 00:16:51,020
all we have to do is go back to

418
00:16:51,020 --> 00:16:53,530
the post detailed template,

419
00:16:53,530 --> 00:16:54,910
and then make sure that

420
00:16:54,910 --> 00:16:58,050
we load our JavaScript file.

421
00:16:58,050 --> 00:16:59,260
So here in the head section,

422
00:16:59,260 --> 00:17:02,153
we can add a script tag and point at:

423
00:17:02,153 --> 00:17:07,153
"/", "scripts", "/", "comments" JS.

424
00:17:09,530 --> 00:17:11,680
And also at the defer attribute

425
00:17:11,680 --> 00:17:13,430
to make sure that this file

426
00:17:13,430 --> 00:17:15,500
only executes once all the

427
00:17:15,500 --> 00:17:17,593
HTML code has been parsed.

428
00:17:20,180 --> 00:17:22,420
Now save this as well.

429
00:17:22,420 --> 00:17:24,020
And then back here,

430
00:17:24,020 --> 00:17:25,589
we can go back to all posts,

431
00:17:25,589 --> 00:17:27,930
and view a single post.

432
00:17:27,930 --> 00:17:30,900
And now let's open the developer tools,

433
00:17:30,900 --> 00:17:33,653
and go to the JavaScript console there,

434
00:17:34,520 --> 00:17:37,100
to then click "load comments".

435
00:17:37,100 --> 00:17:38,670
And if everything works,

436
00:17:38,670 --> 00:17:42,400
you should now see your array of comments here.

437
00:17:42,400 --> 00:17:43,840
So the comments that were

438
00:17:43,840 --> 00:17:46,030
fetched from the server-side.

439
00:17:46,030 --> 00:17:49,393
And there were fetched from the database.

440
00:17:51,050 --> 00:17:53,890
Now, of course you might not have any comments yet.

441
00:17:53,890 --> 00:17:56,250
You have to add them through this form first.

442
00:17:56,250 --> 00:17:57,470
And you can do that,

443
00:17:57,470 --> 00:17:58,800
even though the form is not

444
00:17:58,800 --> 00:18:01,450
implemented with Ajax yet,

445
00:18:01,450 --> 00:18:02,660
still it works.

446
00:18:02,660 --> 00:18:04,220
So you can add some comments.

447
00:18:04,220 --> 00:18:06,300
And once you did add some comments,

448
00:18:06,300 --> 00:18:08,740
you should also see them here in the console.

449
00:18:08,740 --> 00:18:11,950
Whenever you click load comments.

450
00:18:11,950 --> 00:18:14,240
Because sending this behind-the-scenes

451
00:18:14,240 --> 00:18:16,540
JavaScript request works.

452
00:18:16,540 --> 00:18:19,500
And you can tell that the page wasn't reloaded.

453
00:18:19,500 --> 00:18:21,510
If you take a closer look at

454
00:18:21,510 --> 00:18:23,463
this "refresh" icon here.

455
00:18:24,400 --> 00:18:27,380
When you reload the page, or if you switch a page,

456
00:18:27,380 --> 00:18:30,880
it briefly changes to a cross it's very quick,

457
00:18:30,880 --> 00:18:34,640
but it briefly flickers and changes to a cross.

458
00:18:34,640 --> 00:18:36,500
Here if I click "load comments",

459
00:18:36,500 --> 00:18:38,090
if you watch this icon,

460
00:18:38,090 --> 00:18:39,530
it never flickers.

461
00:18:39,530 --> 00:18:41,920
It never changes to a cross because

462
00:18:41,920 --> 00:18:43,890
this page never is reloaded.

463
00:18:43,890 --> 00:18:46,520
The browser is not loading any new page.

464
00:18:46,520 --> 00:18:49,350
This is really just happening behind the scenes,

465
00:18:49,350 --> 00:18:52,310
driven by our own JavaScript code,

466
00:18:52,310 --> 00:18:54,630
where we used this Ajax concept

467
00:18:54,630 --> 00:18:57,190
to send our own request.

468
00:18:57,190 --> 00:19:00,040
And that is a huge step forward.

469
00:19:00,040 --> 00:19:01,270
Now let's however,

470
00:19:01,270 --> 00:19:03,250
also see how we can update

471
00:19:03,250 --> 00:19:05,180
what we see on the screen based

472
00:19:05,180 --> 00:19:07,563
on that response that we get back.