AJAX - Beau teaches JavaScript

Ajax stands for asynchronous JavaScript and XML a checked allows you to update parts of a website without reloading the entire page you can receive data from a server and send data to a server in the background here's an example so we have the HTML code setup up here then we have the Java Script which has the Ajax down here and then over here is is the actual web page right on the side here now let's see what happens when I push this change content button see the text is now changed to subscribe to the free code camp YouTube channel that text is actually nowhere in this code anywhere because that text is coming from another server I'm going to go through all this coding detail but first I want to give you an overview of the seven main steps to Ajax so the first step is that an event occurs on a web page so that's this see we have the button up here so the event is when you hit the button the second step is that an XML HTTP request object is created by JavaScript now that's right here it says new XML HTTP request the third step is that the xml httprequest object sends a request to the web server now that's the part down here where we have the web server right there and then we're going to send this request down here X HTTP send the next step is that the server processes the request now that happens at the server that we were making their quest of then the fifth step is that the server sends a response back to the web page also at the other server the sixth step is that the response is read by JavaScript and if you look up here I can explain this more in detail in just a second but where it says this that response text is where we get the response from the server the seventh step is that the proper action like a page update is performed by JavaScript so that's also in this line we're going to update the HTML on the website with JavaScript so now I'm going to go through this code in detail I'm going to start actually with this line right here the actual file we're trying to get is this one right here the HTTP colon slash slash carves out CC flash code /h X underscore example that txt now we also have this other thing right this work says cross-origin me now this is a Korres proxy which is a service that allows developers to access resources from other websites when they would normally be a cross-origin error now if I didn't have this right before it I would get this error down here where it says it basically cannot load that file or it says no access control origin header is present on the requested resource basically this is a security feature where I'm on code pin right now you cannot just easily pull files from another web server now this is just a basic short-term solution using a proxy like this it's a short-term solution it's just a quick fix if you want to try things out the long term solution would be to update the htx s file on the server for cons SEC to allow cross-origin requests and then I can make this request without adding the proxy at the beginning okay let's go back to the rest of this code here first of all you can see that in the HTML when you click the button it's gonna call this function and that's just right in the JavaScript then we're gonna create the XML HTTP request we're gonna treat this object in JavaScript now we're gonna use this property we're gonna set this property the onreadystatechange property this property defines a function to be called when the ready state property changes and you can see the ready state property right here we're gonna use their list ready state the ready state property is going to be one of four numbers zero the requests not initialized one server connection established two requests received three processing requests for requests finished and response is ready so that's where we get to this next line if this that rate state equals equals 4 that means that the request is finished and the response is ready and this that status equals equals 200 now this is an HTML response so 200 means okay another common status would be 404 which means not found so 200 means that the resource resource was found on the server and what resource well we haven't got to that yet but so this just means if we got a good response in the request finished and it was found then we can do something with the response so go on to this line right here so we're about to set something on the website document dot get element by ID so the idea is right here ID equals demo we're gonna set the innerhtml that means we're gonna change its HTML between the tags that have the ID demo and we're going to set this text to this dot response text this that response text just returns the data as a string from the from the server we could use this dot response XML if we want XML returned let's do another example of this I'm gonna reset this it starts with let Ajax changes text click change content and then we just gotten this information from another server and if we go down here the open function is where we specify what file or resource we are requesting but this does not actually request it yet here we use get we can also use post if you are sending a large amount of data to the server or sending user input you should use post here but otherwise you use you should usually use get and then we actually put where the resources located what website we're trying to get something from and this last thing true this is for whether or not the request is asynchronous you almost always want true for asynchronous so you can execute other scripts while waiting for a server response now this last thing right here the X HTTP dot send function is where we actually send the request to the server so this just means do everything we set up to do these previous things with the X HTTP object and then after the request changes the ready state it will call this function this was just a brief introduction to ajax if you want to learn more check out the links in the description thanks for watching my name is beau Carnes don't forget to subscribe and remember use your code for good

Channel: freeCodeCamp.org

Views: 27,155

Keywords: javascript, ajax, xmlhttprequest

Id: tHRNuBf_8xg

Length: 6min 14sec (374 seconds)

Published: Mon Feb 13 2017