Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed AJAX Basics!
You have completed AJAX Basics!
Preview
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