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