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