Original subtitles

[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.