1
00:00:02,190 --> 00:00:06,030
So let's now explore this Ajax functionality

2
00:00:06,030 --> 00:00:08,918
and how we can write our own Ajax code

3
00:00:08,918 --> 00:00:11,130
in a concrete project.

4
00:00:11,130 --> 00:00:14,719
And for this, I prepared a little starting project for you

5
00:00:14,719 --> 00:00:17,790
which is based on a project we worked on

6
00:00:17,790 --> 00:00:19,820
in an earlier course section,

7
00:00:19,820 --> 00:00:22,300
the Node and MongoDB section.

8
00:00:22,300 --> 00:00:24,470
But even if you skipped that section,

9
00:00:24,470 --> 00:00:27,230
you can just use the attached starting project

10
00:00:27,230 --> 00:00:29,823
and follow along with that.

11
00:00:29,823 --> 00:00:32,409
With that project we worked on there,

12
00:00:32,409 --> 00:00:35,590
we built a little blog where you can create posts,

13
00:00:35,590 --> 00:00:37,760
view to posts and here,

14
00:00:37,760 --> 00:00:38,820
if you view a post,

15
00:00:38,820 --> 00:00:41,530
you also have to as comments section.

16
00:00:41,530 --> 00:00:42,560
This is new.

17
00:00:42,560 --> 00:00:45,860
We did not build this in the previous course sections.

18
00:00:45,860 --> 00:00:47,747
I built this off screen

19
00:00:47,747 --> 00:00:49,780
and I will walk you through the code

20
00:00:49,780 --> 00:00:52,293
I did add in just a couple of seconds.

21
00:00:53,160 --> 00:00:54,330
In the end here, we got a button

22
00:00:54,330 --> 00:00:55,800
where we can load some comments

23
00:00:55,800 --> 00:00:57,750
and we can leave a comment.

24
00:00:57,750 --> 00:01:00,030
Now you won't have any comments yet.

25
00:01:00,030 --> 00:01:00,863
You first of all,

26
00:01:00,863 --> 00:01:02,550
need to leave some to load some.

27
00:01:02,550 --> 00:01:05,390
And of course you also might not have any post yet.

28
00:01:05,390 --> 00:01:08,240
In this case, you need to create one first.

29
00:01:08,240 --> 00:01:10,540
However, to run any of that,

30
00:01:10,540 --> 00:01:11,390
you'll first of all,

31
00:01:11,390 --> 00:01:15,100
need to download the attached project snapshot.

32
00:01:15,100 --> 00:01:17,400
And you should download that anyways,

33
00:01:17,400 --> 00:01:20,830
even if you did follow along in the earlier course section,

34
00:01:20,830 --> 00:01:21,780
because as I mentioned,

35
00:01:21,780 --> 00:01:24,380
I did add it to this code here

36
00:01:24,380 --> 00:01:28,360
and then you also need to have a running MongoDB server

37
00:01:28,360 --> 00:01:29,840
because in this project,

38
00:01:29,840 --> 00:01:31,140
which you find attached,

39
00:01:31,140 --> 00:01:34,420
I'm connecting to a MongoDB server.

40
00:01:34,420 --> 00:01:36,900
I'm connecting to a MongoDB server

41
00:01:36,900 --> 00:01:40,510
with help of this database JS file.

42
00:01:40,510 --> 00:01:42,410
If you wanna learn how that works.

43
00:01:42,410 --> 00:01:46,110
You will have to check out these earlier MongoDB sections

44
00:01:46,110 --> 00:01:46,943
and of course,

45
00:01:46,943 --> 00:01:48,820
I also wanna emphasize right away

46
00:01:48,820 --> 00:01:50,349
that this Ajax feature

47
00:01:50,349 --> 00:01:54,380
is not MongoDB or Node SQL specific.

48
00:01:54,380 --> 00:01:57,050
It does not care about which database

49
00:01:57,050 --> 00:01:59,000
you might be using on your backend,

50
00:01:59,000 --> 00:02:01,750
or if you're using any database at all.

51
00:02:01,750 --> 00:02:02,950
That's really important.

52
00:02:04,530 --> 00:02:07,511
Now with that said if you do download this attached project

53
00:02:07,511 --> 00:02:11,039
and if you then did start your MongoDB server,

54
00:02:11,039 --> 00:02:14,220
you just as always need to, first of all,

55
00:02:14,220 --> 00:02:17,420
run NPM Installed to install all the dependencies

56
00:02:17,420 --> 00:02:19,330
this project needs.

57
00:02:19,330 --> 00:02:22,770
And then NPM Start to start this development server

58
00:02:22,770 --> 00:02:24,283
or this web server.

59
00:02:25,780 --> 00:02:27,340
Now, what did I change

60
00:02:27,340 --> 00:02:30,043
compared to the earlier course sections?

61
00:02:31,050 --> 00:02:33,650
Well, we got this blog JS routes file

62
00:02:33,650 --> 00:02:35,360
with a bunch of routes.

63
00:02:35,360 --> 00:02:36,540
And there we got routes

64
00:02:36,540 --> 00:02:39,040
for loading the list of posts,

