[MUSIC PLAYING]
DOUG LLOYD: So as you continue
your exploration of JavaScript,
there's one other
technique that really might
come in handy as you begin to
build more complex websites,
and that is using something called Ajax.
So, so far, in our
exploration of JavaScript,
we've been limited to doing a
couple of really simple things
for the purpose of illustration,
like you click a button,
and something happens.
Maybe the color changes on your site,
or maybe a couple of words change.
But the catch is everything we've been
doing so far has been client side.
It's all happening on our computer.
We're never really talking
to the outside world.
We can, however, talk to the outside
world and make changes on our website,
have something happen that
interact with the server,
but maybe it doesn't
reload our entire page.
We want to create a more
pleasant user experience.
Ajax allows us to do that.
Ajax used to stand for something
called Asynchronous JavaScript in XML.
That's a backronym.
That's not really what
it's called anymore.
And actually, most commonly now,
instead of XML, we use JSON.
But Ajax has just been the name that's
kind of stuck for the technique.
And what Ajax allows us to do is
to refresh, basically, sections
of our page without the entire page.
And if you're, for example, somebody
who follows sports, for instance,
you might see this if
you're on a sports website
where scores of games that are going
on currently are being updated,
but the whole page doesn't refresh.
That means that the page is
basically taking advantage of Ajax
to just update small
portions of the page.
The techniques that you can do
with Ajax are pretty limitless.
You can do a lot of
different things with it.
And we're going to focus on a very
specific example where, again, we're
clicking a button,
and something happens.
But the difference is this
time when something happens,
we're making a server request.
We're making an outbound
request from a page.
It's not just happening on our machine.
But you can do things like
updating, for example,
the sports scores on a website that
tracks that information or your email.
You might notice that sometimes
when you get a new email,
your entire body of your
page refreshes to put
that new email at the top of your inbox,
but the whole page doesn't refresh.
That's happening with Ajax as well.
But it's constantly
running all the time.
It's just basically querying forever.
We're, again, just going to focus
on clicking a button and something
happening, but that something being
not just local to our machine anymore.
So, in order to do
this, we have to create
another special kind of JavaScript
object called an XMLHttpRequest.
And what this does is
it allows us to make it
asynchronous, so not at the same
time as the refresh of the page
or loading the page, but sometime there
after while we still are on the page.
That's what we mean when
we say asynchronous.
it allows us to make
an asynchronous request
to a server to get more information.
It's actually very easy to
create this, fortunately.
This line for example would create
a new x amount HTTP request object.
And in this case, I'm
just calling that xhttp,
and assigning it to just a random,
local variable in JavaScript.
Once you have the object,
so once you've created it,
the first thing you have to do is
define an onreadystatechange behavior.
Onreadystatechange is
really just a wordy way
to describe the steps that are
happening when you visit a page.
So, for example, you click on--
you're on a page.
You refresh the page.
It sort of all goes blank for
a second, then some of the data
starts to populate.
And then it stops refreshing,
and you're ready to go.
That's going through a
series of different states,
where it goes from the request
hasn't been initiated to your sending
the request to the request is
received to the request is on its way
back to you, and then
the request is complete.
Those are, for example, a couple
of different state changes
that might take place when
you're visiting a site.
And it will also be the
kinds of state changes
that will take place
when you're updating
a smaller section of your site.
Typically, we define
something that is supposed
to happen when the state change
is using an anonymous function.
And we're going to see an
example of this in just a moment.
We don't have to give
that function a name,
we just want it to do
something whenever it
detects some change in the
status of loading the site.
There are five different states.
They go from 0 to 4.
That is the readyState property, so
that's part of the onreadystate change.
It's clearly related.
And those are what I
basically just described,
where 0 is the request has
not yet been initialized
and, 4, which is the end,
which is the ultimate goal
of a an onreadystate state
change request or an Ajax request
is to get that readyState
to 4, which basically
means the entire them has loaded.
And hopefully, the status
that we get back is 200.
Those are the two things
we're really caring about.
We want to make sure that when
our Ajax request is completed,
that the readyState is 4, so
the data has been received,
and the data was received OK.
You may recall 200 being
the HTTP code for OK.
That was the one we,
fortunately, never saw.
We didn't go to a website and get a--
you don't go to website and get a 200,
like you get a 404, for example.
So we want, ultimately,
for the readyState to be 4,
and the status to be 200.
When that's the case, we
can then update our site.
Once we have that, we just need to
open the request and send the request.
And then, our site will refresh.
Again, we're going to see
a very concrete example
of this in just a minute.
So if it doesn't make sense
just now, hopefully, it
will when we start to
see some code, and you
see how that interaction takes
place for real on a website.
There is, I want to point out
again, a very slightly different way
to do this syntactically using jQuery.
And, in fact, you will
very commonly see nowadays
Ajax requests made using jQuery.
We're explicitly showing you the
pure JavaScript version of this
just so you see it.
But as you become more comfortable
using jQuery for client-side scripting,
for example, for using DOM
manipulation or for Ajax request,
you'll probably see the syntax
of this slightly differently.
So here is a JavaScript function
that is preparing, opening,
and sending an Ajax request.
So the first thing I would do is
I'd create my new XMLHttpRequest,
and I'm going to, again,
assigned to a random variable,
this time called aj for Ajax.
Then, I'm going to define
a function that is going
to execute on the readyState changing.
So every time the readyState
changes, this function will execute.
But as you can see,
it's only really going
to do something, eventually, once the
readyState is 4, and the status is 200.
So it's going to--
this function will get executed
every time the state changes,
but it's only going to have a meaningful
thing to do once the readyState is 4,
and the status is 200.
And we'll see a concrete
example of that in a second
where we're going to be
updating a section of our site
with different photos and information.
Once that is done, we're then going to
open our XML requests or Ajax request.
This is just a simple way to do this.
We're basically creating a GET
request of a particular URL.
Don't worry about what the true means.
And then, we're just going
to send that request.
So, again, you'll usually see
this written in jQuery, instead of
in pure JavaScript.
So if you want to learn a
little bit about how to do that,
you can take a look at this URL here.
But for now, let's head into the
IDE and see this example in action,
making Ajax requests of a
server, where the server
happens to be running
locally on my machine,
to see how we can change
a page asynchronously.
So if you download the source
code that comes with this short
and you open up the
index.html within there,
you'll find a page that looks
like this called Ajax test.
There's a dropdown menu in the section
that says Information Goes Here.
We'll see what that means in a second.
I'm not going to tinker with that yet.
I want to show you what's behind
the scenes before we take a look.
So here is the source code for that.
At the top here, I'm
just loading a couple
of [? scripts. ?] I'm
loading jQuery because I
will use a little bit of
jQuery in this as well just
to give you a little taste of it.
I have my own JavaScript scripts
that I wrote called Ajax.js we're
going to take a look at just a second.
You'll see that the
information goes here
that we were just looking at on the
site is in a div whose ID is infodiv.
That will be really
important in just a minute.
And then I have a form where I
have a couple of different options.
And when something happens,
particularly when the value changes,
when I select a different
options from the list,
I'm going to call this
function, cs50info
and then I pass in the
parameter this.value.
You may recall from
our video on JavaScript
that this is a way to
self-refer to the event that
triggered the JavaScript function
being called in the first place.
So this is another form of an event
handler as opposed to on click,
it's on change.
And what this is going
to do is it's going
to allow me to figure out which one
of the options triggered the change.
And I'm going to capture this.value,
so this is what I mean with value,
is I'm going to get this
piece of information.
So if I choose Rob
Bowden from this list,
basically, I'm passing in CS50 info.
And then, the value that actually gets
passed into that function is bowden.
They're all in lowercase-- chan,
[? mailand, ?] and [? zaclova. ?] So
those are the different things that will
be passed into that CS50 info function.
What does that CS50 info function do?
Well, let's take a look at Ajax.js.
Here's CS50 info, if the name is empty,
so if I didn't choose one of the actual
options, if I just choose the
default option at the top--
you might be familiar with
this from using dropdowns,
where there's a blank thing and you
have to actually pick something--
I return.
I don't do anything.
I don't want to try
and do anything fancy.
Otherwise, I create an XMLHttpRequest.
We just saw this in the
slides a moment ago.
And I define a function that is going
to wait for the readyState to be 4,
and the status to be 200.
And when it does, when it's
there, what do I want to do?
I want to update the HTML
inside of the infodiv.
This is the jQuery way to describe this.
This is the line of jQuery that
you're going to see in this--
the rest of it is
JavaScript, this is jQuery--
to whatever I get back
from my Ajax request.
Remember, I haven't made the
Ajax request entirely just yet.
That's going to be right down
here with the open and send.
But when I do, I'm
going to get data back,
and I'm going to update whatever the
HTML of infodiv, which at the beginning
was information goes here-- that was
what was in between the div tags.
I'm going to to change that to
whatever I get back in my request.
But I'm going to do it without
updating the entire page.
I'm going to refresh, so
to speak, just that div,
just that section of the page.
So what file am I opening?
Well, I'm sending a GET
request for name plus .HTML.
Remember, that name is just the name
of the value, the variable that's
being passed in as a parameter here.
So that's what name is.
So name is going to be bowden or chan,
[? mailand, ?] or [? zaclova. ?] And
apparently, I'm going to
add .HTML at the end of it.
Well, what does one of these look like?
Well, it looks like just
kind of a snippet of HTML.
It's clearly not entirely
correct HTML because I don't have
HTML tags on the top and bottom of it.
I don't have body tags around it.
But it's some little bit of HTML.
It has a paragraph with
a name, an image tag,
and a couple of other paragraphs
with some information.
So let's see this actually in
action and see what it does.
So right now, I have Ajax tests.
And remember, when I choose
an option, that function
is going to execute that CS50 info
function passing in whatever one
I choose.
So let's choose Zamyla.
So notice what it did here.
It popped in all of that
information from our page.
There's that Zamyla tag.
So I'll pop back to the ID for a second.
We have a paragraph with her
name, an image, class of 2014,
and Winthrop House.
Indeed, all of that
information is now here.
But what happens if I change it?
I don't want my entire
page to refresh, but I do
want the content of that div to change.
So let's try and switch
it to, for example, Rob.
And if you look really
carefully, and depending
on if my computer is a
little bit slower or faster,
you might quickly see all of the
content get deleted and then replaced.
That is the asynchronous
request happening very quickly.
So let's see if we can see it.
You might have noticed right there that
everything deleted and then everything
came back, but now, I
have new data because I
chose a new option from the list.
Remember if I choose Select
Someone, nothing happens.
I returned immediately,
so it doesn't go back
to information goes here,
although I could have written
the function differently to do that.
But I can just make these
different asynchronous requests,
and it's going to keep updating the
information that I see on the page
without refreshing the entire page,
just the section that I care about.
So this is pretty cool.
Now, we can, not only
change things locally
on our machine, simple
things like colors,
but we can also now send
outbound requests to servers.
And they don't even have to be
servers that are running locally.
I could be maybe sourcing
information from Yahoo Finance
if I want to pull data from
Yahoo Finance asynchronously.
Maybe I'll do that and
load that into my page
and have that be some
information that constantly
gets updated because maybe I have a
different way of displaying the data
or something.
So it's an interesting new strategy
that we have at our disposal.
We can send requests locally.
We can send requests
outbound to other servers
and really take advantage of creating
a better user experience using Ajax.
I'm Doug Lloyd.
This is CS50.
