Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Working with Asynchronous JavaScript and XML (AJAX)

From: jQuery Essential Training

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.

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.

Show transcript

This video is part of

Image for jQuery Essential Training
jQuery Essential Training

49 video lessons · 96327 viewers

Joe Marini
Author

 
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

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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 Already a member? Log in

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 preferences from 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

Your file was successfully uploaded.

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.