New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

jQuery Essential Training
Illustration by
Watching:

Working with Asynchronous JavaScript and XML (AJAX)


From:

jQuery Essential Training

with Joe Marini

Video: Working with Asynchronous JavaScript and XML (AJAX)

It's time to talk about AJAX. AJAX is used all over the web these days. Using AJAX, your web pages can retrieve data from remote services and communicate with your web server without having to reload the entire page. Over the past several years AJAX has become one of the foundations of building modern web applications. jQuery makes working with AJAX really, really easy. If you're not familiar with AJAX, I highly suggest that you go take a look at Ray Villalobos's JavaScript and AJAX title, which is right here on lynda.com. I have got it up right here in the browser so you can see it. I am not going to go deeply into AJAX and what it is and how it works, because Ray has already done that, and I highly suggest you watch this title if you need to get familiar with AJAX. The other thing I want to point out is that I'm going to be using a different tool in this chapter. I am going to be using a tool called Aptana Studio, and that's this tool right here. And the reason I'm going to be using Aptana Studio is because it has a built-in local web server that I can use for testing. So I don't have to upload my pages to my web server in order to test out the AJAX functionality; I can just do it right here on my local machine using the local web server that Aptana Studio has built-in. You don't have to use this if you want to. You can follow along with me, and you can post your files up to your web server, or use a local web server that you may already have configured on your local computer. That's up to you. I'm going to be using Aptana because I happen to like the tool, and it has a built-in local web server. And if you want to use it, I also recorded a title here on lynda.com, Up and Running with Aptana Studio 3. If you want to learn how to use Aptana Studio, it's a completely free product. It's a really great editor. I've covered how to use it in this title here. It's only about an hour and half long. Let's go back to Aptana Studio. So here in Aptana Studio I have imported my exercise files as a project here, and I'm going to open up the basic_start file. And what we are going to show is how to use the AJAX function. Now, jQuery provides a whole bunch of AJAX-related functions. In fact let's go back out to the browser, and let's head over to api.jquery.com, and we will scroll down to the AJAX section. So AJAX has a low-level interface that we are going to be looking at called the AJAX function. That's this right here. And the AJAX function performs an asynchronous HTTP request to the server. And there is a whole bunch of settings and properties that you can pass to the function. I am going to scroll down to some of these. Again, I'm not to go over all of these because some of these are pretty advanced, and some of them you'll probably never touch in your development. But you can see that there's quite a few of them. But the way that it works is you simply use the $.ajax function to simply make a request to a server and get a response back, and that's what we are going to do in our example. So let's jump back to the code. Now, there's a couple things I have that you should be aware of. I have got two different helper sample data files here. This one is testdata.txt. This one is testxmldata.xml. And we'll be using both of these in this chapter as the files that we'll be retrieving from our server, in this case a local test server. Okay, so let's close that for now. Let's go back to basic_start. Here we are in the page, and you can see that in my document's ready function I have a function here called getData. getData is the function that we are going to fill out that's going to retrieve data from the server. Here in the getData function what I am going to do is type $.ajax, and then inside this function I'm going to pass a whole bunch of properties, so let's go ahead and do that. The first thing I'm going to pass in is a property called the URL. This is the URL of the data that I want to get information from. In this case, I am just going to use the testdata.txt file, and you can see it's at the same level in the folder as this HTML page is, so I don't have to write any path. I am just going to say testdata.txt. So that's the first one. The next property I am going to put in is what kind of request this is, and that's the type property. It can either be get or it can be post, depending on what kind of HTTP request you're going to use. Get requests are usually used for operations that are not destructive; in other words they don't change data on the server. If I was going to be changing data on the server, instead of using get I would use post. But that's not what I'm doing. I am simply retrieving data, so I am going to use get and leave that the way that it is. Then I'm going to specify what kind of data I expect to get back, and that is dataType. Now, dataType could be a bunch of different things. It can be text. It can be a ray buffer. It can be a whole bunch of things to represent binary data. I am just going to say text because I'm expecting to get text data back, and you can see here that that's exactly what this is. It's just textual data. Now I've specified the major pieces that I need to specify. The only thing to do now is tell jQuery what to do when things go right and when things go wrong. I am going to say on success you should call the successFn, which is this function right here. And then if something goes wrong, error, you should call the errorFn, which is this function right here. The next thing I am going to do is say, you know what, no matter what happens, whether things went right or whether things went wrong, there is another function you should call, and that's called complete, and on complete I am going to supply a function just directly in line here, and it's going to take the XML HTTP request object along with a status indicator. And this function is just going to say console.log. The request is complete, and we will close that off. All right, we are requesting the text data. We are using a get request. We are expecting to get text back, and we've got functions for when things go right, functions for when things go wrong, and a function that just gets called regardless. All right, now in the success function we need to say what to do with the data that comes back. So when this function gets called, result is going to be the data that came back from the server. What I am going to in that case is, if you look down here in my document, I have got a paragraph with an ID of content. So what I am going to do is use jQuery to get a reference to that content paragraph, and I am going to use the append function to append the result data into that paragraph, so now I am going to save it. What I am going to do now is I'm going to run this in my local web server, and in Aptana Studio I can do that up here my Run menu. I can run it using a variety of different browsers that I have using the local server. If this looks different for you, that's okay. You can always look at the run configurations here, and down here in the web browser section you can add your own local server with whatever browser you happen to be using. The instructions are right here, so let me close this. What I am going to do is run this using Chrome as my local server. So let's go ahead and do that, and you can see that here in the document, this is the paragraph with this gray outline around it. You can see that this is some text data. This is the contents of that test data file that was on the server. So the AJAX function went out and requested the data, got it, came back, and put it in this paragraph. Just to show you that that's what's happening, let's bring up the Developer Tools in Chrome. Here is my Developer Tools. And what I'm going to is I am just going to crank up the font size a little bit so you can see what's going on in here, and I'll just make this a little bit wider, alright, okay. And over here in the sources what I am going to do is put a breakpoint right here. So I will put a breakpoint right there. Let's refresh it and see what happens. Okay, so we are going to refresh, and you can see that the breakpoint has now been hit where the AJAX function is about to get called. Okay, so there is the AJAX object. It's going to be looking for the testdata.txt, okay. So now we have breakpoint down here in the success function, and we'll see what result is when the function gets called and comes back. All right, so I am going to go ahead and click Run, and you can see that now we have hit the breakpoint here in the success function, and if I scroll over and hover over this result, you can see that that's the same content of that test data file that we have on the server. So the server came back, and we have a result of okay, and we're just going to go ahead and append that result into the paragraph, so let's step right. And I am going to step over this function. Now, watch up here in the paragraph, when we step over and you can see that that data got inserted in. That's essentially how you use the base AJAX function in jQuery to retrieve data from a server.
Expand all | Collapse all
  1. 2m 52s
    1. Welcome
      1m 9s
    2. Using the exercise files
      1m 43s
  2. 17m 37s
    1. What is jQuery?
      5m 19s
    2. Downloading and installing jQuery
      2m 20s
    3. Creating a simple jQuery-enabled page
      7m 12s
    4. Overview of features in jQuery
      2m 46s
  3. 59m 57s
    1. Overview of selectors and filters
      2m 9s
    2. Using basic jQuery selectors
      9m 6s
    3. Using basic jQuery filters
      8m 35s
    4. Using jQuery attribute filters
      6m 7s
    5. Child, visibility, and content filters
      9m 59s
    6. Form selectors and filters
      9m 3s
    7. Traversing documents
      9m 1s
    8. Understanding jQuery statement chaining
      1m 42s
    9. Practical example 1: Annotating page links
      4m 15s
  4. 47m 16s
    1. Creating, getting, and setting content
      5m 53s
    2. Manipulating attributes
      5m 43s
    3. Inserting content
      4m 57s
    4. Wrapping, replacing, and removing content
      5m 27s
    5. Working with CSS
      6m 19s
    6. Associating data with page elements
      9m 30s
    7. Practical example 2: Automatic TOC generator
      9m 27s
  5. 33m 6s
    1. Understanding the jQuery event handling features
      2m 4s
    2. Binding and unbinding events
      6m 23s
    3. Convenient event helper methods
      4m 40s
    4. Using the jQuery event object
      6m 21s
    5. Using miscellaneous event features
      4m 38s
    6. Practical example 3: Table striping and highlighting
      9m 0s
  6. 28m 45s
    1. Hiding and showing elements
      5m 23s
    2. Fading elements in and out
      4m 2s
    3. Sliding elements
      4m 3s
    4. Creating custom animations
      5m 58s
    5. Practical example 4: Image rotator
      9m 19s
  7. 25m 30s
    1. Introduction to jQuery UI
      3m 40s
    2. Exploring the jQuery UI widgets
      5m 24s
    3. Exploring the jQuery UI effects
      3m 58s
    4. Using the jQuery UI ThemeRoller
      4m 11s
    5. Downloading and installing jQuery UI
      8m 17s
  8. 47m 49s
    1. Overview of the sample web site
      3m 50s
    2. Using the accordion widget
      9m 14s
    3. Creating an image rotator
      10m 22s
    4. Building hover tooltips
      7m 26s
    5. Making an image selector
      9m 30s
    6. Using the Resizable effect
      7m 27s
  9. 30m 2s
    1. Working with Asynchronous JavaScript and XML (AJAX)
      10m 8s
    2. Using AJAX helpers
      4m 34s
    3. Understanding AJAX data types
      10m 14s
    4. Using global AJAX event handlers
      5m 6s
  10. 20s
    1. Goodbye
      20s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
