Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

How Do I: Make Ajax Calls Using jQuery?

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Microsoft] [] Hi, this is Chris Pels. In this video we're going to take a look at how you can use jQuery to make AJAX calls in your web site project. Let me do a little setup here. We need a sample web site that we can work with here in the demo. So add a new web site, and we're going to do this one in Visual Basic, but when you download sample source code you also get a C Sharp version. So create that site. We need to do just a couple things to this new site. Let me go in and we'll use the Default.aspx page to contain our JavaScript code, so that will become our demo page. Demo jQuery AJAX. And we'll just get rid of the rest of it. Now we're going to need a script tag in here for our JavaScript. You might put this off in a separate JS file as well, but we'll just have it all self-contained for the demo. We'll put it right here. We'll pick JavaScript as the type. We also need a reference to jQuery, so we'll go over here and take the jQuery file, drop that in. Let me just format the page. There we go. We also need a web service that we can call from jQuery, so what I'm going to do is I'm just going to create a separate little folder here. You don't need a folder called Services, but I find it's nice to separate out the services from the rest of the application. We'll go in here and we'll add a new item. We'll make a simple web service. Let me go down here. We'll just call this WebServiceAjax. One of the things we need to do is be able to call this from AJAX, and you can see this comment up here that says to allow this web service to be called using ASP.NET AJAX. The same would be true for jQuery, so we need to uncomment this line so we have this attribute on our service. Then we need our little service to return something for our test case, so let's go in here and let's just say this is weather related, so we'll call it GetWeather and we'll have it return Sunny. Now we'll go back over here to Default.aspx, and let's start doing the JavaScript and the AJAX call in jQuery. Here on the page let's add a few things. First let me put a div where we can insert the content of our AJAX call back to the server. I'll just give this an ID and we'll call this content. And then let's go up inside our script on the page. The first thing we need to do is a jQuery selector on document and then call the ready method, and the ready method takes a function. If you've used jQuery, you're familiar with the ready method. What that does is it ensures that the entire DOM is loaded before any operations or calls are performed. In jQuery there are several methods that you can use for AJAX type functionality. Some of them are shortcuts, and by that I mean they set specific options for you for a specific purpose. For example, there's the get method, getJSON, getScript and a few others. All of those are based upon a method called AJAX. So those shortcuts set a few options and under the hood call the AJAX method. The best way to learn how to do AJAX in jQuery is to use the AJAX method, and that's what we'll do here in the demo because then once you see what a number of the options are for this AJAX method, it will be pretty clear how some of these higher level shortcut type methods are working. So we'll go down in here to our script, and let's call AJAX. What AJAX takes is an object that contains one to many options. If you've worked with jQuery, you've probably seen this approach before. So we need to set up a few options in here to get our AJAX call to work. The first one we're going to put in is the url option, and that's the address of the service that we want to call in this case, so it's Services/WebServiceAjax.asmx/ and our method name was GetWeather. Another option that you can set is the dataType. That's the dataType that's being returned from your call. So go dataType and in this case let's say we'll just put text in there. Some other options are HTML, XML, and a few others that you can look up. Let's also set the type of call that we want to get or type of request, and in this case let's just do a POST. If we're doing a post, then we have to specify the data that we're sending up. In this case, we aren't sending any up there, so we'll just send an empty object. The next option we'll put is the error option. What that does is it takes a function that's called in the event there's an error. And that is passed in. That's just a few parameters or ways you can set this up. We'll just have it return the error object. In this case, let's just put that, that there was an error, and what we'll do is actually we'll go "Error:" + error object, and we'll probably want to put a toString down there like that. We need to close out our function. There is a companion option called success, and this also takes a function. We'll send or add a data argument to it. What this does is it will contain the data if our call is successful. In this case, what we want to do with that data is insert it in that div down below, so we'll do a jQuery selector. What did we call that? We just called that content. We'll just set the HTML of the content, use the HTML function or method in jQuery, to the data that comes back. And let's just close out that function. We actually have enough options set here that this should work, so let's give it a whirl. Before we start it up, let me go over here and let's put a breakpoint in our web service just so we can see that the call is getting up there. We'll start this up in the debug mode. We'll see if we reach our breakpoint, which is our first indication that the call is getting back to the server. The page is loading, and there we do get our breakpoint over here on our value, so we'll continue on, and let's see if it gets inserted to that div on the page. And indeed it does. Here it is right down there. So there's some of the core options in making an AJAX call in jQuery. Now let's look at a few more. In this first call what we did is retrieve a value from the server, so let's do something where we actually pass some data up to the server and in turn get a value back. What I'm going to do is go over to our method that we had. We're going to copy and paste that. We'll create a second one, and in this one what we want to do is accept an inbound parameter. So let's say that we're going to pass up the name of the city and get some weather for that particular city. So we'll just call the method GetWeatherCity, and we'll take an inbound parameter called city, and that will be a string. We go off and get the weather, so we'll simulate that. We'll say put the name of the city and then add to it the current weather. So let's put in Cloudy so we have a different value than the first one. Now we need to go back over to the script in our page. What I'm going to do first is I'm going to add a second div down here, and in that one we'll just have a different place to put the information that we get back. We'll call this cityweather. Then we'll go back up here, and rather than change this first AJAX call, I'm going to leave that so you have it in the sample code. We're going to put the second one down here, and we're just going to alter this. What we need to do is to call that new method that we created. This time we have to pass up data, and you do that in the data option. This is a JavaScript object, so it's key value pairs, and in this case what we want to do is pass in the value for the city argument to that method. Let's just call this NewYork. In terms of when it comes back, what we want to do is— Let me just see. I think we called it cityweather. Okay. Let me just copy that so we don't have any mistakes. I'll just copy that value, put that up here in our selector for jQuery, and it will insert the value there, as it did in the first one. Before we test this out, I see one thing we need to do. NewYork is a string value, so let's put that in quotes; otherwise it would treat it like a local variable or object. Okay, that looks pretty good. Let's go over here and let's put a breakpoint on our method, like we did the first time. Let's go ahead and run this. We'll fire it up in the debug mode. This time actually because we have breakpoints on both methods, first it should hit the initial method that we wrote called GetWeather. As the page loads here, it will hit that breakpoint. And here it is, and we saw that before, so we'll just let that run on. Now here we are coming into our second one. Let's look at the inbound value for the argument, and it is NewYork, as we specified, so we'll let this run from here. We should get our web page, and there we have the value inserted in our second div. So that's an example of a method that returns data. Actually, it accepts data and returns data, I should say, and that's something you might commonly do as an AJAX call. There's a couple more options in this AJAX call that you might find useful, so let me make a copy and paste it down here as our third example. We'll continue to use this GetWeatherCity method that we used before. The 2 new options that we're going to look at, the first one is called async. As the name implies, that will determine whether or not the AJAX call is asynchronous or synchronous. A-S-Y-N-C. By default, it is asynchronous. So if we put the value false in there, then what's going to happen is that the call will be synchronous. The other thing we're going to look at is called timeout. This is a timeout in milliseconds. Let's make it 5 seconds. Actually, that's pretty long. Let's put it down to 2 seconds. What this would do is allow you to timeout if a particular call is not completed in that time. And in that case, your error function would be called. Just to see that that works, we'll make a minor addition here. We'll create another div. Let's just call this async. We'll copy that value and put it up in our jQuery selector for our success function. That will write that in there. Let's go ahead and run this. We'll run it with debugging once again just so you can see that it is making those calls to the server. We should have a total of 3 different calls here: 1 to the GetWeather and then 2 to GetWeatherCity. Here we are in the first one. We'll let that run. First time to GetWeatherCity. There it is again to GetWeatherCity. We let it run. And you can see we have the call down there. The difference was that the last one was done synchronously with async set to false and it had a timeout of 2 seconds. So at this point we've been using all the default options for our AJAX calls. We have set some options, but if we don't set them, then we've been using the default value. For instance, we set async equal to false in this third one that we just did, but in the first 2 we didn't set async, so it was the default value of true. There's a way that you can override that, and what we'll do is we'll go up here and right before this third one what we'll do— Actually, let's go down here. Let me just take this second one and we'll go like this. We will paste that down in here. What we can do is this. There's a method called ajaxSetup, and what ajaxSetup does is it takes a set of options that will override the default values. By that I mean out of the box there are values set. For example, the AJAX async is set to true. If I use ajaxSetup, it takes the same options that we've been passing in to the AJAX function, and we can set up what will then become a new default value. So we could go like this, and what would happen at this point is then the async would become false by default rather than being true, which is the case out of the box. So let me just format this for you. There we go. So now what's going to happen is because we're setting async to false here, even though we don't set async down here in this fourth AJAX call that I just set up, it will be done synchronously. There's another set of methods that you might find useful with this, and they are global event handlers for the AJAX calls. Typically, you might set them up before you start any of your AJAX calls. So let me put one up here, and we're going to look at one called ajaxError. There are several others—ajaxStart, for example. What ajaxError does is it sets up a function that is called whenever an error occurs during another AJAX call. You've seen down here in these individual methods that we've done that we have set up individual error functions associated with the error option in each of those individual calls, but you could do it more easily. In fact, this would probably be a good thing to do is you could call ajaxError, and this takes a function, and there's a couple parameters that come into this. There is the request. Actually, the event object comes in first, then the request, then you get the options that were passed to the call and you get the actual error. We'll close this out like this. So now this gets called any time an AJAX error occurs. Down in here in the code you can do whatever you need to do with the inbound information. You might want to process the event or the error and look at what caused it and log it or anything else like that. So let me just put a comment here: Put error processing here. One thing that is interesting about this particular function is we could do this multiple times. By that I mean each time we call ajaxError, it associates the function that we defined with the error handling of AJAX calls in jQuery. So if we were to call this twice, we could have 2 error handlers that are associated with it. Likewise, if we set up a global ajaxError function as we've just done here and then we have an individual error function such as we've done down here in this AJAX call below, then both of those are going to get called. Just be aware of that and think about that when you're setting up how you might do the error handling or anything else in jQuery. As I said, there are several other global type methods that you can set up for event handling. One is ajaxStart. Let's see what else there is. There is ajaxStop, ajaxSuccess, so there's a variety of things that you can control in terms of setting up these global error handlers. So we've looked at the detail of the AJAX method in jQuery as well as a number of the options that you can set as well as global setup with the ajaxSetup method and one of the global event handlers for AJAX called ajaxError. And as I just said, there is a number of other global event handlers that you can set up. I think if you look at these and see how some of these options work, then, as I said in the beginning, you can understand how some of the higher level shortcut type AJAX methods work. There's one called get, which just gets HTML or gets whatever you're requesting. Let's see. What else is there? There is one called getScript, getJSON. All those do is set some of the specific options, and each of them has a number of arguments that you can pass to it, and the values in those arguments are just being used to set some of the specific options down in the lower level AJAX method. So I think if you look at the examples here, download the sample source code, and understand this kind of core or base AJAX method, then when you look at some of those other methods that are available it will be pretty obvious what properties are being set. So download the sample source code, take a look at it, and use it as a basis for your own implementation of AJAX calls in jQuery. It's available in C Sharp as well as the VB we used here. Most of this is JavaScript, so there would just be minor code differences in the web service in the C Sharp version. This is Chris Pels. Thanks for watching this video on using AJAX in jQuery. [Microsoft] []

Video Details

Duration: 21 minutes and 2 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 6
Posted by: neudesicasp on Sep 5, 2013

In this video Chris Pels shows how to make Ajax calls using the jQuery library. A sample web site is created that contains a simple web service which returns a value. Next, the jQuery ajax() method is used to call the web service. A number of the ajax() method options are set including url, dataType, data, etc. In addition, event handlers for both success and error conditions are defined. Another web services is then defined which accepts an argument and also returns a value. A second ajax() call is defined that passes a value to the web service call and processes the return data. Finally, the setup for global options and event handlers for ajax() method calls are discussed.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.