Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Sometimes servers don't behave how we expect them to. Learn how to use jQuery to handle server errors that arise during AJAX requests.
-
0:00
When communicating with a web server, problems can arise.
-
0:03
You may use AJAX to request a file that's not on the server, or
-
0:07
the server might encounter a technical error
-
0:09
and be unable to process your request.
-
0:11
jQuery's AJAX functions fail silently.
-
0:14
Meaning, there won't be any big error when a request fails, but this also means
-
0:19
the success callback, which processes the response
-
0:22
and updates the webpage, won't do anything either.
-
0:26
In many cases, that might be okay, but sometimes you
-
0:28
want to let your users know when there's a problem.
-
0:32
For example, say you're building an AJAX-driven chat application.
-
0:36
Users can type a message into a form field,
-
0:39
hit Submit, and the message is sent to the server.
-
0:42
On the other end of the conversation,
-
0:43
another user also has the chat application.
-
0:46
Using AJAX requests, any new messages from the server are
-
0:50
delivered and the webpage is updated with the new message.
-
0:54
But what if there's a problem?
-
0:55
The server isn't working and can't receive a
-
0:57
new chat message, or it can't send that message.
-
1:00
In this case, it's a good idea to notify the users of the problem.
-
1:04
Otherwise, they'll think the other person in the chat is ignoring them.
-
1:08
For each of jQuery's AJAX methods, like the get, post, load
-
1:11
and AJAX methods, there is an additional method to handle any problems.
-
1:16
Its purpose is to run a function when an AJAX request fails.
-
1:20
Let's see how this works.
-
1:22
Say you're using jQuery's $.get method.
-
1:25
This method makes a basic get request to the server and receives a response.
-
1:29
For example.
-
1:30
[BLANK_AUDIO]
-
1:39
This code loads the contents of the file missing.html into an
-
1:44
HTML tag on the page that has the ID of mydiv.
-
1:48
If the server has a problem or that file is missing,
-
1:51
you can add a function that runs only when the request fails.
-
1:55
jQuery's fail method can be tagged directly to the end
-
1:58
of any of jQuery's AJAX methods, except the .load method.
-
2:03
jQuery supports a process known as chaining, where some methods can
-
2:06
be tacked on directly at the end of the last method.
-
2:09
In this case, we can simply add .fail to the end of .get.
-
2:15
The fail method takes a single argument, a
-
2:17
callback function that's run when the request fails.
-
2:21
jQuery passes several arguments to this callback, but the only one that's
-
2:25
really useful is the first argument, which is a jQuery XHR object.
-
2:30
The jQuery XHR object is an enhanced version of a regular XML HTTP
-
2:35
request object, which you learned about in the second stage of this course.
-
2:39
jQuery provides a bunch of extra
-
2:41
properties that are useful for AJAX programming.
-
2:44
The jQuery XHR object contains some important information about the error.
-
2:48
For example, you can retrieve the HTTP error code.
-
2:52
Let's see what happens when we wrap this in an alert function,.
-
2:54
[BLANK_AUDIO]
-
3:02
And preview the page.
-
3:03
[BLANK_AUDIO]
-
3:10
404, that's a file not found error code.
-
3:14
The server also sends text, like not found, or internal
-
3:18
server error, and that's stored in a property named statustext.
-
3:22
[BLANK_AUDIO]
-
3:24
You can use that information to explain the error to the user.
-
3:28
For example, if you wanted to print out the error
-
3:30
message when the get method fails, you could do this.
-
3:33
[BLANK_AUDIO]
-
3:52
If you simply want to print something to the
-
3:54
page when there's an error, there's an even easier way.
-
3:57
[BLANK_AUDIO]
-
4:31
One thing to keep in mind about jQuery's
-
4:33
fail method, it doesn't work for $.load method, and
-
4:37
it doesn't work for remote AJAX requests that use
-
4:40
JSONP that is request to a different web server.
-
4:43
So if you're using AJAX to download tweets from Twitter
-
4:46
or photos from Flickr, the fail method won't ever run.
-
4:49
For those cases, you need to check the response in
-
4:52
the normal success callback to see how the server responded.
-
4:56
Errors do happen, so it's a good idea to plan for them.
-
4:59
When the AJAX functionality isn't critical to
-
5:02
the webpage, for example, you're using it just
-
5:05
to display the current weather, it's fine to
-
5:07
just let a bad AJAX request fail silently.
-
5:10
But in cases where the AJAX request and response
-
5:13
are important to the usability of the page, it's
-
5:15
a good idea to use the fail method to
-
5:18
let your site visitors know when there's a problem.
You need to sign up for Treehouse in order to download course files.
Sign up