65
00:02:39,040 --> 00:02:40,450
for viewing a post,

66
00:02:40,450 --> 00:02:41,690
for creating a post,

67
00:02:41,690 --> 00:02:42,523
editing,

68
00:02:42,523 --> 00:02:43,820
deleting and so on.

69
00:02:43,820 --> 00:02:45,560
And what I changed in here

70
00:02:45,560 --> 00:02:48,250
because these are all routes we already had.

71
00:02:48,250 --> 00:02:51,430
What I changed in here is at the bottom.

72
00:02:51,430 --> 00:02:55,489
I added this get route to /posts,

73
00:02:55,489 --> 00:02:57,580
/:id,

74
00:02:57,580 --> 00:02:59,540
/comments.

75
00:02:59,540 --> 00:03:02,710
And I do a load some comments from the database here

76
00:03:02,710 --> 00:03:04,573
with the code you're seeing here.

77
00:03:05,530 --> 00:03:10,530
And I also then did add a post route to /posts,

78
00:03:10,637 --> 00:03:13,008
/:id/comments,

79
00:03:13,008 --> 00:03:16,020
where I create a new comment object

80
00:03:16,020 --> 00:03:20,090
and store this as a document in my MongoDB database.

81
00:03:20,090 --> 00:03:23,870
And then I redirect back to the posts page.

82
00:03:23,870 --> 00:03:25,930
That's what I'm doing here.

83
00:03:25,930 --> 00:03:27,510
That's how this works.

84
00:03:27,510 --> 00:03:30,450
And this isn't too fancy.

85
00:03:30,450 --> 00:03:32,170
There's nothing new in here,

86
00:03:32,170 --> 00:03:36,690
just the creation of a new MongoDB document.

87
00:03:36,690 --> 00:03:40,040
And then I'm fetching some documents here.

88
00:03:40,040 --> 00:03:43,310
It is worth pointing out that for fetching the comments,

89
00:03:43,310 --> 00:03:46,730
I'm actually first fetching the post with a given ID,

90
00:03:46,730 --> 00:03:49,620
and then I'm separately fetching the comments

91
00:03:49,620 --> 00:03:52,629
because the comments are stored in their own collection,

92
00:03:52,629 --> 00:03:54,950
simply so that I don't have

93
00:03:54,950 --> 00:03:57,380
a long nested array of comments

94
00:03:57,380 --> 00:03:59,570
in a single post document

95
00:03:59,570 --> 00:04:02,300
because you could have an infinite amount of comments

96
00:04:02,300 --> 00:04:03,650
on a given post

97
00:04:03,650 --> 00:04:08,090
and having a nest that array inside of a post document,

98
00:04:08,090 --> 00:04:10,530
which could potentially become very long,

99
00:04:10,530 --> 00:04:12,900
is not great for performance.

100
00:04:12,900 --> 00:04:15,070
That's why I have a separate collection.

101
00:04:15,070 --> 00:04:17,350
And that's why here for fetching comments,

102
00:04:17,350 --> 00:04:20,480
I need to fetch both separately the post

103
00:04:20,480 --> 00:04:22,730
and then the comments for the post.

104
00:04:22,730 --> 00:04:24,283
But that's just a side note.

105
00:04:25,500 --> 00:04:28,140
So here we're not using Ajax at all.

106
00:04:28,140 --> 00:04:31,020
Here, I'm only using features and concepts

107
00:04:31,020 --> 00:04:34,293
we already learned about earlier in this course.

108
00:04:35,410 --> 00:04:37,010
But now together with you,

109
00:04:37,010 --> 00:04:39,350
I wanna dive into using Ajax

110
00:04:39,350 --> 00:04:42,730
and I wanna improve the user experience here.

111
00:04:42,730 --> 00:04:45,140
For example, when I click on load comments,

112
00:04:45,140 --> 00:04:47,140
the page shouldn't reload,

113
00:04:47,140 --> 00:04:49,860
and hence we shouldn't have this annoying jump here

114
00:04:49,860 --> 00:04:52,930
where the scrolling position is lost.

115
00:04:52,930 --> 00:04:55,110
Instead, I would like to just update

116
00:04:55,110 --> 00:04:56,800
this part of the page here

117
00:04:56,800 --> 00:04:58,670
to load some new comments.

118
00:04:58,670 --> 00:04:59,863
That would be amazing.

119
00:05:01,290 --> 00:05:02,670
And then of course thereafter,

120
00:05:02,670 --> 00:05:05,480
we'll also make sure that storing a comment

121
00:05:05,480 --> 00:05:07,450
can happen behind the scenes.

122
00:05:07,450 --> 00:05:09,658
So that there we send a request

123
00:05:09,658 --> 00:05:11,750
without reloading the page

124
00:05:11,750 --> 00:05:14,390
just because the request is done.

125
00:05:14,390 --> 00:05:16,560
So these are the things we're working on.

126
00:05:16,560 --> 00:05:17,980
And whilst working on this,

127
00:05:17,980 --> 00:05:20,163
we're going to learn how Ajax works.