Now that you have an understanding of what Ajax is and why we,

as web developers, find it exciting and useful, let's dig into some details.

I'll show you a simple example using plain JavaScript to

load a chunk of HTML into a page using Ajax.

If you'd like to follow along, I've set up

a workspace that has all the files you'll need.

You can open the workspace by clicking the

launch workspace button to the right of this video.

If you're watching this video on our iPad app, you'll

have to use a laptop or desktop computer to access workspaces.

I've also included the project files if you want to work locally.

However, AJAX requests only work through a web server.

In other words, you can't just preview a local

file on your computer and expect your Ajax to work.

You'll need to either set up a local web

server running on your computer and view your pages

through it; or upload your project files to a

web server and view those files through the web.

Honestly, Workspace is, is the easier way to go if you want to follow along.

So let's program.

As I mentioned in the last video, AJAX programming is a four-step process.

Step one, create an XMLHTTP Request object.

This step tells the web browser to get ready for AJAX.

You create an XMLHTTP Request object, or XHR object for short.

With one simple line of JavaScript.

I'm going to open the index.html file from my workspace.

As you can see there's already script tags for adding JavaScript.

So I'll click in between them and type a line of code.

What I'm doing here is creating a variable named XHR.

Which contains a new xml http request object.

The variable name doesn't have to be xhr, it's just a variable.

So you could name it ajax or request or even bob for that matter.

But I'm gonna leave it as xhr.

The new xml http request part.

Tells the web browser to get ready to work with

ajax, and is required any time you'd like to use ajax.

In fact, for each ajax request, you should create a new XHR object.

For example, if you wanted to use ajax twice on a page, to

request data for a sidebar, and another to process a form submission for example.

You will need two variables, each with their own XHR object.

Step two, create a callback function.

This is the most complicated part of the AJAX process.

That's because the callback function is the programming you want

the browser to run when the server sends back its response.

For example, in the case of Twitters endless list of tweets the

callback function adds the newly retrieved tweets to the end of the webpage.

The callback function is the heart of your Ajax program all the

fun stuff you can think to do with the web servers response.

Think of a callback like a note you leave

the web browser, give me a call when your ready.

When the web browser sends off its ajax request it continues doing other things.

This is the asynchronous part of ajax.

When a browser sends in a synchronous request,

it doesn't just wait until it gets a response.

If it did then the browser would freeze and the user wouldn't

be able to do anything until the response returned from the server.

Which could take seconds, or if the server is down or

there's a problem with the internet, the server might never respond.

Instead, after the browser sends the request, it continues doing other things.

Handling other JavaScript programming, responding to

actions by the user, and so on.

But, when the browser finally gets a response from the webserver,

it looks for that note, your callback, and gives it a call.

Executing all of the programming you set up inside that callback.

There's another strange thing about the asynchronous nature of AJAX.

If you make multiple AJAX requests, you'll

never know which request will be handled first.

You might send off four AJAX requests and for whatever

reason the web server can handle that fourth request quickly.

The callback for that fourth request will run first.

In other words, you can never tell in which order your AJAX callbacks will run.

To trigger the call back, we use a special browser event.

If you've programmed JavaScript before, you should know all about events.

An event is something that happens in the web browser, an action

a user takes like clicking the mouse button or submitting a form.

For example, when a user submits a form, you

can check to see if they filled it out correctly.

The event here is submitting the form.

Checking the form data is the program that runs in reaction to the event.

The event's callback.

There are events for mouse clicks, key

presses, scrolling, and even closing a window.

AJAX comes with its' own set of events,

We can add programming to respond to those events.

The most important is the onreadystatechange event.

This event is triggered whenever there's a change in an AJAX request.

Like opening a new request, sending it, or receiving a response.

We create our callback to respond to that request.

This programming sets up a function that runs each time

there is a change in the state of the Ajax request.

Each step in the Ajax process, like opening a new

request or sending out that request triggers a change of state.

For this call-back function we're only interested in the final change of state.

That's when the server sends back its response.

We want to get that response and then update our webpage.

The XML http request object keeps track of

the state using a special property named ready state.

That property contains a number including the current state

of the request and that property holds the number four.

Then the request is done and the server has sent back a response.

Let's add a conditional statement to test for that state

[BLANK_AUDIO]

[BLANK_AUDIO]

So here, we're checking if the ready state is equal to 4.

That means we've got the response back.

We'll take the full AJAX response and place it into the web page.

The data we get back is going to be a chunk of HTML.

And we'll place it inside a div tag that has the ID of AJAX.

You can see that div down here and there is the id, Ajax.

First thing you need to do is select that Div.

We can do that using standard, dominant,

manipulation methods that are built into web browsers.

In this case we are selecting.

An element that has the ID of ajax.

The next thing we do is set its innerHTML property.

InnerHTML is a property that contains all the HTML inside an element.

By changing its value, we can change the HTML that appears inside it.

[BLANK_AUDIO]

Every XML HTTP request object has a property called response text.

This is the information that the web server sends back.

Here we're taking the response text, and we're storing it inside of the div.

In this case, we have a simple call back.

Remember the programming doesn't run until the response comes back from the server.

In fact, we have two more steps to complete the AJAX request.

Step three, open a request.

An HXR object has a method or function called open.

[BLANK_AUDIO]

This function prepares the browser for sending the request.

You give the function two pieces of information.

The first is the HTTP method that you're going to use.

The most common methods are GET and POST.

But there are others, such as PUT and DELETE.

You'll use GET if you want to send a request for data

a request for data and POST if you're sending the data.

Like information from a form, for the server to save in the database.

I'll talk more about these two methods in the next video.

The URL is where the request is going.

This could point to a file or a server-side program on your web server.

On our example, I'm just pointing to a file in the workspace.

We'll load that file into the page.

Now the open function just gets the browser ready

to make a request, but it doesn't send that request.

That's the last step of the process.

Step 4, sending the request.

The previous three steps gave the web browser all the information it needs.

So we can finally send off the request to the web server.

Sending off the request takes just a simple bit of code.

[BLANK_AUDIO]

In our case since we're requesting a chunk of

html we don't provide the send method with any

information, but when you need to submit information to

the server like the users input from a web form,.

You can pass the send method that data.

Alright, let's see this in action.

I'm gonna save the page, and preview it.

Ta-dah, ajax.

Okay.

Well this doesn't look like much.

But let's take a peek under the hood,

i'll open the JavaScript console, and reload the page.

In Chrome I can go, to the tools.

Open up the java script console, make sure I've got

a log, xml, http request option selected and reload the page.

There you can see the ajax request that was made.

So, we've done it!

But, it's not that interactive.

Let's make this a bit more interactive by adding a button, that

when you click, sends the request and loads the data to the page.

I'll place a button down here below the H1 tag.

I've added an ID to this button.

I've also added an on click of it.

When the button is clicked, there's a function, called send ajax that runs.

I'll create that function now.

[BLANK_AUDIO]

Now I wanna make sure that that function triggers the send method.

So I'll put the send method inside of the function.

The last step is we'll make the button disappear.

After its clicked and the Ajax loads, the button goes away.

All right.

Let's check this out.

I save the file, reload the preview, there's the button, and there's our Ajax.