So let's now explore this Ajax functionality
and how we can write our own Ajax code
in a concrete project.
And for this, I prepared a little starting project for you
which is based on a project we worked on
in an earlier course section,
the Node and MongoDB section.
But even if you skipped that section,
you can just use the attached starting project
and follow along with that.
With that project we worked on there,
we built a little blog where you can create posts,
view to posts and here,
if you view a post,
you also have to as comments section.
This is new.
We did not build this in the previous course sections.
I built this off screen
and I will walk you through the code
I did add in just a couple of seconds.
In the end here, we got a button
where we can load some comments
and we can leave a comment.
Now you won't have any comments yet.
You first of all,
need to leave some to load some.
And of course you also might not have any post yet.
In this case, you need to create one first.
However, to run any of that,
you'll first of all,
need to download the attached project snapshot.
And you should download that anyways,
even if you did follow along in the earlier course section,
because as I mentioned,
I did add it to this code here
and then you also need to have a running MongoDB server
because in this project,
which you find attached,
I'm connecting to a MongoDB server.
I'm connecting to a MongoDB server
with help of this database JS file.
If you wanna learn how that works.
You will have to check out these earlier MongoDB sections
and of course,
I also wanna emphasize right away
that this Ajax feature
is not MongoDB or Node SQL specific.
It does not care about which database
you might be using on your backend,
or if you're using any database at all.
That's really important.
Now with that said if you do download this attached project
and if you then did start your MongoDB server,
you just as always need to, first of all,
run NPM Installed to install all the dependencies
this project needs.
And then NPM Start to start this development server
or this web server.
Now, what did I change
compared to the earlier course sections?
Well, we got this blog JS routes file
with a bunch of routes.
And there we got routes
for loading the list of posts,
for viewing a post,
for creating a post,
editing,
deleting and so on.
And what I changed in here
because these are all routes we already had.
What I changed in here is at the bottom.
I added this get route to /posts,
/:id,
/comments.
And I do a load some comments from the database here
with the code you're seeing here.
And I also then did add a post route to /posts,
/:id/comments,
where I create a new comment object
and store this as a document in my MongoDB database.
And then I redirect back to the posts page.
That's what I'm doing here.
That's how this works.
And this isn't too fancy.
There's nothing new in here,
just the creation of a new MongoDB document.
And then I'm fetching some documents here.
It is worth pointing out that for fetching the comments,
I'm actually first fetching the post with a given ID,
and then I'm separately fetching the comments
because the comments are stored in their own collection,
simply so that I don't have
a long nested array of comments
in a single post document
because you could have an infinite amount of comments
on a given post
and having a nest that array inside of a post document,
which could potentially become very long,
is not great for performance.
That's why I have a separate collection.
And that's why here for fetching comments,
I need to fetch both separately the post
and then the comments for the post.
But that's just a side note.
So here we're not using Ajax at all.
Here, I'm only using features and concepts
we already learned about earlier in this course.
But now together with you,
I wanna dive into using Ajax
and I wanna improve the user experience here.
For example, when I click on load comments,
the page shouldn't reload,
and hence we shouldn't have this annoying jump here
where the scrolling position is lost.
Instead, I would like to just update
this part of the page here
to load some new comments.
That would be amazing.
And then of course thereafter,
we'll also make sure that storing a comment
can happen behind the scenes.
So that there we send a request
without reloading the page
just because the request is done.
So these are the things we're working on.
And whilst working on this,
we're going to learn how Ajax works.