Hello, in this JavaScript video, I am going to cover Ajax. So Ajax is essentially like a developer's dream allows you to do stuff like update the website or your web page without even reloading the page. So get content, it, you can request data from the server after the pay to the Ruby node ID. You can receive data from a page after it's been loaded. And you can even send data back to the server in the background without reloading your page. So this is fantastic if you're trying to create a website, somewhere suffering going on seamlessly loading data, sending back data.

Again, you know, not all data that goes back and forth needs Ajax or will even be enhanced with Ajax in any positive way. But there are many, many scenarios. One thing to bear in mind may have already noticed if you follow the other videos in this series, is that the the link is a bit different. That's because I'm using a server, local server and firewall Whatever it is, but you're generally need to serve or do and you'll come across errors in your browser to be able to use Ajax. So if you're testing locally, or recommend just setting up a survey, I would recommend x amp that x A MPP. And that's cross platform.

There are other options as well, such as node and some building servers into Unix like Unix like Unix like based systems, but example in my recommended one, I'll put a link to that as well. Okay, and yeah, that's it. If you're online, then you're home. If you want to be in a service, that is alright anyway. So what we're actually going to do to create a create a button on our world is got this little button button right here, and I'm going to say on click on click, we are going to call song function, and this is gonna be called load data. That's something that we are going to be making.

We'll make that in here. So function load data. That's my footwork, it's always good to just quickly confirm, to hate you. So when I click it, we get to see the page isn't window there at all. And that's a thank you what we're going to be able to do boom, going to be able to get content. And what we're actually going to do is I've got a text file right here that just says, Hello, everybody.

I'm Dr. Nick, cofounder, TC, we're going to load the data from there. This could be well, this is on the server. So it doesn't matter what it is. This allows you to get that content number awesome thing is you could use Ajax to communicate with some code a code file and load data from a database. So running code execution in on the server. Okay, so to actually do Ajax in JavaScript was going to pick a variable called x HTTP.

And we need to create a new XML HTTP request. I don't think I told you or explain what Ajax stands for by direct sorry. It just stands for Asynchronous JavaScript and XML. It's not a programming language at all. It's just basically a feature. It uses a combination of browser built in HTTP requests to get data from a server and the JavaScript and the HTML Dom to display and use the data.

And Ajax is sort of a you know, misleading name because they suggest that, you know, XML is always used in it. Yes, Ajax applications could use XML to transport data. back from the server, but you can equally just transported via plain text or JSON as well. So it could just be called Ajax. For a a judge Agus, I guess they don't sound as good as Ajax and I'm pretty sure Ajax is a is an old Greek word. I think it is a Greek or Latin word.

I'm pretty sure it is. I don't know what it means. Have a look at that afterwards. Okay, so what we need to do is take some TP on ready. Ready? Ready, we are going to call this function and put some code on here.

We're going to say if this dot ready state really equals four. So if the status equal to four and 200 that means everything in a okay and we can Continue the two students that we want to discuss data equals know how you have you know, different status 504 and a five or something like error state see this is an okay status. And what we are going to say is in here, this is where we would print something that we've loaded, so we would do this, we could do one one, we could put it in some HTML, we could print it out into the console literally printed out onto onto a father matter the longest, I'm going to put this dot response text, which is the return from the false in this case, just be the text content, the file content, and, but we here, we need to actually open the file, we're gonna open it using a get request Get.

And so the file location, which is just in the same location as my index and the custom j s file, if it isn't, then you need to put like folder path as well. Like so. Wrong. Now you just do x HTTP. So what is happening is we are opening this fall we're sending it. And this is just saying when the x HTTP is saying it's ready.

So solid ready status change, then, you know, do some code. So this doesn't necessarily come afterwards. It just means once the state changes, then execute this function and that could be when ever to run the application. So if I run it, now I click that, as you can see, we are getting that content and the page is not reloading. By the favicon, not, you know, refreshing, and that's good. So it is this content from this file right here.

So that's it for Ajax in JavaScript. What I recommend is using a framework on top of JavaScript such as the, you know, world popular jQuery, and jQuery has really awesome built in methods to enhance the experience of using jQuery Ajax in your website. That's it. If you have any questions, feel free to drop me a message and I look forward to seeing you in the next video.