 Hello, this is Christian. So in this video, we're going to continue from where we left off in class, where I did not get to finish this Ajax function here, OK? So I just basically copied everything over. I made some tiny changes. Here, the HTML, I'm using a different jQuery library, but it's the same thing. I also added a style sheet. And I also shared that with you as well, which is a very simple one. Kind of style the font size and add some comments. I'm going to style this box right here for the comments. Also giving some margin for the input. So it gives some space here. Well, not OK. So nothing too much here. Now, make sure that the backend is running. So on the backend server, we have a model that looks like this. So this form here will create something kind of similar to this, the author name, date, and the comment, and then the ID here. If you remember, we talked about in class that we're not going to include it here when the left is server side, generally that for us, OK? So that's what happened. One thing I want to change is right here. This URL, I usually don't like to do this. So we're going to cut that out and put it somewhere up here, like maybe fonts URL equals that string. And then we're going to put that right in here. So URL plus that comment. So we're going to use it again later in the future, OK? So the data type we already created that here looks good to go. The type is going to be a post. And if it's successful, this function will fire. If there's an error, this will fire. So let's put the error first. Put E here for error or error like that, right? Receive it. And we can do a console log like that error. If you want to see what the error is, we can then just put a comma and then put the error like that. I think, yeah, we'll see if there's any error, OK? Otherwise, if it's successful, we're going to fire this function here. So what I want to do is I want to, in the back, if you remember the back, and the code looks like this, we're going to submit the form to this destination. I'm going to get the ID from the body if there's any or not. If you don't have it, we're going to call this general function down here to generate a random number between up to 9,000 or something. And then we're going to, you can log this. You can see it as you can see in the body. If you don't need to see that, you can just turn that up. And then we're going to, actually, what I'm missing here is, I'm not sure what happened here. I'm going to comments. I probably did something. I'm going to push the rec body to that list, OK? I'm going to push it to this comments list. So this comment originally has about 10 of them. And every time I'm going to keep adding that to the list. And then we're going to send that same content right back. This is coming from the form. Going to the server. We add the ID to it. It's sent right back. And when it comes back over here, so we can add some data here. So the data coming back to a successful function will be right in here. We put new comment. It's really just this new comment here. OK, so what do we do here? I'm going to go ahead and target this in the HTML, this div tag right here, and put the information here. So what I need here is like this. I need to add what should we put there? I would do something like this. So every comment will lose something like this. Put a div tag. Instead of div tag, I need a paragraph. In the paragraph, I'll put maybe strong. And I'll put here, for example, the author. Followed by maybe, I don't know, the date. The date goes right here. Let's put here so you can see it. And then below here, I have a paragraph, and I'll put the actual comment right here. So the author comment. And then I'm going to style this div tag using a class called comment. How many so many comments here? This comment here is, as you can see, it's only style. It's bold. Basically, just this comment. I'm basically, I make it bold here. I could combine this together. But that's OK. So I'll make it bold, and then that's all I need for this one here. So everyone, when I add something, it's going to push it to this list here. So now I'm going to copy this over, cut that out, and go back to my Ajax, and put it right here. And this is going to be my string. So I need to have a, I'll put here that comment. HTML is equal to that. And I use the back tick to set everything in the way I had earlier. So it pushes to over like that, makes it nice. And there we go. That's my string. I built that. And then in its place, I also want to add an ID here. The comment will be like comment one, comment two. So I want to add here a dash and then, no, I'm sorry, ID here. It's equal to put here the comment like dash one, dash two, so forth. I put a dollar sign up here, the new comment, that ID. This ID is coming back from the backend, OK? So this is you make a unique basis, it's all. And then the content, this is the author. So put here, new comment, that author. Really, I'm using a interpolation. This is actual date. So replace that with new comment, that date, all right? And those will be, you know, prepopulated. And then down here is the comment. So new comment, that comment. Here we go. That is what I need to do. And then I want to push it to that, you know, comment. So here it's the destination. It's going to go to the comment. That ID here is this ID right here. Washington is plural. Comments is comments. And then I'm going to append to this the comment HTML, OK? Remember, again, if you pass data to it, it's a setter. If you leave nothing, pass nothing, it's a getter. So I'm going to put a getter here, right? And then once I'm done, I'm going to clear my form, OK? So I want to see if this actually works. So let's run the M and back in first. I'm going to go right here, right-click on it, open the terminal, and then just type node index. OK, port 9000, copy that over. And you should see it, but you don't have to check it. So now it should work if successful. I'm going to close this now. I'm going to do something here, so some tests. Like Christian, Chris, it's fine. Then hi, hello, boom, right? You see there, right? It goes back to the server, comes right back. And we have a new comment added there, right? But then you see that the comment is still here. I want to clear this every time when I add another one. You can see it keeps adding. We keep building that list right here, OK? How do we know if the ID is actually working or not? Well, you can view in the DOM. This one, I can't do it. But you can log out to see, you can see it right here. So for example, I want to see ID just in case, right? I'll put it here. I'm going to delete it, but I just put it so you can see. So new comment, that ID like that, right? If I do it like this, boom. So this ID of 4514, and then a different ID, right? So pretty cool, huh? So I can delete that out. I know that's working, so great. I want to clear this. After I add that to that list, oops. I'm going to go ahead and target that form. This is the comment form, right? This one right here. Copy this. But I'm here, system typing. And basically what I'm going to do is I'm going to trigger what's called a reset. It's a function called trigger. And then I'm going to basically call the reset function. So you know how you have a form? You have a clear, clear button. You're clear and everything just wiped out. This is what it, that's basically what it does. This form here triggers or invoke a function called reset. And it will reset that. So for example, if I type something like this, I click submit, boom, it clears that. Add it to the backend and so forth. Okay, so that is basically it for this one. Very simple, but no here, clear form. And that's how you build this kind of blog, okay? I'll do one more down here for, let's say if there's any error. I mean, I don't have that thing here, but we can also display the error just so we can see it if there's any or not. I put here comments. I put here a pen. Or not, I'm gonna put HTML error, okay? If I have any error. So for example, if I go ahead and put like, I don't know if what number like that, okay? And see what happens. Okay, that didn't take it. Something happened. Let's see if I do like, if I have something back in, you know, it's incorrect in the backend I suppose. But we should catch the error down here. Now, the next thing I wanna do is I wanna load all the data back to this blog up here. And just for comments, you know, for something kind of interesting. So when I do the get, use the get request to load this link to this API, and we're gonna get all the data coming back, okay? So this only working, we saw that already. It's gonna come back. You see that the way I have it, exactly the same one has, I should just copy this basically. This is exactly what I have over here, right? I forgot I actually had that already. And then I'm gonna call it function down here. And the function is basically it's gonna just, see if it's inside the outside the comment here. Right here, it's fine. I'll just do it here for now. Look at the function and we load comment. And I'm gonna have it so it will automatically load this comment, you know, every, I don't know, three or five seconds or not, okay? So let's just say that I'm gonna do the get request. You notice that I did not have to go to the AJAX at all. I could also do this. So it's the URL plus the destination is comments, okay? This is another way to do it, okay? This is when I get that, then I'm gonna call a callback function that has the comment. I could be using arrow function, this is fine too. You know, like this is the comment HTML. And then let's see if this works. Okay, so this is the comment coming back, right? So this one here is kind of similar to this approach. Here I'm using the AJAX, the AJAX function. I pass the URL, I pass the data, I pass the type here. If I know exactly what type I want, instead of going to the AJAX, I'm just gonna go to the get. So this one here, I could actually be wrote this to use something like this. I don't wanna do it but I post like that, okay? And then the function to handle that request like that, right? And then of course you do more, but you can have those, you can, you know, do each one of these by themselves like this, or I can call the same AJAX and I use here, type will be a get instead of the post and then do exactly the same as do here. But I'm just doing a simple get, so you call the get function directly as the destination and then the data coming back goes right into this variable and then use it right in here, okay? So what I wanna do is I'm gonna load, add to this comments up here called comments and then the HTML, we're gonna set the comments HTML to that tag, okay? So, I don't know, I'm not sure what happened. I'm basically overwriting, I should probably call the blog post here. Not sure what that's for, I don't have, I don't remember why I put that there, but we'll see. So this will be load if I call it, if I don't call it, then nothing happens, right? So what I'm saying is this, so if I had that function and then I can call the function right away, loads comment like this, you can see right there, right? It loads it, it adds all the comment that I have earlier. If I add something to it, okay, it appends to that list, right, it keeps what I have before and then if I add something to it, it just kept pending to the list and keeps growing, okay? So you can see that, it's kind of useful in a way. If you share this link on the website and a lot of people are coming to your site and they can keep posting, right? So when you do that, then how do you know if somebody posts some data or not? So what you can do is you can fire this function at a certain interval so that it will load new content every time if a user A comes in here, they make some posts, user B comes in here and then it keeps loading that for you. So what you can do is this, we'll say set interval, it's the interval function, it takes a parallel function or a callback function here and then you can set a second, let's just say every two seconds, okay? Every two seconds this function fires. What happens in here? I load in comments. So I put the comments in here like this and if I turn that off, okay? So you can see two seconds, boom, right? And then two seconds, it keeps firing that every two seconds all the time. So that if a user, so let's say if I copy this link and I go to another site, let's see if I can load another browser over here. Okay, so let's say I have this link over here and the user comes in here, all right? Boom, two seconds, okay? And let's say I'm a user B and whatnot. So I pull something here, you know, Joe, and then hi there, something like that, it clicks the mid, boom, right? It pulls right there and then if I don't do anything, it keeps, you know, adding that automatically so you can see how you can make this for your blog site. That's what this means. Every two seconds, it reloads that. And you know, it reloads every place, everything here you have with the new data if there's any new content. What if I did not have this common display? For example, I show that here, right? What if I turn that off like this? Okay, so now, boom, data shows up, but when I add something, you know, and then the comment's not shown down until it reloads later, right? So the other user will also have something coming in. Let's say I back to like Jake, howdy, and I post that and then it waits a couple of seconds and then, boom, there it is. It shows up everywhere. Whoever have access to the site can actually see the data. And then if there's nothing changes, then it reloads that every place, every time, which may not be so efficient, but at least that's how one approach you can do this. All right? So that is all for this one. And I guess the takeaway here is that using Ajax, using the JJ query Ajax is much actually nicer than the XML HTTP request. It does the, you know, method chaining here. You can chain this together here like this. Well, not natural chaining, but you can use the actual Ajax function. Inside this Ajax, it's just a big object all the way here, here, here, here. Or you can go directly to its particular get. You know, we have a lot of things like get, put, okay? The other post and then dollar that delete like that. Yeah, so these are the four common ones. You can do the one at a time or you can just use this Ajax function and change the type to post, put, delete, get, okay? And you supply the URL here and then you load successful or not. Okay, so this success function right here, this is part here goes right inside the second parameter, as you can see. Okay, so, well, thank you so much. If you have any questions, let me know, I will share the code on our blog board or so so you can take a look at it. Otherwise, thank you and I'll see you next time.