- Introducing the Project 1:43
- AJAX Callbacks 6:51
- Review AJAX Callbacks 5 questions
- Create a callback 1 objective
- Check for the correct ready state 4 objectives
- Introducing JSON 5:52
- Review JSON 5 questions
- Create a JSON file 4 objectives
- Finish the JSON File 1 objective
- Parsing JSON Data 7:33
- Processing JSON Data 7:48
- Programming AJAX Challenge 1:52
- Programming AJAX Solution 2:51
- Review Parsing JSON 3 questions
Preview
Video Player
00:00
00:00
AJAX Callbacks
6:51Dig deeper into AJAX callbacks -- how they work and ways to check for errors from the server.
In this stage, we'll dig deeper into how
AJAX
0:00
works and look more at callbacks and
response formats.
0:02
But first, let's review the basics of
AJAX.
0:06
As you learned in the last stage, there
are four steps to an AJAX request.
0:10
First, create an XMLHTTP request object.
0:14
Second, create a callback function.
0:18
Third, open the request, and fourth, send
the request.
0:22
Most of the fun and most of
0:27
the programming happens in the callback
function.
0:28
A callback is the programming you want to
0:31
run when the server sends back its
response.
0:33
It's the programming that does something
with that
0:36
response like presenting a form's
successfully submitted message,
0:38
or adding a list of new tweets to the
page, or adding new tiles to a map.
0:43
Each stage of the AJAX process, from
creating an XML HTTP request
0:48
object, to opening a request, to sending
it, involves what's called a ready state.
0:53
When a browser reaches a new step in
1:00
the process, the ready state of the
request changes.
1:02
You create a callback that responds to a
change in that state.
1:05
Let's look at the code from the last
stage.
1:09
The function here is our callback
function.
1:13
It's also called an event handler.
1:16
The event in this case is
onreadystatechange.
1:18
Every time it fires, our function runs.
1:22
The XML HTTP request object's readyState
property holds a number from 0 to 4.
1:26
The number represents each state of the
AJAX request.
1:32
The numbers zero to three represent early
stages
1:36
in the AJAX process, from just after the
1:39
XML HTTP request object is created, 0, all
the way to when the response is coming, 3.
1:42
But most importantly for our program is a
ready state of 4.
1:49
That's when the web server has sent
everything it's going to send.
1:53
In other words, the ready state change
event
1:58
fires off multiple times in the process of
2:00
setting up and making an AJAX request, but
2:03
we're only concerned when the ready state
is 4.
2:06
That's what the conditional statement here
does.
2:09
We don't want to do anything until we've
received data from the web server.
2:13
However, sometimes checking for a ready
state of 4 isn't enough.
2:17
There are things that might go wrong.
2:20
For example, the web server can't connect
to a database.
2:22
Or the web program handling the request
crashes.
2:26
Or say the AJAX request pointed to a URL
that's
2:29
no longer around, so you get a file not
found error.
2:32
If there are errors like these, the web
browser won't receive any
2:35
useful information and we won't be able to
update our webpage correctly.
2:39
To handle possible errors, we can expand
the conditional statement a
2:43
bit by checking another property of the
request object, the status property.
2:46
The status property is a number sent from
the server.
2:54
200 means okay, and is the standard
response for a successful HTTP request.
2:57
Other numbers usually aren't good.
3:04
404 is the status for a file not found.
3:07
You would get a 401 response if you're not
authorized to access a
3:09
URL because it requires some kind of login
or other permissions to access.
3:12
A status of 500 pops up when the server
has some kind
3:18
of error, often the server-side program
3:21
that's processing the request isn't
working.
3:24
In our example here, any errors are
quietly ignored.
3:26
Nothing is printed to the webpage unless
we get a status of 200,
3:30
but you can add programming if you want to
deal with possible problems.
3:35
To do that, I'm gonna adjust the program
here a little bit.
3:42
And we'll leave our initial if statement,
which checks to
3:44
make sure that we've got a response from
the server.
3:49
Then we'll do another check inside that.
3:54
We'll see, hm, is the status 200?
3:56
If it is, everything's good and we'll
print to our document.
3:59
We can add additional conditional
statements checking to see if
4:03
the status is a 404, which is a file not
found.
4:08
Or check to see if it's a 500, which means
that the server had some kind of problem.
4:14
In here, I've just added JavaScript
comments, but you
4:21
can add real programming that would do
something else.
4:26
So for example, you could print to the
page when there's a
4:28
500 error saying that there's a server
problem, please try again later.
4:31
Or if it's 404, you could print a message
4:35
that says the file's not found, please
contact customer service.
4:37
Accompanying the status object is an
explanation of the status.
4:42
This is called status text.
4:46
For example, the status text for a status
value of 200 is okay.
4:49
The status text for a value of 404 is file
not found.
4:53
You can use the status text as part of
4:57
an error message that you display to the
user.
4:59
For example, you could pop up an alert
message when the
5:02
server turns anything but an okay or 200
status like this.
5:05
I'll just get rid of all this stuff and
leave
5:13
it with a single else, and add an alert
inside there.
5:15
So basically, if everything's okay, we
print to the page.
5:21
Otherwise, let's pop up an alert box.
5:24
To test this out, I'm gonna go to our open
method, and
5:27
change this to a page that doesn't exist,
and then preview this.
5:32
So now we see that Not Found is
5:41
the response that came back from the web
server.
5:43
In some cases, you won't need to display
any error message to your users.
5:47
For example, say you added a small box in
the
5:51
sidebar of a page to display the current
weather conditions.
5:54
You create the small widget with data you
5:58
received from an AJAX request to a weather
website.
6:00
If there's an error in this request,
simply don't display the widget.
6:04
No one will notice that it's not there and
you don't want to
6:08
distract your users with a message like,
couldn't get the local weather report.
6:11
However, other times you might want to
give the user feedback.
6:16
For example, if you submitted form data
using
6:20
AJAX and you get an error, you probably
should
6:22
print out a message on the page like,
6:25
could not complete the form submission,
please try again.
6:27
The AJAX example we've looked at here is
pretty simple.
6:31
So far we've just received a small chunk
of HTML and placed it
6:33
on the page, but HTML isn't the most
common data format for AJAX requests.
6:37
More commonly, we will be receiving data
in a format like XML, which
6:43
we looked at in the last stage, or JSON,
which I'll talk about next.
6:47