当前的社交游戏非常热门,Opensocial作为一种接入规范,其交互大致如下。
1.与平台交互:
接下来,我们将详细介绍 request 函数,它可调用 OpenSocial 以获得所有者及好友。该函数可执行以下操作:
* 通过调用 newIdSpec() 创建 idspec。
* 通过调用 opensocial.newDataRequest() 创建请求(赋值在 req 变量中)。
* 调用 req.add() 以将 newFetchPersonRequest() 和 newFetchPeopleRequest() 函数添加到请求。(这两个函数只需要知道他们使用来获取用户信息的就行了。具体以后会详细介绍)。另外,add的第二个参数定义了一个方法 名:get_ownter和get_friends。这个名字是你自己定义的,在后面的response中获取数据的时候需要用到。
* 调用 req.send() 以启动请求,将 response 作为回调函数传递。
以上就是一个最简单的交互方法了
1.与平台交互:
opensocial是通过两个方法来实现的:
一、请求:request()
一、请求:request()
CODE:
function request() {
var idspec = opensocial.newIdSpec({ "userId" : "OWNER", "groupId" : "FRIENDS" });
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest("OWNER"), "get_owner");
req.add(req.newFetchPeopleRequest(idspec), "get_friends");
req.send(response);
};
var idspec = opensocial.newIdSpec({ "userId" : "OWNER", "groupId" : "FRIENDS" });
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest("OWNER"), "get_owner");
req.add(req.newFetchPeopleRequest(idspec), "get_friends");
req.send(response);
};
接下来,我们将详细介绍 request 函数,它可调用 OpenSocial 以获得所有者及好友。该函数可执行以下操作:
* 通过调用 newIdSpec() 创建 idspec。
* 通过调用 opensocial.newDataRequest() 创建请求(赋值在 req 变量中)。
* 调用 req.add() 以将 newFetchPersonRequest() 和 newFetchPeopleRequest() 函数添加到请求。(这两个函数只需要知道他们使用来获取用户信息的就行了。具体以后会详细介绍)。另外,add的第二个参数定义了一个方法 名:get_ownter和get_friends。这个名字是你自己定义的,在后面的response中获取数据的时候需要用到。
* 调用 req.send() 以启动请求,将 response 作为回调函数传递。
在使用 newFetchPeopleRequest 函数时,您会创建 IdSpec 对象并将其作为函数参数传递。您使用的
IdSpec 会根据您需要检索的数据而异。下面显示了如何为各种请求创建 IdSpec 对象。
CODE:
//
VIEWER_FRIENDS:
var idspec = opensocial.newIdSpec({ "userId" : "VIEWER", "groupId" : "FRIENDS" });
// OWNER_FRIENDS :
var idspec = opensocial.newIdSpec({ "userId" : "OWNER", "groupId" : "FRIENDS" });
var idspec = opensocial.newIdSpec({ "userId" : "VIEWER", "groupId" : "FRIENDS" });
// OWNER_FRIENDS :
var idspec = opensocial.newIdSpec({ "userId" : "OWNER", "groupId" : "FRIENDS" });
注意:您可以使用作为 JavaScript 枚举(代表 OpenSocial
字段和方法)的缩写的字符串文字。例如,在req.newFetchPersonRequest("OWNER")中,不用编写
CODE:
opensocial.IdSpec.PersonId.OWNER
您只需编写
CODE:
"OWNER"
就行了
2、返回:response()
CODE:
function response(dataResponse)
{
var owner = dataResponse.get('get_owner').getData();
var friends = dataResponse.get('get_friends').getData();
var html = 'Friends of ' + owner.getDisplayName();
html += ':<br><ul>';
friends.each(function(person) {
html += '<li>' + person.getDisplayName() + '</li>';
});
html += '</ul>';
};
var owner = dataResponse.get('get_owner').getData();
var friends = dataResponse.get('get_friends').getData();
var html = 'Friends of ' + owner.getDisplayName();
html += ':<br><ul>';
friends.each(function(person) {
html += '<li>' + person.getDisplayName() + '</li>';
});
html += '</ul>';
};
服务器调用 response() 以处理数据 -- 所有者和所有者的好友,如下所示:
* 创建所有者和好友变量,并调用 dataResponse.get()
来使用服务器返回的值初始化这些变量。其中的参数get_owner和get_friends就是前面定义的。
* 通过 owner.getDisplayName()来取得所有者的姓名。
* 通过使用 each() 函数来循环查看好友集合。
* 对每个好友调用 getDisplayName() 以将好友的姓名添加到 HTML 输出。
* 调用 person.getDisplayName() 以循环查看每个好友并且将好友的姓名添加到 HTML。
* 通过 owner.getDisplayName()来取得所有者的姓名。
* 通过使用 each() 函数来循环查看好友集合。
* 对每个好友调用 getDisplayName() 以将好友的姓名添加到 HTML 输出。
* 调用 person.getDisplayName() 以循环查看每个好友并且将好友的姓名添加到 HTML。
2.与服务器后端交互
opensocial提供了通过ajax与后端程序交互的方法:gadgets.io.makeRequest
CODE:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Standard gadget structure">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="html">
<![CDATA[
<script>
function $(id) {
return document.getElementById(id);
}
function request() {
ts = new Date().getTime(); // 防止缓存
var params = {};
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT; // 定义数据以text方式返回
params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED; // 定义使用加密的方式传输数据
gadgets.io.makeRequest('http://apps.guiwan.net/apps/test/index.php?hash=' + ts, response, params);// 开始发送请求
}
function response(data) {
var main = $('main');
main.innerHTML = data.text;// data.text就是返回的数据
}
request();
</script>
<div id='main'></div>
]]>
</Content>
</Module>
<Module>
<ModulePrefs title="Standard gadget structure">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="html">
<![CDATA[
<script>
function $(id) {
return document.getElementById(id);
}
function request() {
ts = new Date().getTime(); // 防止缓存
var params = {};
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT; // 定义数据以text方式返回
params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED; // 定义使用加密的方式传输数据
gadgets.io.makeRequest('http://apps.guiwan.net/apps/test/index.php?hash=' + ts, response, params);// 开始发送请求
}
function response(data) {
var main = $('main');
main.innerHTML = data.text;// data.text就是返回的数据
}
request();
</script>
<div id='main'></div>
]]>
</Content>
</Module>
以上就是一个最简单的交互方法了
如果需要用post方式传递数据,那么则添加以下几行:
CODE:
var postdata = {mod:'comment',action:'post'};
params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postdata);
params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postdata);
实例:
CODE:
//
向服务器端发起请求
function go(postData) {
ts = new Date().getTime();
var params = {};
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;
params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED;
if (postData) {
params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
}
gadgets.io.makeRequest('http://apps.guiwan.net/apps/?hash=' + ts, showIndex, params);
}
function go(postData) {
ts = new Date().getTime();
var params = {};
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;
params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED;
if (postData) {
params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
}
gadgets.io.makeRequest('http://apps.guiwan.net/apps/?hash=' + ts, showIndex, params);
}
function showIndex(data)
{
var main = $('body');
main.innerHTML = data.text;
}
var main = $('body');
main.innerHTML = data.text;
}
var postData = {name:$('name').value,
age:$('age').value}
go(postData)
go(postData)
转载于:https://blog.51cto.com/flandycheng/510507