jQuery Essential Training
4h 53m Beginner Sep 01, 2009 Updated May 24, 2013

Viewers: in countries Watching now:

In jQuery Essential Training, Microsoft professional Joe Marini presents the power of the jQuery library, an open-source JavaScript project that greatly simplifies the process of adding advanced functionality to web sites. Joe teaches how to use these new features to build pages that work across browsers with the functionality that users (and clients) are looking for, from complex animation effects to dynamic page formatting. Joe pulls all of this together, showing how the jQuery UI plug-in can expand and streamline the capability of jQuery, and then integrating jQuery design tools into a complete sample web site. Exercise files accompany the course.

Topics include:
  • Constructing jQuery selectors and filters to gather information from web pages
  • Creating, inserting, and manipulating web page content
  • Understanding jQuery statement chaining
  • Building event handlers that work across browsers
  • Working with jQuery effects, such as showing, hiding, and fading page elements
  • Creating custom animations with specialized properties and options
  • Using the jQuery UI plug-in to give pages a polished look
Subjects:
Developer Web Web Design Web Development
Software:
jQuery
Author:
Joe Marini

Working with Asynchronous JavaScript and XML (AJAX)

It's time to talk about AJAX. AJAX is used all over the web these days. Using AJAX, your web pages can retrieve data from remote services and communicate with your web server without having to reload the entire page. Over the past several years AJAX has become one of the foundations of building modern web applications. jQuery makes working with AJAX really, really easy. If you're not familiar with AJAX, I highly suggest that you go take a look at Ray Villalobos's JavaScript and AJAX title, which is right here on lynda.com. I have got it up right here in the browser so you can see it. I am not going to go deeply into AJAX and what it is and how it works, because Ray has already done that, and I highly suggest you watch this title if you need to get familiar with AJAX. The other thing I want to point out is that I'm going to be using a different tool in this chapter. I am going to be using a tool called Aptana Studio, and that's this tool right here. And the reason I'm going to be using Aptana Studio is because it has a built-in local web server that I can use for testing. So I don't have to upload my pages to my web server in order to test out the AJAX functionality; I can just do it right here on my local machine using the local web server that Aptana Studio has built-in. You don't have to use this if you want to. You can follow along with me, and you can post your files up to your web server, or use a local web server that you may already have configured on your local computer. That's up to you. I'm going to be using Aptana because I happen to like the tool, and it has a built-in local web server. And if you want to use it, I also recorded a title here on lynda.com, Up and Running with Aptana Studio 3. If you want to learn how to use Aptana Studio, it's a completely free product. It's a really great editor. I've covered how to use it in this title here. It's only about an hour and half long. Let's go back to Aptana Studio. So here in Aptana Studio I have imported my exercise files as a project here, and I'm going to open up the basic_start file. And what we are going to show is how to use the AJAX function. Now, jQuery provides a whole bunch of AJAX-related functions. In fact let's go back out to the browser, and let's head over to api.jquery.com, and we will scroll down to the AJAX section. So AJAX has a low-level interface that we are going to be looking at called the AJAX function. That's this right here. And the AJAX function performs an asynchronous HTTP request to the server. And there is a whole bunch of settings and properties that you can pass to the function. I am going to scroll down to some of these. Again, I'm not to go over all of these because some of these are pretty advanced, and some of them you'll probably never touch in your development. But you can see that there's quite a few of them. But the way that it works is you simply use the $.ajax function to simply make a request to a server and get a response back, and that's what we are going to do in our example. So let's jump back to the code. Now, there's a couple things I have that you should be aware of. I have got two different helper sample data files here. This one is testdata.txt. This one is testxmldata.xml. And we'll be using both of these in this chapter as the files that we'll be retrieving from our server, in this case a local test server. Okay, so let's close that for now. Let's go back to basic_start. Here we are in the page, and you can see that in my document's ready function I have a function here called getData. getData is the function that we are going to fill out that's going to retrieve data from the server. Here in the getData function what I am going to do is type $.ajax, and then inside this function I'm going to pass a whole bunch of properties, so let's go ahead and do that. The first thing I'm going to pass in is a property called the URL. This is the URL of the data that I want to get information from. In this case, I am just going to use the testdata.txt file, and you can see it's at the same level in the folder as this HTML page is, so I don't have to write any path. I am just going to say testdata.txt. So that's the first one. The next property I am going to put in is what kind of request this is, and that's the type property. It can either be get or it can be post, depending on what kind of HTTP request you're going to use. Get requests are usually used for operations that are not destructive; in other words they don't change data on the server. If I was going to be changing data on the server, instead of using get I would use post. But that's not what I'm doing. I am simply retrieving data, so I am going to use get and leave that the way that it is. Then I'm going to specify what kind of data I expect to get back, and that is dataType. Now, dataType could be a bunch of different things. It can be text. It can be a ray buffer. It can be a whole bunch of things to represent binary data. I am just going to say text because I'm expecting to get text data back, and you can see here that that's exactly what this is. It's just textual data. Now I've specified the major pieces that I need to specify. The only thing to do now is tell jQuery what to do when things go right and when things go wrong. I am going to say on success you should call the successFn, which is this function right here. And then if something goes wrong, error, you should call the errorFn, which is this function right here. The next thing I am going to do is say, you know what, no matter what happens, whether things went right or whether things went wrong, there is another function you should call, and that's called complete, and on complete I am going to supply a function just directly in line here, and it's going to take the XML HTTP request object along with a status indicator. And this function is just going to say console.log. The request is complete, and we will close that off. All right, we are requesting the text data. We are using a get request. We are expecting to get text back, and we've got functions for when things go right, functions for when things go wrong, and a function that just gets called regardless. All right, now in the success function we need to say what to do with the data that comes back. So when this function gets called, result is going to be the data that came back from the server. What I am going to in that case is, if you look down here in my document, I have got a paragraph with an ID of content. So what I am going to do is use jQuery to get a reference to that content paragraph, and I am going to use the append function to append the result data into that paragraph, so now I am going to save it. What I am going to do now is I'm going to run this in my local web server, and in Aptana Studio I can do that up here my Run menu. I can run it using a variety of different browsers that I have using the local server. If this looks different for you, that's okay. You can always look at the run configurations here, and down here in the web browser section you can add your own local server with whatever browser you happen to be using. The instructions are right here, so let me close this. What I am going to do is run this using Chrome as my local server. So let's go ahead and do that, and you can see that here in the document, this is the paragraph with this gray outline around it. You can see that this is some text data. This is the contents of that test data file that was on the server. So the AJAX function went out and requested the data, got it, came back, and put it in this paragraph. Just to show you that that's what's happening, let's bring up the Developer Tools in Chrome. Here is my Developer Tools. And what I'm going to is I am just going to crank up the font size a little bit so you can see what's going on in here, and I'll just make this a little bit wider, alright, okay. And over here in the sources what I am going to do is put a breakpoint right here. So I will put a breakpoint right there. Let's refresh it and see what happens. Okay, so we are going to refresh, and you can see that the breakpoint has now been hit where the AJAX function is about to get called. Okay, so there is the AJAX object. It's going to be looking for the testdata.txt, okay. So now we have breakpoint down here in the success function, and we'll see what result is when the function gets called and comes back. All right, so I am going to go ahead and click Run, and you can see that now we have hit the breakpoint here in the success function, and if I scroll over and hover over this result, you can see that that's the same content of that test data file that we have on the server. So the server came back, and we have a result of okay, and we're just going to go ahead and append that result into the paragraph, so let's step right. And I am going to step over this function. Now, watch up here in the paragraph, when we step over and you can see that that data got inserted in. That's essentially how you use the base AJAX function in jQuery to retrieve data from a server.

