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
Learn about the XMLHttpRequest Object, what AJAX stands for, and the four steps to creating and sending a XHR request.
Resources
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
AJAX has been around a long time.
0:00
Microsoft first introduced it in 1999 with
Internet Explorer 5.
0:02
Back then, it wasn't called AJAX and in
fact, AJAX isn't really its official name.
0:06
Technically, it's called a XMLHttpRequest
Object.
0:12
It's sometimes shortened to just XHR.
0:17
Put simply, AJAX is the process of using
JavaScript to send a request to
0:20
a web server, and receive a response back,
and then do something with that response.
0:24
What you send to the web server with AJAX
can be a simple request for a
0:30
webpage, a text file, a search sent to
0:34
a database, or a complete form full of
information.
0:37
Let's look at a simple example.
0:40
Say you wanted to let someone sign up for
your website's newsletter.
0:42
The sign up process should be simple,
painless and most importantly, fast.
0:46
So, you add a little sign up button to the
homepage.
0:50
When the visitor clicks the button, a form
slides down.
0:53
When the visitor fills out the form and
hits the Submit button,
0:57
the page doesn't disappear and the visitor
isn't taken away to another webpage.
1:00
Instead, and here's the AJAX part, the
sign up information
1:06
is sent to the server, which processes
that in some way.
1:09
For example, adds the email address to its
database.
1:13
Then the server sends back a response.
1:16
This might be a simple message like
Success or Email Added.
1:19
The page then displays a message to the
visitor like You're all signed up.
1:23
Although the term AJAX isn't any official
technology,
1:28
it's a lot easier to pronounce than
XMLHttpRequest Object.
1:31
It's also a good way to think about how
this technology works.
1:36
Let's start with the J in AJAX since
that's the easiest to understand.
1:40
[SOUND] JavaScript is the programming
language you
1:44
use to make all this AJAX stuff happen.
1:48
You use JavaScript to send out an AJAX
request, you use JavaScript
1:50
to process the incoming response, and you
use JavaScript to update your webpage.
1:55
The first A is for asynchronous and refers
to
2:00
how the request is sent to the web server.
2:03
When a web browser makes an AJAX request,
it doesn't
2:06
stop everything it's doing and just wait
for a response.
2:09
That would freeze your browser and you
wouldn't be able to anything
2:12
until the response came back, if the
server ever did send a response.
2:16
Sometimes they don't.
2:20
Asynchronous requests are sent without
waiting.
2:22
The user can keep mousing around the
webpage.
2:25
Your JavaScript program will keep running
and only when the response
2:27
comes back from web server will your
program do something with it.
2:31
In fact, you can send out multiple AJAX
requests, and even though you send
2:35
each request, one after another, you won't
know which request will come back first.
2:40
The speed of the server, the complexity of
the request, and any internet traffic
2:45
all play a part in determining when
2:50
a request returns information to the
browser.
2:52
The X in AJAX stands for XML or Extensible
Markup Language.
2:56
XML also appears in the official name for
this technology, XMLHttpRequest Object.
3:01
Original, XML was seen as the format
server responses should be sent
3:08
in, but it's not the only format you can
receive data in.
3:12
In fact, as we'll see in the next stage,
it's
3:16
not even the most common or preferred
format any longer.
3:18
You use JavaScript to prepare a request,
send it, and process the response.
3:23
You can break the AJAX programming process
into four steps.
3:28
First, create an XMLHTTP Request object.
3:32
This step tells the web browser to get
ready.
3:37
You want to send an AJAX request and the
web browser needs to create
3:39
an object that has all the methods you'll
need to send and receive data.
3:43
Two, define a callback function.
3:48
This is the programming you want to run
when the server returns its response.
3:51
The callback is where you process the
returned
3:56
data and update the HTML on the page.
3:58
In the case of Google Maps, for example,
the callback function updates the
4:01
map on the screen after the server sends
new map tiles to the browser.
4:05
Third, open a request.
4:11
In this step, you give the browser two
4:13
pieces of information, the method the
browser will use
4:15
to send the request, usually either get or
4:18
post, and the URL where the request is
sent.
4:21
Four, send the request.
4:25
The last step is finally sending off the
request.
4:27
The previous three steps gave the web
browser all the information it
4:30
needs so we can finally send off the
request to the web server.
4:34
All right, it's time to program.
4:38
In the next video, I'll take you through a
working example of a simple AJAX request.
4:40
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