In this video, we create an Ajax request using jQuery. We use that service to obtain event information from a web service, and then check for a successful request and provide code to handle errors.
- [Instructor] So, we're going to keep working on the Landon Hotel app, but we're going to replace our fetch code with a jQuery request instead. So looking at our js folder for this project, we have a number of files and to use jQuery, the first thing we need to do is reference the jquery-3.1.1.min.js file in our HTML. This file is a minified version of the jQuery library. So we'll open up index.html and we'll scroll to the bottom. And then we need to add a script element for the jQuery file.
Now we need to make sure that that script element comes before the script element for script2.js because that's the file that's actually going to be using jQuery syntax. So we'll add a script element with a source that equals js/jquery-3.1.1.min.js. And then we'll save our changes there. And then we'll open up script2.js. And here we have the coade for a fetch request to open weathermap along with code to add data to the dom and deal with errors.
So we'll start with commenting out that code. So that will let us keep it around for reference and we can reuse some of it. And then we'll go up, create some space, and we'll create a starting comment for our new code, which is going to be a jQuery request. Now we can actually reuse the first three lines of that fetch request. So beginning of our iffy along with those first two variables, I'll leave in a blank line.
And then we'll close up function, the opening paren, give it another pair of parens for the end of the iffy and a semicolon. If you're starting with the start file for this chapter, make sure you grab your openweathermap API key from where ever you stored it and paste it in place of the API key placeholder here at the top of the code. Remember that your app won't work without this. So, I'm going to grab mine over here in notes, copy it, paste it in. We have a pretty basic use case here for Ajax, where we're just pulling some data from a web service.
So jQuery's get method will work fine for our needs. Now jQuery also offers a getJSON method and that's more useful for a service that offers data in multiple types and where you need to specify the data type you want. openweathermap provides JSON by default, so we can make our code a tiny bit leaner by just using get. So we create a request by typing $, which references the jQuery library, and the .get and a pair of parens.
The only argument that's required here is the url. And in this case we'll build the url the same way we did in the previous code. So we can just actually go down and copy that. Just going to be url plus app id plus the API key. And so I'll copy that and I'll paste it here in the parens. So when we use jQuery to create out Ajax request, it automatically pulls out the data from a successful response and it parses JSON data into an object for us and hands that off to our callback.
So the next thing to do would be to add some code that picks up that object so we can work with it. Now instead of the ven keyword that we use with the fetch API to chain a callback to our request, in jQuery we use the done method. So after that closing paren there, we type .done and just like then and fetch, done in jQuery takes a function as its argument. So we'll create an anonymous function and specify response as the parameter name for the data that's passed in.
Then I'm going to switch over to my browser and type localhost:3000. There's my app. And if I open up the console, we have an object log and we drilled down and this is the data that jQuery parsed for us automatically from the JSON it received. And we can see here that we did indeed get weather information for London. And so we created a successful Ajax request with jQuery and we used even less code than we did in our fetch version.
- Setting up your environment
- Obtaining API keys
- Working with XMLHttpRequest
- Working with the Fetch API
- Creating an Ajax request in jQuery
- Working with data returned from a jQuery Ajax request
- Creating an Ajax request in AngularJS
- Using an Ajax request with React
- Structuring Ajax requests