Hello, in this video we are going to take a look at loading simple data using Ajax. Remember, Ajax is the way of creating fresh and dynamic websites. They allow you to get data from your back end code without having to reload the webpage. So the file can be a PHP, it could be an HTML file, the other file they get it from will have to be a PHP file. So we're going to keep this a PHP don't need any PHP tags in here for now. And what I'm going to do is literally create a simple HTML page.

So create a doctype first HTML. Oh, I just almost done. And in here, we're going to create a do what do we need to create? Create a head. Obviously, you can abstract a lot of this out into separate logic JavaScript file because we're gonna do some JavaScript in a second. But you know, that's totally up to you, but your the rough, you know, foundation will be laid down in this video.

So what we're going to do in this body is create a simple form it is going to be immensely simple. And we are going to say, we are going to say nothing to say what did I want to do it all you want to do? Oh, sorry, I'm going to create two numbers. So number one, and this is going to be an input type of text and we're going to do an on key or prevent on key up, I'm just gonna say just number, it's gonna have the one number, so I'm gonna say, square. So it's going to square the number, square number. Again, this is gonna be, you know, really simple example, I just want to show you that we can do it, you know, trigger PHP code without having to reload the page again, because PHP back end that only gets triggered started the page, but we can trigger it again in the back end.

So we are going to say, this dot value, like so, we can end this right there. We are going to create a div. And in here, we're literally just going to print ID two. So this is going to be basically empty on the ID of resolved result. So when we type in here, the results We'll get pumped into here. So now in our head, what we want to do is create a script tag.

Again, like I said, you can just create a separate JavaScript file and just do it that way. And the same code in time will work. So function, same name as this. So where we need a variable in here, so shouldn't be no space. va. We're going to show for number. And in here, what we want to do is create a VAR for our XML HTTP.

Remember, Ajax, Asynchronous JavaScript and XML. Usually the data you'll get back will be in some sort of, you know, XML form. So let's keep going and XML HTTP equals new XML HTTP request. With that, what we're gonna do is XML HTTP, and we're gonna say.on ready state change. So when the actual state changes, you want to trigger this function. And this function is going to take here as a symbol, all we are going to do is say, we really should check the status, make sure it's all good.

So we can do that by saying this dot ready state equals four, and this does data equals 200. Then Yeah, then everything's okay. And then we can continue with what we want to do. And in here, I was gonna say document, we're going to modify the document element by ID, with the element that we're going to get is this one right here. And result. We're going to say dot innerHTML equals this dot response.

Text. So the response that we get back, well, it doesn't matter if some number is always on the response text. And you can pass in a different way, you know, cast it if you want to. Now we basically need to send all of this off, you know, this data. To do that. We just say XML HTTP dot open.

And then we say get, or post, depending on how we want to send the data. I'm just going to do a get request. And I recommend that you look online or how to do a POST request. Base pretty similar. So get. So this will trigger the new file.

So I'm going to say this Callie, Ajax dot php, for example, Ajax dot php. Question mark, num equals and then plus two to two is not.in. JavaScript is plus to append on to a string. Just bear that in mind. And we are going to plus on or are we even going to plus on know that with it, the number passed in, and then we're just gonna put true Finally, we just need to actually send it like so make sure made no errors. Inspect the console girl knows what it's about.

Oh, my butt. Don't need that. There. There we go, no errors. And obviously, at the moment, it does not do anything. But when we are typing stuff, as you can see is St. 404.

Not Found they because the file does not exist if I create that file right now, a jacked up key HP and I reload. I didn't see that error disappeared. Nothing is happening because we have not implemented anything in the agent file. So in this video, I just literally wanted to do the front end side of it. In the next video, I'm going to cover the back end and in a separate video. After that, I'm going to cover how to actually get some data from a database.

That's it. Any questions? Feel free to drop me a message also, what I wanted to mention is though I'm using just pure JavaScript to do the AJAX request, you can use something like jQuery, which has Ajax requests. Built in, and it is a lot more elegant than the pure JavaScript method and a lot easier and a lot faster. That's where I would highly recommend most wanted to go down the pure route show you because the reality is, once you've got the AJAX, you know, the dot php file set up, I know this overall structure, you can adapt it to the jQuery version as well. Any questions you know, feel free to pop me a message and I'll help you out.

So I'll see you in the next video.