Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The jQuery AJAX library provides a set of global AJAX event handlers that you can use to register functions to listen in for interesting events that take place during the lifecycle of an AJAX request on a given page. Here in the API documentation let's go ahead and click on the global AJAX event handlers, and you can see that there is about a half dozen functions that you can use to register events for when something interesting happens in an AJAX request. Now again, these are not functions that you call; these are functions that get called for you.
And so for example, you use the AJAX send function to register an event handler that gets called when an AJAX request is about to be sent. And again, these are global, so these are for all of the AJAX requests on your page. So for example, you might use the ajaxStart and ajaxComplete events to show some kind of user interface on your webpage to let the user know that there is an AJAX request taking place, and that they need to be patient while data is retrieved from the server.
You might use, for example, the ajaxError event handler to centralize all of your error handling rather than attach individual error functions to each one of your requests. Let's take a look at these events in action. We're going to jump over to the code here, and here in my code I've got Globals_Finished up in my editor, and that's this file right here. So you can see that I've got a whole bunch of functions. There is Start. There is Stop. There is Send, Complete, Error, and Success.
So I've registered functions, and basically what I am doing in each one of these functions is just using the developer console to log some message about something happening with AJAX. And then after all of these global event handlers have their functions registered, I call this get data function right here. And getData, all it's doing is using the get shorthand method to get the testdata.txt file, which we've been using in this chapter, and there is a successFn right here. And in the successFn we just simply log out that the result is being set, and we put the contents of the result parameter right here, into this content paragraph right here.
So let's save that. Let's bring this up in the browser, and let's see what happens. So I am going to run this in my local server. So you can see that "This is some text data." got set into that paragraph. Let's bring up the Developer Tools, and let's switch over to the Console, and you can see that in the order in which things happened, each one of those event handlers put out a little string to the Developer Console. So right here we have AJAX is starting and then it says About to request data and then Setting the result and then it says Looks like everything worked! Everything's finished! The AJAX request ended.
And if we go back to the code--let's scroll up-- you can see that those strings correspond to each one of these functions. So for ajaxStart it says AJAX starting, and then ajaxStop it says AJAX request ended and so on and so forth. Using these global event handlers, you can register events that will get called for every single AJAX request. In fact, let's take a look at what happens when an error occurs, and we have our ajaxError handler right here. And this function takes some parameters. So do the other ones as well, but they're optional, and I'm not using them in this example.
But here in the case of ajaxError, we have parameters for the event, the jqXHR object, any of the AJAX settings, and the actual error that happened. So let's scroll down, and make a request for a file that we know doesn't exist, right. So testdata1.txt is not real, so let's save that and then let's go back to the browser, and now let's refresh the page, and you can see that it didn't work. When we bring up the Developer Tools, right here we have our AJAX starting. It says About to request data, but then you could see that there was an error.
It seems like requesting testdata1.txt was a problem. If we expand that out, we can see that there was a whole bunch of things that took place in here, right, and then it says, Hmmm. seems that there was a problem and then not found. But you can still see that Everything's finished! and AJAX request ended functions still completed. So let's go back to the code. In this case, rather than the ajaxSuccess function being called that says looks like everything worked, this time the AJAX error function got called and it says Hmm.
Seems Like there was a problem, and the not found message is passed in by jQuery as the error of why things went wrong. These global event handlers in many ways provide some nice centralization of AJAX functionality so that you can provide some really great user experience to your users like global settings of showing when requests are in progress, or centralized error handling, and it really makes working with AJAX and jQuery a lot easier.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96859 Viewers
56 Video lessons · 110556 Viewers
71 Video lessons · 79396 Viewers
131 Video lessons · 38084 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.