Two MySpace developers posting on a thread regarding requestNavigateTo within the MySpace environment need credit for this one. Kristaps and Eric posted a discussion which included some nice brief code snips. The code is short and sweet. All that’s required is a surface name and any optional parameters you would want to pass to that surface. Note in OpenSocial 0.7 “surfaces” are now known as “views” which might throw some developers for a loop as they make the transition.

function navigate(surfaceName, params){
   var surfaces = gadgets.views.getSupportedViews();
   var surfaceRef = surfaces[surfaceName];
   gadgets.views.requestNavigateTo(surfaceRef, params);
}

Valid views within MySpace (as of this time) are home, profile, and canvas. Sample usage for moving to the Canvas view from the profile (or home) would be as follows:

<a href="#na" onClick="navigate('canvas',{});" title="Move to canvas">go to canvas</a>

After much frustration debugging a tweak from OpenSocial 0.6 to 0.7, I decided I’d capture the essence of my code in one location for others to look at it. This walks through the basic structure to make an AJAX request using MySpace’s implementation of OpenSocial. It should work with other OpenSocial 0.7 compliant sites as well.

This is the core of the functionality - where all the magic happens - a function called ajaxRequest(). As you see it takes 3 parameters, the URL to post to, a call back function and an object/array containing any data you would like passed via post.

function ajaxRequest(url, callback_func, post_params){
   var queryString = "";
   for (k in post_params) {
      queryString += "&" + k + "=" + encodeURIComponent(post_params[k]);
   }
   var osParams = {};
   osParams[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
   osParams[gadgets.io.RequestParameters.POST_DATA] = queryString;
   osParams[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED;
   gadgets.io.makeRequest(url, makeRequest_callback, osParams);
   function makeRequest_callback(data){
      renderStatus("Handling ajax response with typeof: " + typeof(data.data));
      var json = gadgets.json.parse(data.data);
      if(!json){
         alert('Unable to parse JSON object');
      }
      callback_func(json);
   }
}

Now that we have this tool, using it is very simple, first create a call back function that takes your JSON result and does something with it, then invoke the ajaxRequest by calling the ajaxRequest function using your parameters. That’s it.

function ajax_callback(jsonData){
   // do something with the data!!!
}

ajaxRequest("http://www.af-design.com/", ajax_callback,{});

I hope this saves some developers some frustration reading through the OpenSocial documentation and helps them get their apps up and running more quickly.