Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Jquery 3
  • Overview
  • Transcript

3.5 AJAX

AJAX (Asynchronous JavaScript and XML) is the technique that allows us to update web pages with new data from the server without refreshing the browser window. Saying that AJAX is important is an understatement, but AJAX using pure JavaScript and the XMLHttpRequest object is cumbersome at best. In this lesson, I'll show you how jQuery makes it easy!

3.5 AJAX

To say that AJAX is important to modern web development is to grossly understate AJAX's importance. Yes, it is extremely important but it also revolutionized and revitalized web application development. And whenever it was first stumbled upon, AJAX wasn't very easy to write. It required a lot of code and it was rather cumbersome as well, and that's one of the purposes of many of the JavaScript libraries that started popping up around the time that AJAX became popular. And of course jQuery is one of those libraries. It was created to solve a variety of problems, but one of those was to make AJAX easier, and jQuery has accomplished that. It has a variety of methods that you can use to make AJAX requests. So we're going to start with a method called load. It's purpose is to retrieve an external HTML file and load it into an element. So I have a file already. Is called a external.HTML and you can see what that content is. There's nothing really special about this file and inside of our index.HTML we're going to retrieve that external file. We're going to load it into this div element with an ID of content. So the first thing we need is to retrieve that element which I have already done and we will call content.load and then we specify the file that we want to retrieve. That is external.html. And whenever we save this on the right hand side, we're going to see the contents of that external file is now being loaded into our index. And if we inspect this, we are going to see that all of that HTML is there. We have the div with an ID of content and then inside, we have a p element. Now let's add something to this external file. We have a p element, let's also add a div element. And we'll say that this is the content in the div element. And whenever we load that document again we will once again see this new content. Now, if we wanted to just filter out everything except the p element. Whenever we call the load method, we can have our file name here and then follow that up with a space and then a selector. So we want to select only the p elements inside of our external file. So whenever we save this we are only going to see the contents of the p element. But if we also wanted to filter out everything but the div elements, we would reverse that and just specify div and then we see the contents of the div element. So that's the first method, it's very easy to do and it's very useful if you already have some HTML that you want to grab and then place inside of your document, this is the method to use. So the next method that we're going to look at is called AJAX and this is a method that we don't call on a jQuery object. In fact, we don't call the jQuery function at all. Now we still use it, but we use it like an object. So we have $. And then AJAX. And this AJAX method is the base AJAX method. Every AJAX method that is used in the jQuery library, ultimately calls this AJAX method. So, there are a couple of more that we are going to look at in this lesson. They are what are called shorthand versions of AJAX. Okay, so AJAX, we can supply a variety of different arguments, but one of the easiest is to just pass it in object. And this object has all of the settings that we want to use for this AJAX request. So the first would be the URL that we want to retrieve. Now, I already have a file called data.json. You can see that it has two properties and this is the file that we want to retrieve. But we also want to parse this into a JavaScript object and we will look at a couple of ways of doing that as well. So let's first of all specify our URL. So that is our first property URL, and that is going to be data.json. The second is going to be dataType. This is telling jQuery what we expect back from this request. And there are many options here. One is XML, one is text, but we want json. So this is what jQuery is going to do, it's going to make a request for data .json. It's going to get the response back and since we have said that we expect this to be json, it's going to automatically parse that json into a JavaScript object so we won't have to do that. So, we have URL, we have dataType, but we also need to set the type of request that this is going to be. So, that is with the method property, and this is going to be a GET request. Now, if there were any types of query parameters that we needed to include with the URL there is a data property. And we can provide a string that would have our query string, or we could provide a property. And it would parse that property into a query string. But we don't have to specify anything for this request. So we're going to leave the data method off. Now whenever I save this, this is going to go ahead and make the request for that file. Now, we're not going to see anything happen because we haven't told jQuery what to do whenever we get a response back. Now, AJAX requests are typically asynchronous. That basically means that we aren't going to get an immediate response from our request. So, for all intents and purposes, this is a deferred task. We are kicking off the task but we aren't going to get anything back immediately. So the Ajax method is going to return what's called a deferred object. This is something that represents a deferred task. So the deferred object has several methods to it. They are callback methods that will execute during certain times. Like for example, there is a method called fail. So if our request failed for some reason, then this fail method is going to execute. And we could pass in a function, that would have our request object. And this is the function that would execute when our request fails. But we're not expecting that to fail. Here let's just say something went wrong. Instead we want a method to execute whenever our task is done. And so that method is called done. And we do the same type of thing. We pass in a function and it's going to give us an object here because we have told it that we are accepting json back, so it's going to automatically parse that json into an object and it's going to pass that object to the done method. So it might be easier to write it like this. We're going to have var xhr, or let's just do http. That's a little cleaner there. And we will assign the call to the AJAX method to this http variable. And then we will use http.done. And the done method also returns a deferred object as well. So then we can just say .fail and we've covered both situations whenever our request is done. That means that we have gotten the response and jQuery has parsed our object, or if our request failed we have that covered as well. So let's write to the console the first name of our object. And whenever we save this, we are going to hop on over to the console and we see John here. So our Ajax request was successfully made. We got a response and jQuery automatically parsed that response into json. But now let's change the data type, let's say text. Now in this case the obj parameter on our done method is actually going to be the actual text. So in this case we have text, we don't have an actual object. So we needs to create our own object. So let's save our person = JSON.parse, we we pass in our obj, and then we can use our person object and we have the first name again. But if you are retrieving json, it makes sense to go ahead and let, jQuery parse that for you. Now jQuery has what are called shorthand methods for the AJAX method. They just make things a little bit simpler, like for example there's a method called GET, which is for making GET requests. So let's copy and paste, and instead of calling Ajax we're going to call GET. Now in this case, we don't need to specify the method property here because the GET method is for making GET requests. But we still need our URL. Now technically we don't need our data type. jQuery will try to be intelligent and decide what type of data it is retrieving. But it's also a good idea to actually specify what that is so that there's no issue there. So if we save this, we're going to get the same results. But there's also another shorthand method for our our purpose here. We are getting json so we could use a method called GET json. In this case, we don't need to set the data type. All we really need is the URL and jQuery is going to make that request. It's going to do everything the same that it did before, but the only difference now is that our call to get json has been simplified. Now it should go without saying that you can make any type of request that you need to with the Ajax method. So if you need to make a POST request, just change the method to POST. You also need to supply the URL and probably the data type based upon what the server is going to give you in response. But the data property is going to be a little bit different. Now, you can still supply a string for that information, but if you supply an object, it's going to parse that into a form encoded stream. So, if you want to POST json, then you have to stringify your object and use that as the data. So you would do JSON.stringify and then pass in your object. Now there is also a shorthand version for POST requests and it's called simply post. Now the issue here is that it's not as flexible as the AJAX method. Like for example, for the data, it's typically going to always encode that as a form encoded data. So for POST requests I recommend using the AJAX method because then you have a lot more flexibility and you can get the type of request that you actually need. AJAX is a cumbersome process if you're writing pure JavaScript with the XML HTTP request object. But jQuery makes it simple.

Back to the top
Continue watching with Elements