YUI Library Home

YUI Library Examples: Get Utility: Getting a Script Node with JSON Data from a Web Service

Get Utility: Getting a Script Node with JSON Data from a Web Service

This example employs the YUI Get Utility in a simple use case: retrieving JSON data from a cross-domain web service. While this is a relatively common usage, it's important to understand the security ramifications of this technique. Scripts loaded via the Get Utility (or any other "script node" solution) execute immediately once they are loaded. If you do not fully control (or fully trust) the script's source, this is not a safe technique and it can put the security of your users' data at risk. (For more information on the dangers of cross-site scripting [XSS] exploits, check out the Wikipedia entry on this subject.)

Here, we will use a trusted Yahoo! Search web service called Site Explorer to return a list of inbound links for a given URL. The principal difference between this example and similar examples using YUI Connection Manager is that this technique does not require a server-side proxy. The browser connects directly to the third-party web service without bouncing through a proxy page as is required when using the XMLHttpRequest object (on which Connection Manager relies).

Using the Get Utility to Get a Script File with JSON-formatted Contents

Here, we'll use the YUI Get Utility to retrieve data via the Yahoo! Search Site-Explorer web service, one of many Yahoo! APIs that support JSON.

This example has the following dependencies:

First, we create a plain HTML form that will work for users who do not have JavaScript enabled:

With this in place, we can progressively enhance the form to create an in-page interaction for users with JavaScript turned on.

The most important JavaScript piece here is the method that we fire on form submission. This method triggers our call to the Get Utility. This method, called getSiteExplorerData, accomplishes four things:

  1. It loads a transitional state for the display, alerting the user to the fact that data is being retrieved as a result of her action (line 7ff);
  2. It prepares the URL that will be passed to the Get Utility (line 13ff);
  3. It calls the Get Utility, passing in the URL of the script resource to load (in this case, the URL of our web service with the relevant paramaters assembled in the querystring) (line 22ff);
  4. It specifies the callback (line 23) and the scope in which the callback should run (line 24). Note that in this example the web service itself provides callback functionality, allowing us to pass a globally accessible callback function name as one of the parameters of the REST API; you can see this reference in line 16 below. As a result, we're making direct use of the intrinsic web service callback in this example and just stubbing out the built-in Get Utility callback for the sake of illustration.

The full JavaScript codeblock for this example reads as follows:

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings