Start a free Courses trial
to watch this video
In this video we look at how to use YQL's JSONP capabilities to make web service calls directly from the browser, with no need to use your web server as a proxy. We look at how to use the most basic JSONP techniques, and how to write your own convenience methods for jQuery to make executing YQL queries a snap.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[?mellow guitar music?] 0:00 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 0:03 [YQL - JavaScript Example with Jim Hoskins] 0:07 So now we've seen how to use the YQL console to create our YQL queries. 0:13 Now we're going to see how to integrate our YQL data directly into our web pages 0:17 using JavaScript. 0:20 So here we are at the YQL console and this is where we can test our YQL queries 0:22 and do a lot of exploration and discovery. 0:27 Now, one of the coolest parts of YQL is the ability to call YQL queries 0:31 directly from the browser using JavaScript. 0:36 Now, the normal way we get data from a web page in JavaScript 0:39 is using AJAX, or the XML/HTTP request object. 0:42 Now, there is a limitation in normal AJAX 0:46 in that you can only request data from your own server, 0:49 and since of course, YQL is on a different server, 0:52 being on Yahoo's domain name, 0:55 we normally wouldn't be able to access it with normal AJAX, 0:56 and that goes for any web service. 0:59 But there is a special way around this, which is called JSONP, 1:02 which means JSON with padding, 1:06 and basically what it does is it takes the normal JSON response, 1:08 but it wraps it in an execution of a function 1:13 and the name of that function you pass to your requests so it knows what to call. 1:16 Now, that may sound a little bit complicated but we'll take a look at it right here. 1:22 So I'm going to load up the geo.places location right here, 1:26 and we can test this out and see some information. 1:34 Now, I'm going to switch it over to JSON 1:37 and we can test it, and down here, we get our REST query, 1:40 which is the URL that encodes our query and all of our information. 1:43 So if we copy it and paste it into a tab here, 1:46 we can see the results, which is a normal JSON object 1:49 with the query property and so on. 1:54 Now, unfortunately, we can't get to it, but if we use what we call JSONP, 1:58 we will be able to use a special technique to get the information from the browser 2:02 without having to worry about it being on a different domain. 2:07 So this box right here is where we can put the name of a callback function. 2:10 So let's say we want to call something like myCallback. 2:15 Now, if I test this, and I copy the new URL with the callback name embedded into it now-- 2:20 now let's paste this--we can see it's changed a little bit. 2:26 Now instead of just starting off with the object, 2:29 we actually have myCallback being executed around it 2:32 with the results being passed in. 2:36 So what this means is we can load up this url in a script tag, 2:38 and it will execute this as JavaScript code, and hopefully, we have defined a function 2:43 called myCallback which will actually handle what to do with it. 2:49 So let's go over to some code and try it out. 2:53 So here we have a normal HTML page 2:56 with not a whole lot going on. 2:58 I'm using Chrome's Developer Tools to test this out 3:01 and if you want to play around you can this or you can use Firebug. 3:04 Now, the first thing we want to do is use a script tag and create a function 3:07 with the name of the callback we're going to use, 3:11 so what I'm going to do here is I've created a function called myCallback 3:14 just as I've put in the YQL console 3:17 and it's going to take an argument which is our results. 3:21 Now, I don't really have anything to do with them right now, 3:24 but to test them out,we'll call console.log with a Success!!! message 3:26 and then we'll actually log the results so we can explore them in the console. 3:30 So now, we've created our function called myCallback. 3:35 Now, to actually execute it, what we can do is after this, we'll create another script tag 3:39 and this is going to be a script with a source attribute 3:43 which is our external source. 3:46 So we're going to go back to our YQL console, 3:49 and we're going to make sure we have JSON selected, 3:51 with myCallback the correct name in this field, and we'll test it out. 3:54 So now, we can copy this URL. 3:59 What we're going to do is we're going to paste it into the source. 4:01 So what this will do is it will execute this script block first, 4:05 creating a myCallback function, and then it's going to load up this URL, 4:08 which we saw before simply calls myCallback, passing in the results. 4:11 So let's save it out, 4:16 and let's go to the browser 4:21 and load up the page, 4:23 and when we refresh, we can see Success!!! 4:25 and we can see our object 4:28 and we can explore it. 4:30 So we can see there's a query property, 4:32 we can see some information, like the count, 4:34 some diagnostic information. 4:37 What we really want to get down to is the results, 4:39 so this is a normal JavaScript object 4:41 that has been passed into our myCallback function. 4:43 We can now access the place, 4:47 and we can see things like admin1. 4:50 We can see SF0s in California. 4:54 We can see all sorts of information about it, like its locality and all sorts of information. 4:57 And so, this is the same technique you can use for any query. 5:02 Now, this is how JSONP works. 5:06 Now, it's such a common pattern 5:08 that it's actually built into a lot of the JavaScript libraries 5:10 that we can use. 5:13 So I'm going to take this a little further and I'm going to create a function 5:15 that we use jQuery to call YQL and give us our results back. 5:18 So let's take this off, and let's do it in a slightly different way. 5:23 So the first thing I'm going to do is I'm going to include the jQuery.js that's in my project 5:27 and now I've created this yqlQuery function, and what it does is it's simply a wrapper 5:32 for the jQuery AJAX call $.get, 5:38 but it encapsulates all the information we need to build a YQL query. 5:43 So it simply takes in a query string and will also take in a callback 5:46 because this will be run asynchronously. 5:50 We're not actually going to return the results from the yqlQuery. 5:52 Instead, we have to use a callBack function 5:55 to call our code when the data's actually available. 5:58 So the first thing we do is we get the yqlURL 6:02 at query.yahooapis.com/v1/public/yql. 6:06 Next, we generate a data object and this is used in the get method 6:12 as query string parameters, so we'll say q: is our actual query, 6:17 we'll say the format is json--this is so it doesn't return us XML data-- 6:21 and finally, the environment is going to be this URL here, 6:26 and what this does is it allows us to use our community tables 6:30 instead of just the default yahoo services. 6:34 Later on, we might use different environment files 6:37 if you create your own tables. 6:39 But right now, we're just going to leave this in as a nice default. 6:41 So then what we use is jQuery's get method. 6:45 We'll pass it the URL and the data, and we'll pass it the callback that was passed to us 6:48 so we'll simply pass it on through. 6:53 Finally, we'll define JSONP as the format, and what this does 6:55 is it tells jQuery that we actually want to execute this as a JSONP request 6:59 using a script tag and what it'll do is it'll create its own function 7:03 and append that name to the URL so it connects all the dots for us 7:08 so we don't have to do it all manually. 7:13 So let's take a look at how that works in the browser. 7:15 So if we refresh, we can see that our object has been logged 7:18 and we have the information here, 7:21 and we can even take this a step further and look at how it works in the background. 7:23 So here are our resources, and we can see we loaded up our local host, jQuery. 7:27 And here's the actual YQL call that got made, and it's made as a script tag-- 7:33 a JavaScript source. 7:37 So the content that came back--we can see here that it executed a function 7:39 called JSONP with this number here, and that's because 7:44 jQuery created this function for us as sort of a proxy 7:48 that will eventually call our callback function. 7:53 So it works without us having to really worry about the internals of the JSONP. 7:56 All we need to do is make sure that we define here that we're using JSONP 8:00 so it knows to do all of that for us. 8:04 So as we saw in our code, the YQL query function was called 8:07 with the text "Orlando" and the function was simply taking the response object 8:11 and logging it in. 8:17 So you can use this as a simple way to query YQL from your pages 8:19 and this is actually really convenient 8:23 because not all APIs that we can work with on the web 8:25 work with JSONP, but if you use YQL to access those APIs, 8:29 you now have access to almost any information you want 8:33 directly from the browser, 8:36 without having to do any server-side processing at all. 8:38 So now, using these techniques, 8:41 you can integrate almost any data that you can find on the web 8:43 right into your web page just using JavaScript. 8:46 [?mellow guitar music?] 8:49
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up