YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Connection Manager: Cross-Domain Transactions with Connection Manager

# Connection Manager: Cross-Domain Transactions with Connection Manager

This example demonstrates how to use Connection Manager to make a cross-domain request using the alternate Flash transport. In this example, a request will be made to Yahoo! Pipes, which will respond with JSON data, completing the transaction.

View example in new window.

## Cross-Domain Requests with Connection Manager

Load the Yahoo Global Object, Connection Manager, and its Event dependency. This example also makes use of the JSON utility.

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

### Initialize the Flash Transport

Before making a cross-domain request, the underlying transport -- `connection.swf` must be initialized. This is done by calling the transport() on `YAHOO.util.Connect`, and setting the parameter as the path to the swf, relative to the HTML.

YAHOO.util.Connect.transport('connection.swf');

Once the transport has initialized, it will fire xdrReadyEvent. Attach a listener to this event, so we know when the transport is ready for use. Here, the button to send the cross-domain request is disabled until the transport fires xdrReadyEvent.

//Enable the request button when the Flash transport is //initialized. YAHOO.util.Connect.xdrReadyEvent.subscribe(function() { document.getElementById('fetch').disabled = false; });

### Configure the Callback Handlers and Make a Cross-Domain Request.

Cross-domain transactions are determined by setting the `xdr` property on the callback object to `true`. This instructs Connection Manager to use the alternate transport, initialized earlier, instead of XMLHttpRequest.

In this example, we will create functions to handle success and failure outcomes, and use a global listener to Connection Manager's `startEvent` to listen for the start of each transaction. Since the response data are JSON, we use the JSON utility to parse it, and use `substitute` to filter the results.

<script language="javascript"> //Response data will be displayed as an unordered list. var output = document.getElementById('list'), //Shortcut for YAHOO.util.Connect. YCM = YAHOO.util.Connect; //Event handler called when the transaction begins: var handleStart = function(e, a) { YAHOO.log("Transaction " + a[0].tId + " is starting.", "info", "example"); output.innerHTML = "<li>Loading news stories via Yahoo! Pipes feed...</li>"; } //Event handler for the success outcome -- use this handler to write the fetched //RSS items to the page. var handleSuccess = function(o) { //We use JSON.parse to sanitize the JSON (as opposed to simply eval'ing //it into the page): var oRSS = YAHOO.lang.JSON.parse(o.responseText); //From here, we simply access the JSON data from where it's provided //in the Yahoo! Pipes output: if (oRSS && oRSS.count) { var s = "<!--begin news stories fetched via Yahoo! Pipes-->", //t in this case is our simple template; this is fed to //YAHOO.Lang.substitute as we loop through RSS items: t = "<li><a href='{link}'>{title}</a>, {pubDate}</li>"; for (var i=0; i<oRSS.count; i++) { s += YAHOO.lang.substitute(t, oRSS.value.items[i]); } //Output the string to the page: output.innerHTML = s; } else { //No news stories were found in the feed. output.innerHTML = "<li>The RSS feed did not return any items.</li>"; } } //HTTP status evaluates to failure and this function is called: var handleFailure = function(o) { YAHOO.log("ERROR " + o.id + " " + o.argument, "info", "example"); } //Set up the callback object used for the transaction. var callback = { success: handleSuccess, failure: handleFailure, xdr: true }; //Listen for Connection Manager's start event. YCM.startEvent.subscribe(handleStart); //Wire the button to a click handler to fire a request each //time the button is clicked: var send = function(o) { YAHOO.log("Click detected; beginning io request to Yahoo! Pipes.", "info", "example"); var obj = YCM.asyncRequest('GET', //this is a specific Pipes feed, populated with cycling news: "http://pipes.yahooapis.com/pipes/pipe.run?_id=giWz8Vc33BG6rQEQo_NLYQ&_render=json", callback ); }

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

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