当前的社交游戏非常热门,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