Find answers to the most frequently asked questions about jQuery Essential Training.


Expand all | Collapse all
please wait ...
Q: When attempting to download jQuery, as the author does in the movie “Downloading and installing jQuery,” the file does not download. When any of the links on the download page are clicked, the browser opens a page of code instead.
A: This sometimes happens when a web browser doesn't have the proper MIME type to prompt the user to download the file instead of open it directly. Therefore, the browser is opening the code instead of downloading it. If this occurs, download the file on a by Control-clicking (Mac) or right-clicking (Windows) on the download link and choosing the Save File option, which will download it to the computer.
Q: Why do some of the examples use the form $("document") instead of just $(document)?
A: jQuery's $(document).ready() function will work with either form. As a reminder, you can also just use the $() shorthand to accomplish the same thing:
 
$(function() {
// code to run when the document is ready
});
Q: I am stuck on the first exercise in Chapter 1, video 3 "Creating a simple jQuery enabled page".

Your example javascript code, both in the movie and in the exercise files,
reads as follows:

<script type="text/javascript">
$("document").ready(function() {
alert("The page just loaded!");
});
</script>

This is not working for me.
A: After jQuery 1.3.2, a change was made where quotes were no
longer needed around the "document" argument to the jQuery $() function.

Type the following instead.

<script type="text/javascript">
$(document).ready(function() {
alert("The page just loaded!");
});
</script>
Q: How do I remove the resize handle that appears on on <textarea> elements in some browsers, such as Firefox and Chrome?
A: Some browsers automatically provide this feature for these text elements. You can disable this feature using CSS by providing a style rule for the element that specifies no resize behavior. Add the rule "resize: none;" to a stylesheet that is applied to the textarea, and the resize handle will not appear.

Q: This course was updated on 5/24/2013. What changed?

A: This update includes a new chapter on the jQuery AJAX features, new movies on associating data with page elements, and updates to the chapters on events and the jQuery UI plugin to reflect changes in JQuery 1.8.
Q: In Chapter 7, for the "Using the Resizable effect" movie, the example code from the Groundswell_Final and Groundswell_Start folders isn't limiting the width of the window. What should I do?
A: There's a bug in the example file. You need to add: 
textarea { resize:none;}

to the main.css file in the _css folder, and change the link tag in register.htm from:

<link href="../_css/sunny/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="screen, projection" />

to

<link href="../_css/sunny/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" media="screen, projection" />

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed jQuery Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.