Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In addition to the basic AJAX function, jQuery provides a set of shorthand helper methods that help cover some common scenarios that arise when using AJAX with jQuery, and we're going to take a look at a couple of those now. So here in the jQuery API documentation, I'm going to click in the AJAX section on the Shorthand Methods. You can see there is a small set of these. The get function loads data from the server using an HTTP get request, and that's sort of like using the AJAX function with the type property of get, only this is a shorter more convenient way of doing that.
So let's take a look at the get function. The get function takes a URL and it takes any data that you want to send to the server--so these could be you know URL- encoded properties that would normally be sent on the query string. And then there's a function to call and case things are successful, and then there is an optional dataType. Now if you don't provide a dataType, the jQuery library will just simply try to make an intelligent guess as to what kind of data you're looking to come back, either XML JSON, text, whatever. This is a pretty simple function to use.
Let's go back over to our code and take a look at an example of using it. So here in Aptana Studio, I've got my Helpers_start document open, and it looks pretty similar to the one that we used in the previous movie for the AJAX function. Here, on my document ready function, I have a function called getData, and getData is what we're going to fill out. Now, last time when we did this-- remember we did $.ajax and that's not we're going to be doing this time. This time we are going to be using the get function.
And to do that I am simply going to write $.get, or of course I could have written you know jQuery.get, but dollar sign is more convenient. So I write $.get, and I am going to get the same text file, so it's going to be testdata.txt. And then I need to give the name of the success function and that's this function right here, successFn. When successFn is called, the result will be the data that came back from the server, and then we're going to get a reference to our content paragraph, which is right here and put the result inside of it.
Okay, so we're going to save this, and then once again, using Aptana Studio, I am going to run this using my local web server. And you can do this however you want to. You can post this to whatever server you use it for testing or whatever IDE you happen to be using. But I am going to run this using my local server here in Aptana, so I'll bring it up in Chrome, and you can see that what's happening is the result is coming back from the server and being placed into the paragraph. All right, so let's go back to the code. Now, it turns out that this combination right here of getting data and then using the successFn to put the result into an element on the page is so common that jQuery actually gives you a shorthand way just of doing that, and so let's go back up here to get data and comment this out.
What we're going to do this time is simply, on the element itself, dollar sign and we're going to get the content paragraph, we're going to call the load function. And the load function will actually go out and kick off an AJAX request, and we're going to ask for testdata.txt. Now, that's all that we need to do. So this right here, load, is going to go out to the server, look for this URL, take the result, and put it into whatever element matches this selector right here.
So we are going to save, and just to be sure that we're not somehow triggering the successFn, let's go ahead and comment that out. So we'll save and we'll run this again using the internal server, and you can see that it worked. So we refresh, and you can see that the text data is coming back from the server and being put into the element on the page all with one line of code. So if you have a need to use AJAX that fits one of these comment scenarios then the jQuery AJAX helper functions can make your job a lot easier.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101038 Viewers
61 Video lessons · 87827 Viewers
71 Video lessons · 71703 Viewers
56 Video lessons · 103586 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.
Your file was successfully uploaded.