 Okay, so I think I'm going to go into, I don't know if I have any notes in here or not. I have the notes in here, but these are a little bit, okay, so the AJAX on the service integration here, this PDF here, this is both from the old book. So the AJAX is still pretty the same, hasn't changed yet. There are different ways now how to do, how make AJAX calls. There's a jQuery AJAX and there are a couple of ones that are much more robust. And we'll look at the fetch is one of the most popular ones, how to use fetch to, you know, actually fetch data from the server side and things like that, okay. So the async PDF here really talks about something called the, if you read through, just ignore anything that has the dollar sign defer, we're not going to do that right here. Okay, this is the jQuery stuff. So we'll take a look at the promise, okay, what a promise is and how to use promise to fetch data and things like that. So all the promises to fetch the AJAX and you learn the Node.js as well. All those are just, you know, asynchronous operations. Okay, so let's see, I'm going to go here and this is not, I want to run. Yeah, so last week, okay, so last week we looked at the backend, but we created a very simple application that runs two links, okay, the home link, if you remember, that loads this home page and then we have in a one-for-the-about link that runs this page, okay. Now, I don't remember if we, so the about page here and then the AJAX, let me see if I remember this. Okay, so the index, yeah, we did read them, okay, yeah. So we did do the read. So initially the app is very simple, right? We learned how to output data to the webpage using really difficult method using the response of write function. You write all your HTML manually this way. This is incomplete, right? Usually you will write a doc type just like the index over here and print everything out there. And then we switch over to the express.js framework, right, we learned from express.js. We can then have a better way to create applications using these request types, the get request. I did not do the delete and put and post yet, but you can certainly do those. And so we have a request for the homepage, the root directory that we read a file, HTML file, right? This page here, the entire document, read that and then we output the content of that file to the response of write, okay? So it's the same thing I was saying. I'll copy everything here, all the text here and put it right in here, right? Okay. So this method here is fine. Again, there's a better way to do that now. And so the better approach is of course, to use a library called handlebars. And we'll take a look at that in a minute, but I wanna cover asynchronous. So what is asynchronous and why is it so important? So what I'm gonna do is maybe I'll use this about page. So since it's already here, I said, but was it a homepage? Yeah, homepage is fine. I'll just use this homepage here and we'll use this to just demo, you know what, maybe not a good idea. Let's go over to a unit six here and I'll do something separately. Okay, so unit six here, I will put a file in here. We will use the, okay. So we'll call this, what should I call it? Callback, I'll call it callback.js, okay? So to understand how asynchronous works, we have to look at how callback functions works in JavaScript. Now JavaScript functions are really important in, I mean, they have very, not only important, but they have very unique features in JavaScript, okay? So that was a note in here, okay? These are callback functions. You will see that asynchronous is actually, you know, piggyback on how callback functions are used. And you were seeing this before, you used it, you know how you do like the event listener, right? You have like, for example, something that event listener and you have in here, you have a click event and then you have a callback function here. So this is a callback function, right? Use a lot of callback functions here. And because of this callback function, this is actually asynchronous. What, why is it asynchronous? Well, because this code never runs. It never runs, it waits, it employs your page loads and run the background. It will only trigger and run this function only when you click that button or that element, right? And then it will invoke this function here asynchronously, right? So that's what happens. We have a callback function, a callback function. So here's some features about functions. Functions in JavaScript are, one is that functions are, are what's called a first class citizen, okay? They call it first class citizen. You hear the term citizen, sometimes first class functions or first class objects. Okay. What that means is that functions in JavaScript, not true in all languages, by the way, and be like JavaScript and in Python, yeah, maybe PHP too, I'm not sure. What that means is that, I'll just put some notes in here so we can see. Is that one? Okay. It can be used as a variable, okay? That is one of the rules, one of the features about what does it mean first class citizens or functions? That function could be used as variables. And we use this before, like for example here, like we have like constant talk is equal to function, right? And then, you know, you do that, okay? So you can see this function here is used. It's assigned to a variable called talk. So now this talk is actually a variable, but it's been used like a variable, even though it's not, right? So this little bit, we hope we do that. And this is also a part of the other part because it can be used as a variable. Well, I mean, not just that, but it's also can be assigned, I guess can be assigned a variable. And this is known as the function expression. You probably hear this before, okay? Because it's expression, it was sent out to a variable and then you can use that. A third feature about that is that a function, you can pass, can be passed as an argument. To another function, right? So some functions, I mean, some languages won't let you do that. Like Java, for example, it's very hard to do that. I'm not sure if it lets you do that. What that means is that this function, if I have a function here called, you know, getUser, or actually getUser or something, okay? And I can pass another function here. So let's say, we'll put here, I just got another function. Yeah, talk, right? Talk is a function. I can put talk into it, okay? So this is a function. It's an expression function, but it is a function. And here I could put like maybe which is where console log, hello, okay? That very simple function. That's where simple thing, just one simple message does that. And I pass this function as a argument to another function called getUser, right? You can do that. And then inside here then, you can invoke that function inside here. So you can do like talk like that, okay? So this function has been used as an argument. You pass to another function and then it's invoked inside this function. The name here, I use talk. It doesn't have to be, I mean, not the way it is here. So let me just put here, let's call it the fn, okay? So we use fn. So when I invoke it, when I call the function getUser, I can pass the function talk to it. Yeah, I mean, I probably explained incorrectly. It can be passed as the argument. We first do this part here, okay? It's part C. So I can pass the function talk and do the getUser as an argument. Notice I did not invoke the function. If I do that, that's different. If you invoke it or if you call it, then it's no longer a function. It's the result of this function. If it returns something, whatever the data return will be passed to this function, then this will be passed to the getUser as, and this fn here, okay? So if you wanna use as a function, then you don't invoke that function. You just pass it as a variable. And then it will be assigned to the fn. It's as a reference pointing to the same talk function and you invoke inside this getUser function, okay? And then so if I do this way, and if I go to my terminal down here, and let me go into the unit six, okay? So if I invoke this line, this function call callback, you could do that by typing node, callback, okay? You can invoke functions, JavaScript call here, using node. So you will call that and you will see that the message hello is printed down here, okay? And that's because, right? Because you pass a function to another function and I call the function talk inside here, right? As opposed to outside here. If I just put talk, I'm gonna get the same hello message, right? So I let another function does the invocation of that function. And this is called a callback function, okay? You pass a function to another function. And so this function is a callback because it calls this one here and it calls back. I'm not sure how we explain that, but this is a scenario where callback function is, okay? So I just did this way. This looks very similar to, like this part here, looks very similar to an event listener, right? Except event listener has two parameters, like they click here and then you have a function call talk. Okay, same idea. If I have two parameters, let's say if I have like a var or a variable like val, then it looks exactly like that. If I put here, you know, click, or if I put like, maybe like a world like that, okay? And it looks like that, right? So the callback function, actually you usually do something like this. People, the error function right in here, okay? You do that, you know, most of the time you remember that one. So by the same token, this is how it's done. I can pass in a variable here and do the second parameter. I pass a callback function into this variable here. And let's say that this function talk, if I were to, you know, a path takes a parameter. Let's say if I take parameter called, I don't know, call it data, right? Now I can put here as a console log, let's say hello and then data like that. So now I pass the word to this variable. I invoke this function, which is really talk. Inside here, I pass a value to that function like that. Okay, and I'll turn this off here. And you see that now if I call it down here, it prints the word for the message hello, data, right? Whatever data it is, data is the word. Okay, so I can pass data to a function as a string and also another function, let's call it callback function because you call it later down here. And then inside this function, I can pass the data to that function, how we design it, because initially, I mean, I changed that to accept a variable here. So I can pass the data to that function. It does its job down inside here and you see that the result here, right? So that's how callback function works. So if you call this function here, inside here, inside the body of the event, it will check the type of event. That's what you're able to use, like click event, you know, mouse enter, mouse leave, you know, change or things like that, right? It just is variable here. I can pass it, I can say, if the value is equal to world then do something, if it's hello, let's do something else inside there, right? So this way, the way I had it here, you already know that because I'm using the function outside as a variable and I put it here, right? If I don't intend to use this talk function ever again, then usually you could put this whole thing, right? Inside here. You turn this into error function if you want to, like that, right? So it's the error function. It looks just like this one here, except this one didn't take any parameters, but we add one parameter here and so it behaves exactly the same way. Or you can put a whole function here inside of like two, like this, that's completely valid. Okay, and you see that, you know, if I do it this way, maybe it makes more sense this way. So it's a function, pass a function to the other function and this function goes into the FM and then it passed a function value to its data and it passed that equation. And so that's the callback function. It happens a lot in JavaScript and you will see that, you know, as you get better, you can also, you know, use this quite extensively. Not only that, function can also, sometimes also called a high order. I should say our first classisms and also sometimes the word high order. How order means that they can operate on other functions. So I just show you that it can take, it can take a function as a parameter or you can pass as an argument, right? Not only that, a function can also return another function. Okay, so this function, getUser, it does not return any data, right? It just invoked another function here and then it does the thing here. I can also have this function return another function, right? Internally. So I could put here, you know, maybe, so inside this function let's do this. If I do a function called, I don't know, let's just say magic number, right? Or something like that. And this function here, let's see, this function here does something. So it would do like console log as the magic number. I'll put like the math random, you put some numbers in here, okay? So it will console log that to the user. And then I'll return that function called magic number. Okay, again, notice I did not invoke it. If you invoke it, you're gonna see this, okay? So what does it mean? So it means if I go into the getUser here and let's say that I call that function and it returned, it does this function call inside. So you're gonna see that we're hello, we're here. And then only that is going to return another function called magic number is defined inside this function back. So I can put over here, I put here a constant. Let me just put it, let's put here magic fn is equal to that. Okay, so I can use again, use that function as a sign to another variable. I invoke it here, I invoke this function, you want to go inside invoke this function value here, we turn this magic number to magic fn. And so now once I have the magic fn, I can invoke the magic fn because it's a function, right? So it comes back out as a function. It is a function, but it never invoked you until I invoke it down here. So you can see a magic, the hello world and then followed by a random number. Okay, so you can see how confusing this can get but how so powerful and useful this can also get. You can do a lot of things, it can return a function back, you can invoke that function in the future time. Okay, so this would here is just waiting, I can invoke it later, right? So what is the advantage of these callback functions? There are a lot of advantages because like the fn function here, right? So I pass this function as an argument to this getUser, if I go back and just call the talk like that, okay? You will see the advantage of this. So this one here talks because whatever, however you implement this talk function, right? You pass to that. What if I have another function that I wanna pass to that function? Let's just say I have another one, we'll call it, just duplicate this, we'll call it walk, right? Let's just say walking, something like that. And this also takes that data, right? And then here, so on this time, instead of saying talk the world, I can call or just call the getUser this time, okay? Without using the magic, I can use the walk function, but I put here like the mall, like a message like that, right? So you're gonna see that I have two separate function calls and they're using the same function called getUser, but I pass different data to it and I've passed different function to that getUser function, right? Without changing anything inside the getUser function, I get different result because what have I passed to, right? Because it will invoke inside that parent function. So I get different result out of that, okay? So that is the advantage of using callback function this way. So pretty cool. You can write a function. You can pass any function you want. This function can do a lot of things, not just a very simple hello data here where I can do so that this function can actually build a website inside here, right? Return a webpage or do some data fetch to another server and returns the data back and so forth, okay? So that's the function. And another feature you can look into is, yeah, maybe we'll do a different time, maybe that's a little bit confusing. All right, so that's that. That's the callback functions. Now I'm going to switch over. So because the callback function works this way, so you can see that I can call this function in the future of time, right? I didn't invoke it now. It comes back as a function I can use in the future of time. So you kind of delaying that function. So this is like what's it called the motivation to create asynchronous operations. So async, I'm going to create another function here. We'll call it async.js, okay? So our synchronization we call, so JavaScript is a single thread language. That means everything runs sequentially from top to bottom, right? So if I put, if I put like a left A is equal to one, if I do your function call, print, if I pass a parameter here, like V value, your console log value, right? And if I call print A, you're going to see that print to the screen, right? So if I go down here again, do a no async, you see the prints number one here, okay, because it works this way. If you remember the functions are, if you could function this way, they are special because they always get hoisted to the top even though I call it later or I define that later down here, it still works as fine, okay? Function behaves that way. You can see, still works fine. However, if you put it to error function, then it's different, okay? So if I put it to error function like const print and then error function like this, now it's different because it's a variable, but it's a function. And if you call that, it's gonna fail. You can see that has an error, it says print is not initialized because I'm trying to call line three and print was never there yet, right? So in order for this to work, you have to call it later like down here after it's been created, okay? So if I do it now, you see that it was fine, right? Or if you call it before it, okay, you have to call it inside another function for this to work because again, it fails, okay? So usually you call inside another function then it's okay or otherwise you use a function called set timeout This is a function that used to handle asynchronous. So this function takes two arguments. The first is required, the second is optional. The first is a callback function. And so again, error function, you see this quite a lot. And the second is a timer. How many seconds or how many milliseconds do you wanna wait to call this? So you can put zero, we can leave it out, it's fine. If you leave it out, it'll be just one, zero, 40 to zero, if you put one every one millisecond, I think it measures a millisecond maybe. Okay, so this set timeout function is a special function. As you can see, it calls a callback function. What this one does is that it will invoke this function at a later time. So even though I call up here, it doesn't matter here or the very top doesn't matter, right? So both of these variables are created later in the future but when you see this timeout function, it will wait until all of the rest of the code run only once and then it will go back and then run the internal function here. So in this case, if I run it down here, you see that it works just like before, okay? And that is the asynchronous operation. It runs asynchronously. Otherwise, it will run sequentially, it will not work because these are created later in the future, okay? So the set timeout, the set interval and there's another one called set immediate functions. These are very special functions that allow you to do asynchronous operations calls. It will wait one tick. It's like a millisecond but actually it's faster than milliseconds, they call it a tick. So one cycle through, it'll wait one cycle until all these have been created. Once they are created, now they exist in memory. So that's why the next cycle through, you call the internal function and then I'm able to call and print and also pass it at A because now at the time, these have already been created in memory. Okay, so that is the logic behind asynchronous operations. It waits until the next cycle through. And that's what happens when we in a previous exercise, remember instead of my site, when I call the index here, I call the read file, okay? The read file here is at asynchronous call. You can see that if you're most over this, it tells you it's asynchronously reached the entire content of the file. That means as it's reading the data, it can process some other stuff, right? After that, and then until that's done, once you get the whole data back, then it will go back and then, you know, process the data inside here. The other function is if you read it, if you put like a FS dot, you see the two of them. One is called read file. This is the asynchronous. This one is the synchronous one. Okay, so usually you don't wanna call this function. This one here will force everything after this function to halt until you read the data first and then you continue on your code. So usually you don't wanna start that unless you wanna do that purposely, but very rarely you would use that function. Okay, so this is a callback function inside here. It's a callback function from here to here, right? It does that after it reached the file inside a home HTML. If it reads it, it's able to get all the data and the data will be passed to the second parameter. We call data here and then we output inside here. If it's not able to find it, then it will generate an error message and it will pass that to the error and then we'll catch the error inside here. We'll print this out. So these not gonna run, right? So that's what the DA sync is for. And so in Node.js and JavaScript, you can use that to read files on the backend. Okay, all right, so, and then let's see, I wanna cover one more thing. Recover JS file. Okay, so let's look at a function called, I think a promise, all right? So promise, let me go over here and just load you this link here. It's probably easier if you look at this file. So over here on the Mozilla site. So a promise is an object. Okay, the events object that represents a object that was called a proxy. A proxy means like it's not the real data yet, right? For your value, because the value could be the actual data or it could be an error message, okay? So that's what you, again, so again, read the information here. A promise is usually when you call it promise, the operation returns coming back will have either one of these three states, okay? Conditions, depending state, this is when you actually make a promise. So you issue your promise to, let's say, read a file or process or fetch some data from a database server somewhere on the internet, right? So when you initialize or initiate that, initial promise is in the depending state. So if you check the status, you'll just say pending. It's waiting until the data comes back, okay? And then when it comes back, it's guaranteed to either be a fulfilled, means successfully gather data back with no problem or there's an error and it gets rejected, okay? So three things will happen when you initial a promise and it's guaranteed to give you one of those three. So it will never be nothing else but one of those three. And you always want to get the fulfilled, right? That's the goal. So if you look at this here, so you create a promise, it's an object down here, you can see it, it goes out and then, you know, whatever that thing you want to do and it can either fulfill coming back that if it's come up successfully, then we call that promise has been settled. Okay, it's settled, then you got the data back and then you can then, you know, do whatever with that data. You can also pass it to another promise, you keep going down the chain that way, right? Or you end here and then just pass it to another function or you can just process the data or output to the screen. If it comes back as a rejection, then you get a rejected, that's an error, that you, you know, display the error or you catch the error, do something about the error, you can end here or you can pass another data to another promise and keep doing it again, right? So this is the idea behind the promise and how we, how you create it is like down here. This one's a little bit confusing, but let's go down here further, okay? Okay, so this is probably better. So when you create a promise, so the promise is built into JavaScript already so you don't have to do any additional loading or things like that, you just use it and you can use the promise like this way here, you can create a separate variable. Remember, this is a new promise, so it's a constructor, right? Object constructor, you create a promise object. So this promise class or constructor takes a function. So from here to here, okay, and you know, let's, let's do this. Let's copy this or just copy that one and I'll go down here and do a, not a sync here, not a sync here, but let's create a new one I'll call it promises, which is that JS. So this is the example from the book, okay? So this function promise, this constructor takes a function, a callback function, if you remember, this whole thing here, it's a callback function. So if I were to rewrite this, you can see clearly it's like that, change it to a regular function, right? It's a callback function from there to here. And if you wanna take it out, you can, you can take it out completely like this and let's put it out here for the function and give it a name and call it, you know, do promise or something. So you pass to this function, promise, like that, right? So you remember how I did before the, my example, okay? So if you remember the callbacks, right? Same thing I do here, I pass in the talk function to it. So you do the same thing, you pass in the do promise you create to that promise constructor and this promise takes two objects. Okay, these, as you can see down here, is a resolve and you pass in a parameter. Similar to how I did here, my callback, right? I do a function, I pass in a parameter, right? So you pass in a callback function and it evokes inside here. Same idea, it invokes the resolve function down here. You call resolve and rejection because that's the way it is. You can call it whatever you want. I can call it an A and then B as a matter, right? All it is is that the first one is the successful one. The second is the failure one, okay? So let's go back to where it was before. So we did the all, that's all it is. And then when it comes back, okay? Because we call the resolve function. So this will return the data here will be returned. There were foo here will return. Let's put here good return, okay? After 300 milliseconds or so, returns back and then once it comes back to a promise object. So this is a promise object. Now, once I create an object, so if I will print console log is out, you'll see that if a console log that, this is node promises. You can see that it's a promise. You can see it's pending, right? It's waiting because at this state it's waiting until you do something further. Okay, so it's a promise. After that, once it's come back, then you can check the data coming back is either good or bad. Okay, so in this case, we're forcing it to be good. I'm forcing that to be good. I did not do a rejection here. I can, I'll show you in a minute. So then this way, wait for 300 milliseconds and then return the word good to the resolve. The resolve is good. So it comes back. Then my promise, I can use what's called a then function okay? So if you remember, if you back in here, you see it goes and call it then function. So you can call many then functions. Instead of then function, you call more functions again. This is again, another function, another function as well. You have the fulfillment rejection. Fulfillment rejection, okay? You keep adding that down the chain and I'll tell you what this then means. So what it does say, cause of promise, it resolves and it sends the data back to the next function called then. Then this then function takes another function, another callback function that looks like this. Error function again. So the data coming back, whatever this resolve returns, you put that inside a variable called data, right? Or anything you want, just another variable. Doesn't matter, okay? So the variable data here will contain the word good and inside here, maybe I can just cancel all that data. Okay? So that is a callback function again. It passed into a then function. So the same idea, right? A lot of callbacks. So now if I run it, you see that they initially, when I create a promise, it's in a pending state and then I wait until after that the data comes back, then I can go ahead and then, you know, run this internal function, cause the data is automatically passed to this variable here. You have to include a variable. And then because it's a data, it's a good data, it will then log that to the console, you see the word good down here. And then we're done, okay? If you want to do more, let's say I got the data here, I do something here, let's say I do like a data is, I'm gonna add that to like, say the word good morning. Okay? I got the new data. And then I want to return that data back to another function down here. So I can do like a return data like that. Okay, so this function then here, cause a callback function. It does something inside here. It returns some data back. In this case, it returns the actual data word good plus morning is a string, right? So it returns this one here. It's a new string back to this then function. And then it passes to the next then function. So you get, again, you then, you chain to another then function here. And the same thing happens again. So this function is a separate function. I can put another data here again. It behaves exactly the same as above. Now I can cancel along this data again. So the second time I print this out is gonna say good morning, because I have a new data. Okay, so again, this function then, right? Invoke some data, it returns something. Similar to how I have here. This function get user, it does something, returns some data, right? To magic fun. This one here returns back to this then function, the next then function, and you use it here. So now, if I run it, you're gonna see that we're good for the first then function. And then I pass it on down the chain to the next then function. It does, again, cancel along that. You can keep going, okay? So this is what's called a chaining, like you met the chaining. So I chain that to the promise object here, first then, and usually it's hard to see this way, so you see how they do it, they'll do it like this. Okay, I chain that there, so that they are chained like so. So these are called met the chaining, or sometime it's called thenable, right? Thenable, that's what it means. So you can see how this works here. Now, this only works because the then function here works because the data is good, because we got a good data, okay? If I change it around, and if I don't call it good, I call the other one, let's say reject. We'll call it bad, all right? It calls the other function, reject. Now, when I run it, you're gonna see that it has some errors now, right? It knows that because I'm calling the rejection, it's calling the second function over here, and the promise of return back say, hey, it failed because whatever it is, it's bad. So it calls that function, so therefore when it comes, when the promise is we receive the data coming back, if it's a bad data, then it will not call all your then functions. So what you do in this case is you wanna catch the error, and you do that by down here, you call it at the end here or something, a catch error. So again, the error takes another callback function, you put here the error message, and then something like that, and then now console log the error. Okay, whatever error is, it's gonna be passed here. So in our case, the error is just a bad data, I'll put a bad data here, okay? All right, so you have to catch it down here. Then if I run it again, you see that if return it runs this catch function, then the data, the bad data here returns as a string to the error variable here, and we console log that out here, so you see it's the bad data, okay? So that's how promise works, okay? You create your new promise, okay? It'll either reject or resolve. If the resolve comes back, if it's good, then it will call the first then function inside here, and you can stop here if you want to. If you want to do more, you can pass the data back, you can return, you have to return, okay? If you don't return, that means that the data ends there, and then it will just stop there. Otherwise, if there's an error, then all your then functions will skip and it will catch it and it ends right there. So again, it guarantees those three states, right? They're appending or a successful or a failure, okay? So you can see that how I did here. I put promise here because I'm gonna show you, but usually you will see that you, you know, they put it like just inside here as a function like this, okay? So I don't need the external function. I just do it here as an error function because usually this never gets reused again. Use only once here, and then that's it. So in here I could do, for example, let's do this. I can do like a, you know, let's just put like let n is equal to math random, something like that, right? I think it's a decimal number. So you can say if n is, you know, less than 0.5, then we say we go off. We go off, good, else, resolve of bad. So you can do that, right? So now you have either a good or bad result. Reject it or keep the good one. You can do a format, okay? So that's how you can resolve a good or bad, okay? So now if I run it, you see that it, the first run, it gets a good because the number was actually, you know, less than that, we can console logs, you can see. You can see that when I run this and it's 0.6, it's bigger than five. So therefore it's reject that. So we've got the error, right? Returns a bad data. I do it again, 0.2 is good. So I got the resolve, returns a good one, and you get the good data, okay? So this is a synchronous call, right? Because I'm doing using the set time now. And so this is what you would call a, you know, a file from a server. If the data comes back, it's a good data that you resolve the data. Otherwise, the data was not reachable, so you return the bad data back, okay? So yeah, I'll stop for the promises here. That is all I wanna cover for you. Again, I read the PDF, a little bit different from what I showed you here, but that's, it should be very familiar. And then also read the document on the Mozilla site, so you can see how this works. So the promises are how they're used behind asynchronous operations. And then now I would do one more and then we will take a break. Okay, so now I wanna look at a, we call this the call AJAX, okay? AJAX, AJS. Okay, so this is the AJAX for the XHTML. This is the AJAX call. And usually you call the XML HTTP, or I should call it XML, XML HTTP request, right? So we use that to read data in the backend and self-worth, okay? So for example, if you have some data back here, let's create a file. I would call it user.js and that JSON, okay? I'll create a JSON data object here. Just one user have an ID, one, two, three, it has a username. I'll call it my name, okay? So very simple one is a single object. So that's a user data. And the, let's close all these here. The AJAX call, right? So the AJAX is like this, you can click a constant XHR is equal to new XML from XML HTTP request. It's a function constructor, okay? So it's instantiate an object of that type. And then the next thing you wanna do is you send the data out, right? So you can say XHR, actually open a connection. And it takes a string, which is the URL. So the method here is like the get, put, delete and things like that. So the default is gonna be the get request. If you put that here, we can leave it out. If you leave it out, it'll be defaulted to a get request. And then the second here is the URL. So URL is the file name. So I put here, let's put a variable here. Let file is equal to the file name. It's called users.json, okay? So that's the founding, right? So we put here the file, you open that. And the third parameter is called the asynchronous, either true or false. So usually you wanna leave it as a default, which is true, so you cause it asynchronously. If you put false explicitly, then it will call this file. It will run this file, it will wait until it's finished. So usually you don't wanna use false. So you can call this file, usually you don't wanna use false. You use true, you put it here, you can leave it out. It's by default, it's true in a way, okay? So you open the connection and then you can then send it. You send the connection over, the request over because we're not passing data. We're doing a get request, it's a retrieval. So we're not sending anything over. And then once you get that, then you need to check the state, right? We want to check to make sure that the data is actually return, right? Coming back or returning, you need to check that. And so you do a function con.onReadyStateChange. This function can, there are a few functions you can use. One is this function, another is like you can add even listener and then, you know, so let's do this one first. It's a function, correct function, okay? And you can wait and check to see the state of the XHR. So the XHR has a state call done for the status of, I mean, done instead of four, which is good. So you can check to see here, if the XHR done is true, you can check that. And the XHR, ready state, in this case, it's a number of four. I mean, it's all good. If that's the case, then you got the data back, right? So it's waiting for that state to be true. Kind of like the promise, right? If the promise is true, then return the data. You confess the data, you do something with the data. So over here then, that means is that I got the data, so I can set data is assigned to the XHR as an object or response text, response text type. Come back as a string of text. Okay, it's always the text. And then you have to convert it to JSON and use it. Okay, so once you got the data, then let's say I'm gonna console log that to, oops, data. Okay, so that is how the XML HTTP quest object works. Okay, so let's see if this works. I'm gonna call it the node Ajax. Let's see here. Okay, so this one doesn't like it. It's probably, I wonder if it's under only on the web. Yeah, it's a web. Yep, it's only on the web, so it doesn't work on Node.js. So let me have to attach it to the web. So let's create a new HTML here really quick. And I'll link it to that script. It's the Ajax, right? Okay, and I'll just run this one here in the browser. So we can see, hopefully, okay, so it's over here. So we wanna run it in the browser over here. Okay, so you can see that it loads the data already. Okay, so I wanna refresh it. Okay, so that's it returns the data. So it wanted to fetch the data that's using that JSON. And then it opens that file, if you can find it and then you wait for the state to be done. And if that's the case, then go ahead and extract the data from the XHR object, response text object. This one here stores the data. You assign the tone on the variable and then you console log or use that in that case. Okay, so that's for that, right? If you do like an error, let's say if I put, you know, users like that, right? That's an error. You can see that it has an error already. It's because that's not found. Okay. And so that's the way to do this for using the AJAX method. Now, the other method I will show you here is the fetch. So I'm just gonna comment this out. Yeah, let's put this inside a function, your function AJAX. So we're not gonna call this one, okay? So I'll leave it here so we can compare. Well, now it should not call the function. If I go back and refresh it, it should not work. Okay, there's nothing happening there, okay? So now let's show the other one. The other type is called the fetch. Okay, so a fetch like that. The first one takes the URL. So here again will be the file name, whatever that was. If it's successful, then we attach the then function. If it's good, right? If it has an error, then you call the error here. Okay, so it looks kind of similar to the callback, right? So it does a then and then. Actually, usually it takes two thens here. So it looks like the promise I showed you earlier. It has like a, that's the promise. Then we see some data, then you do another something and then you catch an error, same idea. So here I fetch the file. If it's successful, then I call the data function. Here again, takes a function. The word they put here, I call the response. Usually the response object comes back as a promise. Use the error function here. And sometimes you would use the error function like this and then you're going to return the data from the response JSON. You call that JSON function and what it would do is that it will convert your data to JSON data. It is already, but it's gonna convert anyway. And then we turn this data back to the next then function down here. So now this is what had the data. Again, another error function and then inside here, you would then print it out. So you can then, now you get the actual data and print it here and then you're done. Okay, it's an error and you catch it here. Again, error and the console log error here. Okay, so this is the fetch. Now, if I go to the browser, you should see that has similar result, right? Already running, maybe fresh it. You see that returns the data, the user object like I had before. It's a JSON this time as opposed to a string because we converted to JSON data, okay? And if you haven't to like use the users here still like this, then you get an error. You see that error is that it's not found. Okay, this message here is this message down here. I can print message here. So if you're gonna put something else and say error, no, something like that, you're gonna see that the error message is printed as opposed to the default message. But if you want, usually, you know, you would print the actual error message which you saw earlier here. So you can say error and then put here, here, dot, let's see, is that message? Yeah. Let's see, I don't have this again message from that. Probably not. Sometimes there's a gear message here. You can get the metric message, notice I have it. So just the error. So it has an error and then what the error is, it says, you know, not a valid JSON, but really it's not found. Okay. And then now we have no errors, we got that data. So that's the fetch as opposed to the other one, right? If you compare this two, let me clean it up. So the Ajax using the XMHTP object, which is this guy here, actually this one should have been down here. Okay. And using this approach or using the fetch approach. Okay. The only thing is that this is an older technology. So it was still being used today, but people are actually switching over to the fetch. It's a newer approach and actually it's nicer and cleaner to write, right? And so forth. I put a lot of, you know, Perenn here is confusing because I just want to make sure you understand, but really if you have a single parameter here in the function, then usually you can remove that and just put the variable here, the single parameter. And it has only one statement to return this. So this is usually rewritten to do just something like this. I can remove the error, the color braces, and it just do something like that. So you can see it's short. Okay. So same thing. You can remove the space, the parentheses here. You don't need the parentheses. So your code is there but cleaner. Okay. Something down here. And if I'm doing just one statement, then you can remove that. You can see how this gets now. Same idea here. And of course you can always pass to another function to do the processing. So you can see now it's short, right? Very short and sweet. And it should still work just like before. As you can see, no problem. Okay. Okay. So those are the different approaches to all these synchronous operations. There are many more, but I think I'll stop here for this part and we'll take a break. Item and Abrey will come back and then I'll show you how to use the handlebars. And then we'll be done for tonight. So I'll see you back in 10 minutes, okay? I was actually thinking about doing the handlebars stuff, but I think I'm gonna wait until later assignments because I think probably move a little bit too fast on that one. So instead of doing the handlebars, we're gonna do the APIs, which I hope will help you to complete the assignment as well for this week. And that's just by running and creating our APIs. Okay. So I hope the examples of these different Ajax calls will help you become useful. You will actually use these in the following week. But for now, I'm gonna go and create the APIs for the backend, right? So in the unit six, I'm gonna create a new folder here and we'll just do some really simple, I'll call it the backend. Okay. So just like before, how we did last time, I'm going to initialize the backend. This would be the server side and let me close all of these here. So I wanna do it in PM init. And just accept the default setting. That's fine, you don't have to, if you want to change something else, that's okay. I'll just keep as default. So now I have that back and initialize for my application and I need to install the express. Okay, and do two things. Install express and also another package called course for course origin resources. We want to allow it so that later on you do the next unit, you want to access it from the other server, it will let you access those data. So install those two and then we'll start. Should take fairly short time to do that. Great, right? So that's done. So we're good to go. And now let's go and then create our index file. Packet JSON says index is the root. So I'm gonna do that inside here. Create the index. Yes. Okay, if you wanna call something else, then you have to rename here the package file, but we'll queue the index. So just like before, you wanna do a constant express, load the express library. Oops, require. And then you also want to initialize it right away. That's the app. That function. You also want to get the course, just require a course library. And then you wanna use that course. So you can do like app.use, actually we'll do that later. Okay, let's do the port first. So I have a port number. I use the 8080. And then we're going to create a server. And this server will be just a link, right? So I use the HTTP. And then we have local holes. And then port number, okay. And then we can go ahead and listen to the port. So app.listen. And then we pass in the port number. And then we do the error function again, and console.log.app to the console. So you can access the server. Okay. And we did this last time. And then now that's done. So we want to go ahead and use the course. So app.use, and then we call the course function. This one here will, allow cross origin resource who you are sharing. Okay, that's what the course is. So that means it allows other sites to access this site. So basically we actually white listing all the other APIs, I mean, IP addresses. Okay, so then we go ahead and when we pass data over and coming back later, you can use it, but you can skip that for now. Another useful thing to encode data is you can set this one here, app.use.express.urlencoder. You pass in here the extended as object. You pass the extended and then set that to false. Or true. I mean, you can figure it out, try it out. It just means that, you know, when data come in, you want to encode it, like all the HTML content, the backslashes and things like that. And also you want to use the JSON format. Press that JSON, call that function, and then all the data will be in JSON syntax. Okay, so these are the default settings for your application really, the basic ones. Okay, and I'll just make sure that's work. We can go ahead and do a very simple that get first. All directory, again, error functions. Just when it takes two parameters, the response and request, request first and then respond second. And we'll do a resquest, respond.send, I'll just put like end here. H1, hello. Okay, so that's a typical setup, set up, and then run our file. Let's do a mp-signode index. If it's successful, you should see this URL. This is the one that will be printed right here. Right, this is the link. And then if you open that, just click control, click on it. It's gonna load this page here. So you can see it's working and then we're now good to go. Okay, so this is our API. So an API, usually you send data over, not in HTML format. You usually send data in JSON data, right? So JSON data is the preferred way to send data over. And so instead of doing that way, you're going to do something like this. Instead of send that one, you're going to send the JSON, you call the JSON function and you pass some data over. Here is in JSON data object. So here you put like something like, I mean, I guess the root page is okay. The home page is fine, we just use that's fine, okay? And then now these are your APIs. So API is like used for retrieval data because delete and update and things like that, okay? So these are all the get APIs, okay? We do a get here, that's a root, but usually you wanna go to a different URL. Let's say, you know, something like, you know, slash API, right, like that. Okay, you wanna get the slash API. So here I'm gonna do something similar to this one here. App.get slash API. When I get to that URL, then I'm gonna do a following. What am I returning to the user? Okay, so you return a JSON data or some sort, okay? So for this exercise, we're gonna return some data. So first I'm gonna create an object over here, the backend. So I'll create a models folder or call it models. Instead of models folder, let's create a JSON data. We'll call it just, I don't know, pets.json, okay? You know, pets.json file, we're gonna create an array of pets. So the first pet is the ID. They will put here one. And then the name of the pet is Milo. Milo, and then the breed or the type of the pet, right? Call it a dog, a cat. That's one pet. I'll duplicate this, another one here, and we do three of them. One, two, and three. This is the oldest. This is a dog. Okay, and this is a, I should call the next one. Let's put it here as a fish. And we'll just call it Koi, okay? It's a fish. So it's our three pets. And then we want to export that out. So actually not JSON. Yeah, let's rename it. Let's rename it to, let's do differently. JS, had JS. And I want to export this out. So you put here module. That's for constant pets equals that. Okay, and then we do it with the exports. So exports.pets is equal to pets. Okay, we export it out. Remember the module stuff. And then we, and then import into our application up here. So import the pets. So we'll do here constant pets. Coming from, what do we use for? Yeah, it's in the models folder. So put here require that slash models, oops, slash pets. Okay, that is the pets object. They export the pets. I just want to get the pets out of that. Assign to a pets variable. And then I'm going to return the API get all the pets. So basically I'm going to just send that out, okay? All the pets out to that user. So go back to the terminal here, control. And then to it again. So again, if you have no mon, if you run no mon here, which I don't think I don't know if I have it or not. Yeah, I do have it, okay? So if you don't have no mon, just install no mon, you know, NPM install no mon, and then you can use that in the terminal. So I don't have to cancel run every time, okay? So this will stay active. If it make any changes, I don't have to rerun that program again. So now if I check on the application, if I refresh now, you see that now the data of the pet comes through, okay? And that's what we want when we do these APIs. You want to be able to send this type of data to the user. So if they come in here and they access these API, then that means it's a get API, get all the pets and then send that data out. If you want to get a certain pet, you can go by the pet ID. Like if you want to get the first pet, you put an ID of one here like that. So if we turn only the first pet, okay? So this is another API you can create. So over here, same thing. This one here will be something like this. This time we're going to match it with an ID. An ID uses angle bracket like this, okay? Angle bracket here signifies that it's become, it's going to come here as a variable in the ID. And then you can, actually not the bracket. No, that's PHP. Code ID. Okay, the code ID here, it's a variable that you can create. You can fetch from the parameters through the request object. And then you can search that, right? So here I'm going to get the ID from that. So you can say let ID is equal to the request object. Okay, it has the parameters. As you can see, programs dot ID. So this ID here is this ID here. Okay, if you want to call it something else, if you just call it R, then this would be R, okay? So whatever this is called, you have to catch it and match it right here. So I call it ID is the pet ID. So if I look at the pet object, I use one of these IDs, okay? So I got that ID, then how do you search in that array? That array of data, okay? You want to find the ID and you can use that in JavaScript has a function called find index. Okay, you're gonna find the index of this pet. So in this case, we put over here, okay? So my pet object has ID for the first index, ID for the second index and third and so forth here, right? So I put one to three, but it could have been like one, one, one and then two, two, two, let's put something meaningful, one, zero, one and this is like two, zero, two and then three, zero, three, right? Whatever you need here, okay? So if I match this ID, it will return this object of the first index. So the pet of zero, pet of one and things like that, right? So if you do that, you find the index there first. So I can find the index from the pets that find index is a function that does that, as you can see, it takes just the element, okay? This find index where we will extract each of these element out and here as a variable, I call it data and again, callable functions, a lot of callable functions here, okay? Then what this will do, this will return the index position when I have a match. So again, I'm just doing a very simple comparison. So I don't have to do this curly braces, just do that, return the index when the data ID matches the ID here, okay? Maybe I should call it pet ID here, pet ID. Okay. So this pet ID is compared against the ID from the data. Each data is actually each of these record. So complete the first one, it's ID right here, one on one, doesn't match this pet ID or not, okay? The only thing you wanna watch out for is that in the pet object, these IDs are numbers. So if you wanna, if there are integers, then you have to make sure that this pet ID you retrieve has to be an integer. That means you have to convert it to an integer. If you don't do that, it may not work. Sometimes I think JavaScript is pretty smart enough to match it, if it doesn't, then you have to convert it. So let's say that we're not gonna convert it, we'll try it. If it matches that, then it comes back and we look at the index. So if it's not found, then the index will be a negative one, okay? If it's found, then you get the actual index position, okay? So you can check to see if the index is not a negative one. That means it's found, if that's the case, then you want to return the pet of that single pet of I, of the pet ID of the index. Okay, so you return the pet object of the index, okay? And then you return the pet over here. If it's not found, then you have to set the pet, right? So therefore you can set the pet up here first. Let's see, yeah, that's fine. So the pet, let's do it this way. Let's do a let pet is equal to just the blank pet. Like, oh, what should I do? Okay, let's just say it's empty, okay? Empty pet, already you can put empty object as it doesn't matter, I guess. We'll see, if it's not empty, then we're gonna replace it with the actual pet object, which is, you know, one of these. And then we'll return that or turn that, okay? So let's see what happens, I'm gonna say that, go to my app over here. And if I do a 101, you see that returns just a single pet because you found that 101 ID, it returns that here. If I do a 102, I'm gonna get an empty pet, right? It's not found, so therefore it returns an empty pet object. Let's do a 303, and I get quiz data, okay? So this is the API to get a particular ID. If you wanna go by name, you can search by name if you want to, then you can create another API, an API slash, you know, the name, which is a text. And then you search in the name, and then all the pets that has the matching, matching that name can be returned. So you can return multiple index, multiple records, so that's a search you can do, right? Okay, so that is to get all the pets, we'll get a single pet, okay? And then you can also do the other ones. This will be like the Pulse API. The Pulse here is for attic, right? Add new pet. Now we're not gonna do this until you do the front end, which we'll do next time, but the setup will be very similar. The only difference is that in a POST, you need to get the actual data coming in. So up here, we'll do it at that POST, going to the same API. Because we're adding data, we're not gonna take any, you know, IDs. So if it's not, in this case, you don't care about ID, we're gonna add the data to the current pet object. Okay, so again, the same function, request, response. Okay, so the data coming in through the request object again, the request has a property called the body that can retrieve all the data coming from like a form. Okay, so you wanna get the data, so you can do something like constant or let new pet is equal to request that body. And that will get the data for the pet. And you just wanna make sure that the data coming in, you know, I guess has the same or similar structure as this, the ID, the name, and then the type of the pet. Okay, and once you get that, then you can go ahead and then add it to the pets. So all you have to do is you just push it, right? So pets that push, pushing the new pet. And then after that, then you want to return back to the user a message, like for example, maybe a successful something like a simple message just like new pet added, something like that. So they can see the result. If there's an error, then you can construct your code to test that. If it's not a valid pet object, or if you're even able to add data to your new pet, then throw a message and something like that. So the post is usually just like that. This is the payload. You add it to your new list and then you return a response to the user. And this will be coming from like a form when you do a post, right? Your post, or you do the Ajax call and send the data over back to the user. That's when you do a submit form. It's either a get method or a post method for the form. Okay, and the server will detect that type of request. And then the next one are your put APIs. This is for like updating existing pet or pets. And we just do one here. So the API will be similar. API goes to the API slash because you're editing a existing pet. You want to include the ID and be called the ID. So you know which pet to update. And then again, the function request response. So you have to search inside your pet just like you did up here. And then you get the pet out of that and then you can go ahead and update its pet or replace it, okay? So I'll do the same thing. I'm gonna get the ID or copy this right here. I need to search that index. Basically the whole thing here. For the pet ID. Once I found the pet ID index, then all I have to do is I'm not gonna do this one here. I'm gonna do something like this. Head index of that one. This can be assigned to the pet, which is in this case, we can do separately. I can do here constant. I can do this. Not no pet, but the pet, right? And replace that pet with the updated pet, I guess. Okay, but it is the new data, right? So I'm just, I might be just changing the pet name, the pet ID or just the pet type or all of them. I don't really care. I'm gonna replace the existing pet here with the new type of pet. So if I find that it's looking at the pet ID two or two, I've returned the index here and then pet of that index will be replaced with the new pet coming in and then you have your new pet. And then once that's done, then again, you return a message, pet updated or something like that. If it's successful, okay? I didn't do the, you want to make sure you're able to do that. If it's not found, then you can say pet's not found and you can update. So kind of similar to what we had up here. I did not do here the actual error, but you can also say, you know, pet like status here. So you look this constant status, just say pet not found the default message. So you can put this out here with status here. And if you successfully update the pet, you change your status, say pet updated, right? So you get the message either, you know, no pet or you update the pet if you turn here. So that's for the updating a single pet. If you want to update more than one pet, you have to pass in the object of those many paths. You have to do a little bit more, but that's how you do it. So usually you have one API for the post, one for the update, and then you have to delete once, right? So these guys are just delete, just delete, right? You'll be moving either a single pet from the ID, or you can wipe out the entire pet. So this will be the app that delete onto the same API. I'm doing a delete, delete only one pet first. Again, it passed the ID, the request response, exactly same as above. I need to get the parameter. Once I know the index, I can, you know, I splice it. If you don't know that, you cannot splice it. So I get the ID, I'm going to search for the index, and then basically this whole thing here. So I also get the constant status. I mean, let's put that one here too. So I don't care about the payload because I'm not getting data, I'm just getting the data at the ID. If it's pets not found, if the ID doesn't match, right? If it's found, then I get the index. Then here, what I'll do is I'm not going to do this. I'll do a pets.splice. I'm going to splice the pet at the index position, okay? And then I'm going to remove only one pet, right? So if you splice it, you remove one pet at the index position. If I found pet number 202, the index of one, and then remove that out of the pet object, and then you say pet deleted. Otherwise, it's not found. It's a single pet. And then we'll do one more here for the last one, which is the update, delete. So this one here takes no ID because we don't work here. And I'm going to remove everything. So we've got the response. And here, you don't really care about the ID. So you remove the entire thing, right? So my pet up here, I created, I'm using a constant, right? So I cannot set pet equal to blank. If I don't do that, if it's not a constant, then you can easily do like pets is equal to blank and then you're done. But because it's an object, I can't do this, right? So if it's object, then you do a splice, just like up here, pets does splice, starting at the index position and you leave it blank. So you leave it blank here and it goes to infinity, right? So that means wipe out everything starting from the index of zero and then just delete the rest of your data. And that gives you an empty list, okay? And then here you would turn all pets deleted. Okay? Again, you can check to see, make sure it's the pets object is through or not. Otherwise you just say, so very simple one for that one. So there you go. This is how you would create all your APIs, okay? And how you call this is using what the Ajax calls. You can use the fetch or the Ajax HTML request or the jQuery Ajax, it doesn't matter how you do it, is that you send data over and we're gonna delete this data and we'll do this next week when we come back and do the front end, okay? So your backend will look similar to what I just did here, except we're not doing pets. You'll be doing something with a books object. Okay, so I'll stop here and we'll call it tonight. And so I think the unit eight, nine or 10, maybe the 10 unit or so, we will do the handlebars when we start to build applications and I'll show you also how to use that to pass data over from the source here out to the view, which is a template, okay? So we have the data binding thing going on again, but this time is for the handlebars template. All right, so I'll stop here and I will see you next week, have a good weekend. And if you have any questions on the assignment, just shoot me an email and let me know, all right? Okay, see ya. Okay, good night. And bloop.