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
Introducing Asynchronous JavaScript and XML, or AJAX. How it works, who uses it, and why you should learn it.
Backend Development at Treehouse
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
[MUSIC]
0:00
Hi, I'm Dave, and welcome to AJAX Basics.
0:04
AJAX stands for
Asynchronous JavaScript and XML.
0:07
It sounds complicated, but
it doesn't have to be.
0:11
In fact, as a concept, it's really simple.
0:13
AJAX lets you update HTML
without loading a new webpage.
0:16
If you've ever used Google Maps,
Gmail, Facebook, Twitter and yes,
0:21
Treehouse, you've seen AJAX in action.
0:25
When you first visit Google Maps, for
example, the entire page loads with a map,
0:28
a search box, and
a few navigation buttons.
0:32
If you type a location into the search
box, You don't get a new web page.
0:35
You get a new map, and some of the user
interface elements change, but
0:43
you're still on the same web page.
0:47
As you drag, new parts of the map appear.
0:49
You can zoom in and you can zoom out,
and it all happens really quickly.
0:52
That's because just parts of
the page are being updated,
0:56
thanks to the power of AJAX.
1:00
Twitter is another website
that takes advantage of AJAX.
1:02
If you use Twitter, you may have noticed
as you scroll down to the bottom of
1:05
the page, older tweets appear.
1:09
It's a page that never ends.
1:11
That's all thanks to the power of AJAX,
1:13
loading more tweets whenever you
scroll to the bottom of the page.
1:15
New content without loading new web pages.
1:18
AJAX has lot of uses on
the popular entertainment news and
1:23
social networking site, Reddit.
1:26
Users can vote posts up and down,
1:28
helping to move the most popular
post to the top of the homepage.
1:30
When I click the up arrow on this post,
I cast my vote for it.
1:34
I don't leave the current web page, but
1:39
my vote is sent to the Reddit
server using AJAX.
1:41
We even do this on Treehouse.
1:44
In the forums, you can vote for
forum responses, vote them up or down.
1:47
This is a really good response,
so I'm gonna vote for it.
1:53
Again, AJAX is used to send
the vote to Treehouse's servers.
1:57
Usually, the way we get more web
content is to load a new web page.
2:01
You click a link, leave the current
web page, and load a new one.
2:05
Or on a form, you fill out a search box,
click Submit,
2:08
leave the current page, and
load a new page with results.
2:12
AJAX gives us another faster and more
user-friendly way to update our web pages.
2:15
Instead of jumping to a new web page
every time we want new information,
2:21
AJAX lets you build you web pages that
ask for information from a web server.
2:25
The web server returns data
to the web browser, and
2:30
JavaScript processes that data to
selectively change parts of the web page.
2:34
The amount of data the server returns is
usually much less than that sent when you
2:39
ask for a full web page.
2:43
Another reason why AJAX requests can make
your pages feel fast and responsive.
2:45
The process of asking a server for
2:51
information is technically called
making a request of the server.
2:53
And when the server sends back its answer,
that's called a response.
2:58
Keep those two words in mind.
3:02
The web is built upon browsers,
also called clients,
3:03
sending requests to web servers,
and servers sending responses back.
3:08
You can actually see AJAX in action
using the JavaScript console in most web
3:13
browsers.
3:18
For example, in Chrome, you can open
the JavaScript console by clicking
3:19
the Settings button, choosing Tools,
and JavaScript Console.
3:24
This opens the console in the bottom
part of the browser window.
3:28
To view every single AJAX request,
right-click, or
3:32
Ctrl-click if you're on a Mac, in the
console, and choose Log XMLHttpRequests.
3:36
Now, as I grab the map and drag around,
3:43
you'll see AJAX requests
listed in the console.
3:45
You see them here listed as XHR,
short for XML HTTP requests.
3:49
Each request summons new content for
the map.
3:56
As you can see,
there's a whole lot of AJAX going on here.
3:59
AJAX is an important technology
that all web designers and
4:03
developers should know about.
4:06
In this course, you'll learn how to use
JavaScript to add AJAX to your webpages.
4:08
I won't be covering how to program with
the server-side part of the AJAX equation.
4:13
That requires one of the many server
side programming languages and
4:18
frameworks, like Ruby on Rails,
PHP, Python, Java, .NET, and so on.
4:23
We have lots of videos that can help
with that, check the teacher's notes.
4:28
With AJAX and
your web development tool kit,
4:33
you'll be able to build web
pages that feel more responsive.
4:35
Don't waste your user's time with
annoying page refreshes, and
4:39
act more like desktop applications.
4:43
Let's learn how AJAX works.
4:45
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