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.
Workspaces
Workspaces is a Treehouse tool that allows you to write code. Because it runs through a real web server, you can use Workspaces to send AJAX requests and receive responses.
If you're having technical issues with Workspaces, please visit our support page and let us know about the problem. We're always happy to help.
Setup a Development Server
To test AJAX requests locally, on your own computer, you'll need to setup 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 this kind of development environment:
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 xml http request
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 xml http request 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 Twitters
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
servers response.
2:51
Think of a callback like a note you leave
2:54
the web browser, give me a call when your
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 call back, 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 call-back 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
ready state.
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, dominant,
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 XML HTTP request object has a
property called response text.
7:00
This is the information that the web
server sends back.
7:06
Here we're taking the response text, and
we're storing it inside of the div.
7:10
In this case, we have a simple call back.
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 HXR 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 users 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 java script console, make sure
I've got
9:16
a log, xml, http request 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 on click of it.
9:57
When the button is clicked, there's a
function, called send ajax 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 its 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 up