Client
要配置远程服务器端程序在客户端可以访问,需要配置一个包含了所有可以访问访问服务器端方法的对象。请求api.js将会得到需要的配置。
action必须对应配置在web.xml DispatcherSerlvet的url-pattern值。
api.js文件是在请求时被动态创建的,如果需要一个可读性更好的可以请求api-debug.js
在api配置引入后,需要添加该对象到Ext.Direct用方法addProvider。
//Ext JS 3
Ext.Direct.addProvider(Ext.app.REMOTING_API);
//Ext JS 4.x and Sencha Touch 2
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
在上面配置完后远程的方法就可以在JavaScript访问了。
如果还有远程轮询方法,也可以同时在添加该对象到Ext.Direct在一个方法里。
//Ext JS 3
Ext.Direct.addProvider(Ext.app.REMOTING_API, {
id : 'messageProvider',
type : 'polling',
url : Ext.app.POLLING_URLS.message
});
//Ext JS 4.x and Sencha Touch 2
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API, {
type: 'polling',
url: Ext.app.POLLING_URLS.message
});
Parameters
api.js支持下面查询参数
Request Parameter | Description | Default |
---|---|---|
apiNs | Namespace the remoting api variable will be created in | Ext.app |
actionNs | Namespace the action beans will be created in | Browser global scope |
remotingApiVar | Name of the remoting api variable | REMOTING_API |
pollingUrlsVar | Name of the variable which contains the polling URLs | POLLING_URLS |
group | Name of one or more api groups. Multiple groups separated with comma. Since 1.3.1: When group is an empty string api.js returns all methods that do not have a group attribute or do have a group attribute with an empty value |
|
fullRouterUrl | true or false. If true the URL property contains the full router URL | false |
baseRouterUrl(since 1.3.2) | Overrides the default behavior and sets the value of the url field in the REMOTING_API object. /controller/api.js?baseRouterUrl=myrouterurl //Output Ext.app.REMOTING_API = { "url" : "myrouterurl/router", ... } |
例子:
这个例子将会创建一个RemoteNs.REMOTEAPI变量
//Ext JS 3
Ext.Direct.addProvider(RemoteNs.REMOTEAPI);
//Ext JS 4.x and Sencha Touch 2
Ext.direct.Manager.addProvider(RemoteNs.REMOTEAPI);
Actions是MyApp命名空间一部分。
MyApp.testAction.doEcho('test', function(result, e){...});
轮询RULs是POLLURLS对象的一部分
//Ext JS 3
Ext.Direct.addProvider({
type: 'polling',
url: RemoteNs.POLLURLS.message
});
//Ext JS 4.x and Sencha Touch 2
Ext.direct.Manager.addProvider({
type: 'polling',
url: RemoteNs.POLLURLS.message
});
Group
分组
如果一个程序包含多个页面并且JavaScript代码不需要访问所有服务器方法在每个页面,可以将这些方法分组暴露,仅服务器方法子集到某个页面。
例子:
有两个服务器方法可以用,我们仅想在第一个页面调用第一个页面,在第二个页面调用第二个方法。
首先添加group属性到@ExtDirectMethod注释
@Component
public class TestAction {
@ExtDirectMethod(group = "group1")
public long multiply(long num) {
...
}
@ExtDirectMethod(group = "group2")
public String doEcho(String message) {
...
}
}
一个方法可以是多个组的一部分。多个组名用‘,’分开 @ExtDirectMethod(group = "group3,group4,group5")。
在第一个页面添加下面script片段。api.js将会只导入配置的mutiply方法。
在另一个页面我们添加如下script片段。这个例子导入了doEcho方法在这段代码。
查询参数group可以请求多个组,下面例子导入了两个组的方法。
Since 1.3.1:
查询参数的值可以是空字符串。其它例子返回每个方法没有group属性在@ExtDirectMethod注释或者有group属性是空值的。
或没有‘=’。
缓存(since 1.2.1)
当请求api.js添加版本号时将会添加如下HTTP头到响应:
Vary
Expires
ETag
Cache-Control
这些HTTP头将会强制客户端缓存响应。一个指纹请求例子如下:
“API”这个词连字号后,之后的任何字符例子如下。
api-a.js, api-1.1.1.js, api-ac12e5f914.js, api-20120808101545.js
例子:
请求 api.js
HTTP/1.1 200 OK
Date: Tue, 02 Oct 2012 06:06:22 GMT
Content-Type: application/javascript;charset=UTF-8
Vary: Accept-Encoding
请求 api-1.0.js
HTTP/1.1 200 OK
Date: Tue, 02 Oct 2012 06:05:40 GMT
Vary: Accept-Encoding
Expires: Sun, 31 Mar 2013 06:05:40 GMT
ETag: "04feffd452e5177c41d874defb0ae4a1c"
Cache-Control: public, max-age=15552000
Content-Type: application/javascript;charset=UTF-8