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.