Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Program your first AJAX request using JavaScript. You'll use AJAX to load HTML into a div tag on a web page.
Setup a Development Server
To test AJAX requests locally, on your own computer, you'll need to set up a development server and preview your pages from your computer using a URL like http://localhost/
Treehouse has a couple of videos helping you set up this kind of development environment:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that you have an understanding of what
Ajax is and why we,
0:00
as web developers, find it exciting and
useful, let's dig into some details.
0:04
I'll show you a simple example using plain
JavaScript to
0:09
load a chunk of HTML into a page using
Ajax.
0:12
If you'd like to follow along, I've set up
0:16
a workspace that has all the files you'll
need.
0:18
You can open the workspace by clicking the
0:21
launch workspace button to the right of
this video.
0:23
If you're watching this video on our iPad
app, you'll
0:26
have to use a laptop or desktop computer
to access workspaces.
0:29
I've also included the project files if
you want to work locally.
0:33
However, AJAX requests only work through a
web server.
0:36
In other words, you can't just preview a
local
0:40
file on your computer and expect your Ajax
to work.
0:43
You'll need to either set up a local web
0:46
server running on your computer and view
your pages
0:48
through it, or upload your project files
to a
0:51
web server and view those files through
the web.
0:54
Honestly, Workspace is, is the easier way
to go if you want to follow along.
0:57
So let's program.
1:01
As I mentioned in the last video, AJAX
programming is a four-step process.
1:03
Step one, create an XMLHTTP Request
object.
1:08
This step tells the web browser to get
ready for AJAX.
1:12
You create an XMLHTTP Request object, or
XHR object for short.
1:16
With one simple line of JavaScript.
1:22
I'm going to open the index.html file from
my workspace.
1:25
As you can see there's already script tags
for adding JavaScript.
1:29
So I'll click in between them and type a
line of code.
1:32
What I'm doing here is creating a variable
named xhr.
1:37
Which contains a new XMLHttpRequest
object.
1:42
The variable name doesn't have to be xhr,
it's just a variable.
1:46
So you could name it ajax or request or
even bob for that matter.
1:50
But I'm gonna leave it as xhr.
1:55
The new XMLHttpRequest part
1:59
tells the web browser to get ready to work
with
2:02
ajax, and is required any time you'd like
to use ajax.
2:04
In fact, for each ajax request, you should
create a new XHR object.
2:08
For example, if you wanted to use ajax
twice on a page, to
2:13
request data for a sidebar, and another to
process a form submission for example.
2:16
You will need two variables, each with
their own XHR object.
2:21
Step two, create a callback function.
2:25
This is the most complicated part of the
AJAX process.
2:28
That's because the callback function is
the programming you want
2:31
the browser to run when the server sends
back its response.
2:34
For example, in the case of Twitter's
endless list of tweets the
2:38
callback function adds the newly retrieved
tweets to the end of the webpage.
2:42
The callback function is the heart of your
Ajax program, all the
2:47
fun stuff you can think to do with the web
server's response.
2:51
Think of a callback like a note you leave
2:54
the web browser, give me a
call when you're ready.
2:57
When the web browser sends off its ajax
request it continues doing other things.
3:00
This is the asynchronous part of ajax.
3:04
When a browser sends in a synchronous
request,
3:07
it doesn't just wait until it gets a
response.
3:10
If it did then the browser would freeze
and the user wouldn't
3:12
be able to do anything until the response
returned from the server.
3:15
Which could take seconds, or if the server
is down or
3:19
there's a problem with the internet, the
server might never respond.
3:21
Instead, after the browser sends the
request, it continues doing other things.
3:25
Handling other JavaScript programming,
responding to
3:30
actions by the user, and so on.
3:33
But, when the browser finally gets a
response from the webserver,
3:35
it looks for that note, your callback, and
gives it a call,
3:39
executing all of the programming you set
up inside that callback.
3:43
There's another strange thing about the
asynchronous nature of AJAX.
3:47
If you make multiple AJAX requests, you'll
3:52
never know which request will be handled
first.
3:54
You might send off four AJAX requests and
for whatever
3:57
reason the web server can handle that
fourth request quickly.
3:59
The callback for that fourth request will
run first.
4:03
In other words, you can never tell in
which order your AJAX callbacks will run.
4:07
To trigger the callback, we use a special
browser event.
4:13
If you've programmed JavaScript before,
you should know all about events.
4:17
An event is something that happens in the
web browser, an action
4:21
a user takes like clicking the mouse
button or submitting a form.
4:24
For example, when a user submits a form,
you
4:28
can check to see if they filled it out
correctly.
4:31
The event here is submitting the form.
4:34
Checking the form data is the program that
runs in reaction to the event.
4:37
The event's callback.
4:41
There are events for mouse clicks, key
4:43
presses, scrolling, and even closing a
window.
4:45
AJAX comes with its own set of events.
4:48
We can add programming to respond to those
events.
4:51
The most important is the
onreadystatechange event.
4:54
This event is triggered whenever there's a
change in an AJAX request.
4:58
Like opening a new request, sending it, or
receiving a response.
5:02
We create our callback to respond to that
request.
5:05
This programming sets up a function that
runs each time
5:15
there is a change in the state of the Ajax
request.
5:17
Each step in the Ajax process, like
opening a new
5:21
request or sending out that request
triggers a change of state.
5:23
For this callback function we're only
interested in the final change of state.
5:27
That's when the server sends back its
response.
5:32
We want to get that response and then
update our webpage.
5:34
The XML http request object keeps track of
5:37
the state using a special property named
readyState.
5:41
That property contains a number including
the current state
5:45
of the request and that property holds the
number four.
5:48
Then the request is done and the server
has sent back a response.
5:51
Let's add a conditional statement to test
for that state
5:55
[BLANK_AUDIO]
5:57
[BLANK_AUDIO]
6:02
So here, we're checking if the ready state
is equal to 4.
6:04
That means we've got the response back.
6:07
We'll take the full AJAX response and
place it into the web page.
6:09
The data we get back is going to be a
chunk of HTML.
6:13
And we'll place it inside a div tag that
has the ID of ajax.
6:16
You can see that div down here and there
is the id, ajax.
6:21
First thing you need to do is select that
div.
6:25
We can do that using standard document
6:31
manipulation methods that are built into
web browsers.
6:33
In this case we are selecting
6:36
an element that has the ID of ajax.
6:38
The next thing we do is set its innerHTML
property.
6:41
innerHTML is a property that contains all
the HTML inside an element.
6:47
By changing its value, we can change the
HTML that appears inside it.
6:52
[BLANK_AUDIO]
6:56
Every XMLHttpRequest object has
a property called responseText.
7:00
This is the information that the web
server sends back.
7:06
Here we're taking the responseText, and
we're storing it inside of the div.
7:10
In this case, we have a simple callback.
7:13
Remember the programming doesn't run until
the response comes back from the server.
7:16
In fact, we have two more steps to
complete the AJAX request.
7:21
Step three, open a request.
7:25
An XHR object has a method or function
called open.
7:27
[BLANK_AUDIO]
7:31
This function prepares the browser for
sending the request.
7:35
You give the function two pieces of
information.
7:39
The first is the HTTP method that you're
going to use.
7:42
The most common methods are GET and POST.
7:46
But there are others, such as PUT and
DELETE.
7:49
You'll use GET if you want to send a request for data
7:52
a request for data and POST if you're
sending the data.
7:54
Like information from a form, for the
server to save in the database.
7:57
I'll talk more about these two methods in
the next video.
8:01
The URL is where the request is going.
8:05
This could point to a file or a
server-side program on your web server.
8:08
On our example, I'm just pointing to a
file in the workspace.
8:12
We'll load that file into the page.
8:16
Now the open function just gets the
browser ready
8:18
to make a request, but it doesn't send
that request.
8:20
That's the last step of the process.
8:24
Step 4, sending the request.
8:27
The previous three steps gave the web
browser all the information it needs.
8:29
So we can finally send off the request to
the web server.
8:33
Sending off the request takes just a
simple bit of code.
8:37
[BLANK_AUDIO]
8:39
In our case since we're requesting a chunk
of
8:43
html we don't provide the send method with
any
8:46
information, but when you need to submit
information to
8:48
the server like the user's input from a web form,
8:51
you can pass the send method that data.
8:55
Alright, let's see this in action.
8:57
I'm gonna save the page, and preview it.
8:59
Ta-dah, ajax.
9:01
Okay.
9:05
Well this doesn't look like much.
9:06
But let's take a peek under the hood,
9:07
i'll open the JavaScript console, and
reload the page.
9:09
In Chrome I can go, to the tools.
9:13
Open up the JavaScript console, make sure
I've got
9:16
a Log XMLHttpRequests option selected
and reload the page.
9:20
There you can see the ajax request that
was made.
9:27
So, we've done it!
9:31
But, it's not that interactive.
9:32
Let's make this a bit more interactive by
adding a button, that
9:34
when you click, sends the request and
loads the data to the page.
9:37
I'll place a button down here below the H1
tag.
9:50
I've added an ID to this button.
9:55
I've also added an onclick to it.
9:57
When the button is clicked, there's a
function, called sendAJAX, that runs.
10:00
I'll create that function now.
10:04
[BLANK_AUDIO]
10:05
Now I wanna make sure that that function
triggers the send method.
10:18
So I'll put the send method inside of the
function.
10:21
The last step is we'll make the button
disappear.
10:23
After it's clicked and the Ajax loads, the
button goes away.
10:27
All right.
10:36
Let's check this out.
10:37
I save the file, reload the preview,
there's the button, and there's our Ajax.
10:37
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up