[MUSIC PLAYING]
>> DOUG LLOYD: So one more sort of notion that
sort of falls under the umbrella of JavaScript is something called AJAX.
Up until this point, our interaction with JavaScript
has been limited to push a button and something happens.
And specifically, the something that happens
is our websites look and feel changes.
Right?
Like in particular, in the document object model video,
I changed the background color.
But when I did that, I didn't have to do any special extra requests.
I didn't have to request that the server send me a new page.
I just changed what I already had.
I didn't have to reload my page, and things definitely changed,
so that's great.
But there's definitely some manual user interaction involved.
AJAX is a cool technique that allows us to update a page's content,
and not just the look and feel, without reloading.
>> And by specifically when I say updating a page's content,
I'm not saying we rewrite the page using JavaScript.
I'm saying we actually request more information from the server
without our page having to reload.
>> Now that sort of a bit of a more advanced technique
that we're going to talk about in this video.
We're going to have some interaction.
But when we do, I'm going to be making requests to the web server.
In this case, just what's running my Apache web server.
I'm going to be making additional requests while I'm visiting a web page,
but my page won't refresh.
>> It's just going to asynchronously update my page.
And that's, in fact, which AJAX stands for,
is Asynchronous JavaScript and XML.
XML is another kind of markup language, and you can sort of
think of it just like HTML.
It's not quite the same thing, but it's basically just a markup language.
So it's an asynchronous JavaScript and a markup language.
>> So in order to use this AJAX technique-- AJAX
is not a separate programming language.
It's just sort of a set of techniques-- we
need to create a special JavaScript object, which
is called an XMLHttpRequest.
Now, it's very easy to do this.
We just say var, whatever we want to call this object,
equals new XMLHttpRequest.
And now we have now obtained an AJAX sort of object,
or an XMLHttpRequest object, which will allow
us to asynchronously update our page.
>> After we have gotten this new object, this XMLHttpRequest,
we have to do something to its onreadystatechange behavior.
Onreadystatechange behavior is really just
when you make a request to a web page, the page
goes through a number of steps.
First, a request hasn't been sent.
Then, the request has been sent, but not acted upon.
Then the request has been acted upon.
Then the request is being sent back to you.
>> Then, the request is fully loaded in your page.
Those are different states.
And so we need to set our new XMLHttpRequest object
to change when the ready state changes.
And typically, we do this by defining an anonymous function, which
we're familiar with from JavaScript now, that
is called when the ready state changes.
It's really not much more than that.
We're just going to be defining an anonymous function, sort of like what
we were doing in JavaScript, where we would
have an anonymous function respond to an on click,
or when we were doing a map of the various objects in an array.
>> Something happened when something was clicked.
In this case, it's just something is happening when the state of our page
changes.
There are two other properties that are sort of-- they're not
the only properties that are inherent to XMLHttpRequest,
but they're pretty important ones.
There's something called readyState, which as you can probably guess,
is related to onreadystatechange.
It actually tells you what the readyState is.
0, 1, 2, 3, and 4 are the possibilities there,
and they sort of roughly correspond to what
I was just talking about a second ago.
>> And then status, which hopefully if everything went OK,
is 200, which is short for, of course, OK,
which we're familiar with from Http.
So we're hoping that our ready state is four, and our status is 200.
And if our ready state is four, and the response
is ready to be put on the page, and the status is 200,
we were able to do everything successfully,
now we can asynchronously update our page
without having to reload the entire content of it.
>> After we've defined what happens to the onreadystatechange behavior,
and we've checked that readyState is 4 and status is 200,
then all we need to do is open up an asynchronous
request, which is just making an Http generally GET request.
Just doing it programmatically, instead of through our web browser.
And then we send that request.
So what does this maybe look like in context?
So here's a function that deals with AJAX requests.
OK?
And I've arbitrarily said it accepts an argument.
And this a sort of a general skeleton here.
At the very beginning, we get ourselves a new XMLHttpRequest object.
Then, I need to set the onreadystatechange behavior.
And so I'm going to say when the readyState changes,
I want you to call this function.
>> Which is going to ask the question, if the readyState
is 4, if the readyState has changed to be 4, and the status was 200,
so we had a successful request, I want to do something to the page.
And we'll take a look at an example of what
that something might be in a second.
So then, now I have defined my anonymous function,
my response function whenever the readyState changes.
>> So then I just need to open up a request, using the Open method.
And then, I send that request.
And let's take a look at a more concrete example
of what AJAX can do on our web pages.
So I have here a very simple page called home.html.
And I've got an information goes here and some sort of drop-down menu.
>> And we'll revisit this in one second.
But I think we should now take a look at the actual source code.
And so, I'm going to open up home.html.
And we'll see what's going on.
So up at the very top here, I have some JavaScript stuff that's going on.
>> And here, I apparently have a div whose ID is infodiv,
and some information is going to go there.
And then I have this form.
And inside of this form, I have something
called a Select, which is just a drop-down menu
with a bunch of different options.
And apparently when that changes, when the option that has been selected has
changed, I'm going to call some function cs50Info,
and then I'm going to pass in this.value,
where this refers to which option was selected,
and value is one of these here, option value= equals empty, "blumberg,"
"bowden ," "chan," and "malan."
>> So what might actually happen here when I do this?
Well, let's take a look at blumberg.html.
Looks like it's just a snippet of some Html.
And in fact, what I'm hoping is going to happen here
is I'm going to be able to plug this Html directly into my web page
without having to reload the page, such that when
I choose Hannah from the drop-down menu, information about Hannah,
in particular, this information here in blumberg.html,
is what shows up on the page.
And I don't have to refresh.
And if I chose somebody else, their information would show up.
How do I do this?
Again, this requires us to use some AJAX.
And so, we'll open up ajax.js.
And here is that function, cs50Info.
If name is nothing, I return.
I'm not going to do anything if the empty option has been chosen.
Otherwise, I'm going to create a new XMLHttpRequest.
And then I'm going to say, when the readyState changes, call this function.
>> And if the readyState is 4 and the status is 200,
here's a little bit of jQuery on line 13.
But all I'm doing is saying, change the contents of infodiv
to be whatever I got back as a response from my HttpRequest.
>> What is my HttpRequest?
Well, that's right here on line 18 and 19.
Line 18, I'm basically preparing a GET request for name + .html.
And again, name here is the argument that was
passed in as a parameter to cs50Info.
>> So basically, I am passing in somebody's name, which was that set of options
that we saw in the drop-down menu in the form.
I'm getting that name.
And I'm saying I would like you to please obtain for me that file.html,
and then send that request.
>> And so that onreadystatechange is going to be listening and waiting and waiting
and waiting, until the readyState is 4, and the status is 200.
So it's ready to be served, and the request was successful.
And then if it is, it's going to change the contents of infodiv
to be the response text that I got back.
>> So let's see how this might actually work.
So we'll head over to my browser window, and we'll look here.
So let's take a look at what's going on here in AJAX.
So we'll choose somebody from the drop-down menu.
So in this case, let's just choose Hannah.
And notice that Hannah's information has changed,
but I didn't have any-- my page didn't entirely reload.
The stuff stayed.
Most of the stuff stayed.
AJAX Test didn't change.
The button itself, this drop-down menu didn't change.
But information there did change.
And depending on how quickly my computer moves,
you actually might see that the content disappears and then reappears really
quickly.
That's the content being deleted from infodiv,
and then replaced with a new asynchronous request.
>> So if I switch it to be say, Rob-- and again, take a look,
and maybe we'll see it actually disappear and reappear quickly.
You see that?
How it just popped away, and then it refilled?
That's the AJAX request sort of taking place.
And so depending on the person I choose, I'm
making a different asynchronous request to a different file
that I have on my server.
And the contents of my infodiv are updating,
based on which of these I've chosen.
So that's really all there is to AJAX.
It allows us to make these asynchronous requests, updates to a page.
Without having to refresh the entire page,
we're going to get new content from it by making
a new fresh request to the server.
And so, our pages can become quite a bit more dynamic.
>> And as we get more and more advanced, you
might get things like say, your email inbox,
where you don't have to do anything.
You don't have to click a drop-down menu or click anything,
and all of a sudden, your newest email shows up at the top.
That's also just an Ajax request.
Ajax is requesting your server, the email server,
to send over all the information about your latest emails,
and changing what you see on the screen to be your newest set of emails.
And if you have a new one in there, then the content of that div
will change to reflect the updated content.
I'm Doug Lloyd.
This is CS50.