- Introducing AJAX 4:47
- Review: AJAX Basics 5 questions
- How AJAX Works 4:45
- Review: How AJAX Works 5 questions
- A Simple AJAX Example 10:46
- Create an XMLHttpRequest Object 1 objective
- Finish the AJAX Request 2 objectives
- GET and POST 6:21
- Review HTTP Methods 5 questions
- AJAX Response Formats 3:42
- Review AJAX Response Formats 4 questions
- Create an XML File 3 objectives
- Finish the XML Document 1 objective
- AJAX Security Limitations 5:16
- Review AJAX Security Limitations 5 questions
Preview
Video Player
00:00
00:00
Introducing AJAX
4:47Introducing Asynchronous JavaScript and XML, or AJAX. How it works, who uses it, and why you should learn it.
[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