YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Connection Manager: Retrieving a Yahoo! Weather RSS Feed

# Connection Manager: Retrieving a Yahoo! Weather RSS Feed

This example demonstrates how to use the Connection Manager and a PHP proxy — to work around XMLHttpRequest's same-domain policy — to retrieve an XML document from `http://xml.weather.yahoo.com/forecastrss`.

To try out the example, fill in your five-digit US zip code, or Location ID.

View example in new window.

Zip Code or Location ID

Please enter a U.S. Zip Code or a location ID to get the current temperature. The default is Zip Code 94089 for Sunnyvale, California; its location ID is: USCA1116.

## Exploring the Code for This Example

Load the Yahoo Global Object and Connection Manager source files:

<script src="yahoo.js"> <script src="connection.js">

### Callback Object and the Weather RSS

Yahoo! Weather RSS will return an XML document if the transaction is successful. The following callback object with `success` and `failure` handlers is used to process the response.

// This is the response display container var div = document.getElementById('weatherModule'); // This is a reference to the HTML form. var oForm = document.getElementById('wForm'); /* * This method will traverse the response XML document and build a * simple HTML module comprised of data from the following tags: * * Data in the first <title> tag in the document. * Data in the first <lastBuildDate> tag in the document. * HTML from the second <description> tag in the document. * */ function successHandler(o){ var root = o.responseXML.documentElement; var oTitle = root.getElementsByTagName('description')[0].firstChild.nodeValue; var oDateTime = root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue; var descriptionNode = root.getElementsByTagName('description')[1].firstChild.nodeValue; // Format and display results in the response container. div.innerHTML = "<p>" + oTitle + "</p>" + "<p>" + oDateTime + "</p>" + descriptionNode; } /* * * This is a simple failure handler that will display * the HTTP status code and status message if the resource * returns a non-2xx code. * */ function failureHandler(o){ div.innerHTML = o.status + " " + o.statusText; }

### Assemble the Querystring and Initiate the Transaction

The Yahoo! Weather RSS feed requires a simple HTTP GET request with a base URL and a querystring containing the required information as a name-value pair. In this example, we will use the following parameter:

- `p` — location as U.S. Zip Code or Location ID

The following are some example location IDs (do not include the city name):

- Beijing: CHXX0008
- Helsinki: FIXX0002
- London: UKXX0085
- Moscow: RSXX0063
- Munich: GMXX0087
- Paris: FRXX0076
- Riyadh: SAXX0017
- Tokyo: JAXX0085

For more details on the Yahoo! Weather RSS feed and other location IDs, please visit http://developer.yahoo.com/weather/index.html.

Function `getModule` retrieves the input values for location and creates a querystring:

function getModule(){ // retrieve the field values for the zip code input var sLocation = oForm.elements['zip'].value; // entryPoint is the base URL var entryPoint = 'php/weather.php'; // queryString is the key-value pair of the zip code // or location id. var queryString = encodeURI('?p=' + sLocation); var sUrl = entryPoint + queryString; // Initiate the HTTP GET request. var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, { success:successHandler, failure:failureHandler }); }

### Proxy and Response

Once `weather.php` receives the querystring, it will construct and send an HTTP GET using CURL to retrieve the results from the Yahoo! Weather RSS feed. This allows the transaction to succeed while working around XMLHttpRequest's strict security policy.

//Within a PHP block: // Since the result is an XML document, the Content-type // header must be set to "text/xml" for the data to be // treated as XML and to populate responseXML. header("Content-Type:text/xml"); // $url is the resource path of the Y! Weather RSS // with the appended querystring of zip code/location id. $url = 'http://xml.weather.yahoo.com/forecastrss?'.getenv('QUERY_STRING'); // This function initializes CURL, sets the necessary CURL // options, executes the request and returns the results. function getResource($url){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $result = curl_exec($ch); curl_close($ch); return $result; } // Call getResource to make the request. $feed = getResource($url); // Return the results. echo $feed;

## 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.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Connection Manager Examples:

- Connection Manager GET Transaction
- Connection Manager POST Transaction
- Connection Manager Transaction Timeout
- Retrieving a Yahoo! Weather RSS Feed
- Cross-Domain Transactions with Connection Manager
- Subscribing to Connection Manager Global Events
- Subscribing to Connection Manager's Custom Events via the Callback Object
- Connection Manager assisted image crop (included with examples for ImageCropper Control (beta))
- Dynamically Loading Node Data (included with examples for TreeView Control)
- Editor Data Post with Connection Manager (included with examples for Rich Text Editor)
- Simple Application (included with examples for Layout Manager)

### More Connection Manager Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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