DWR的替代品Ext.Direct
2010-12-14 17:21
281 查看
Ext.Direct的目的在于提供一个无缝的通讯流（streamline）介乎于客户端和服务端之间，形成一种单一的接口，从而使得我们减少一
些乏味的编码，例如数据的验证和出来返回的数据包（读数据、错误条件等等）。Ext.direct命名空间下有若干的类是为了与服务端更密切地整合。
Ext.Direct的一些方法产生出来的数据经过Ext.data另外的一些类，就可以转给Ext.data.Stores处理。
供应器
Ext.Direct的架构属于“供应器（provider）”的架构，一个或多个的供应器负责将数据传输到服务器上。当前有几种关键的供应器：
JsonProvider 简易的JSON操作
PollingProvider 轮询供应器，用于重复的请求
RemotingProvider 向客户端暴露了服务端的供应器
供应器本身不能直接的使用，应该通过Ext.Direct.add()加入。该方法加入一个Ext.Direct供应器并创建代理，或者可理解我ie对服务端执行的方法进行一个快照。 如果供应器还没有链接，那么就会自动链接。下面的例子创建了两个provider。
var pollProv = new Ext.direct.PollingProvider({
url: 'php/poll2.php'
});
Ext.Direct.addProvider(
{
"type":"remoting", // create a Ext.direct.RemotingProvider
"url":"php//router.php", // url to connect to the Ext.Direct server-side router.
"actions":{ // each property within the actions object represents a Class
"TestAction":[ // array of methods within each server side Class
{
"name":"doEcho", // name of method
"len":1
},{
"name":"multiply",
"len":1
},{
"name":"doForm",
"formHandler":true, // handle form on server with Ext.Direct.Transaction
"len":1
}]
},
"namespace":"myApplication",// namespace to create the Remoting Provider in
},{
type: 'polling', // create a Ext.direct.PollingProvider
url: 'php/poll.php'
},
pollProv // reference to previously created instance
);
var pollProv = new Ext.direct.PollingProvider({
url: 'php/poll2.php'
});
Ext.Direct.addProvider(
{
"type":"remoting", // create a Ext.direct.RemotingProvider
"url":"php//router.php", // url to connect to the Ext.Direct server-side router.
"actions":{ // each property within the actions object represents a Class
"TestAction":[ // array of methods within each server side Class
{
"name":"doEcho", // name of method
"len":1
},{
"name":"multiply",
"len":1
},{
"name":"doForm",
"formHandler":true, // handle form on server with Ext.Direct.Transaction
"len":1
}]
},
"namespace":"myApplication",// namespace to create the Remoting Provider in
},{
type: 'polling', // create a Ext.direct.PollingProvider
url: 'php/poll.php'
},
pollProv // reference to previously created instance
);
路由器
在客户端与服务端部分方法之间，Ext.Direct使用了服务端“路由器（router）”的概念来直接请求。
由于Ext.Direct是真正平台无关性的，所以你完全可以在以Java为解决方案的服务端，立刻替换成为C#的服务端，过程中你不需要对
JavaScript作任何的变动或修改。
服务端事件。
由服务器通知而来的事件，可以添加一个事件侦听器来应接并触发：
{"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
// 对应服务端“message”的事件的处理函数。add a handler for a 'message' event sent by the server
Ext.Direct.on('message', function(e){
out.append(String.format('<p><i>{0}</i></p>', e.data));
out.el.scrollTo('t', 100000, true);
});
{"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
// 对应服务端“message”的事件的处理函数。add a handler for a 'message' event sent by the server
Ext.Direct.on('message', function(e){
out.append(String.format('<p><i>{0}</i></p>', e.data));
out.el.scrollTo('t', 100000, true);
});
供应器Provider究竟是什么呢？文档是这样描述的，“Ext.direct.Provider是一个抽象类，用来扩展的。”！太简单了吧，呵呵其实还没说完了，看看这层次图：
Provider
|
+---JsonProvider
|
+---PollingProvider
|
+---RemotingProvider
基类Provider提供了重要的三个属性如下表:
属性：类型 说明
id : String 供应器的id（默认的由Ext.id()方法产生）。如果你没有用全局变量保存着这个供应器，那么你就应该分配一个id来记住这个供应器，以便日后寻找。例如：
view plaincopy to clipboardprint?Ext.Direct.addProvider(
{ type: 'polling', url: 'php/poll.php',
id: 'poll-provider' } ); Ext.Direct.addProvider(
{
type: 'polling',
url: 'php/poll.php',
id: 'poll-provider'
}
);
priority : Number 请求的优先权（priority）,数值愈低表示优先权愈高，0 就表示“双工的”（总是打开）。 所有的供应器默认为1 ，但PollingProvider就除外，默认为3 。
type : String 这是Ext.Direct的类型，这是必须的 ，默认是undefined 。 执行addProvider创建新的供应器的时候就会用到这个类型。 默认可识别的类型如下规格：
polling : PollingProvider
remoting : RemotingProvider
RemotingProvider暴露了在客户端上访问服务端方法的方式方法。 这是一种RPC（remote procedure
call，远程过程调录）的连接类型，即客户端可以初始化服务端上的进程。这样的话，组织代码的时候会更具可维护性，客户端与服务端之间的道路怎么走也会
越加地清晰。如果单使用URL的话这点是不容易做到的。同时，服务端必须将有关类和方法的信息告诉给客户端知道。一般这些配置的信息由服务端的
Ext.Direct包完成，构建一系列的API信息输出。
RemotingProvider.action是一个重要的配置项。它用对象字面化（Object literal）确定服务端的动作或方法。例如，如果供应器（Provider）是如下配置的：
view plaincopy to clipboardprint?
"actions":{ // actions对象下面的属性每个都代表者对应服务端的类。each property within the 'actions' object represents a server side Class
"TestAction":[ // 服务端的类其方法所组成的数组，要将他们暴露给客户端。array of methods within each server side Class to be
{ // stubbed out on client
"name":"doEcho",
"len":1
},{
"name":"multiply",// name of method
"len":2 // 参数的个数是多少。一定要是数字类型，而不能是字符串。The number of parameters that will be used to create an
// array of data to send to the server side function.
// Ensure the server sends back a Number, not a String.
},{
"name":"doForm",
"formHandler":true, // direct the client to use specialized form handling method
"len":1
}]
}
* </code></pre>
* <p>
* 注意Store不是必须的，一个服务端方法可以在任何的时候被调用。下面的例子中我们<b>客户端</b>的方法调用服务端中的“乘法”，就在服务端的“TestAction”类中：
* <br />
* Note that a Store is not required, a server method can be called at any time.
* In the following example a <b>client side</b> handler is used to call the
* server side method "multiply" in the server-side "TestAction" Class:</p>
* <pre><code>
TestAction.multiply(
2, 4, // 这两个参数都会传到服务器中，所以指定len=2。pass two arguments to server, so specify len=2
// 下面的回调函数在服务端调用后执行。callback function after the server is called
// result: the result returned by the server
// e: Ext.Direct.RemotingEvent object result就是由服务端返回的对象，例如Ext.Direct.RemotingEvent类型的对象
function(result, e){
var t = e.getTransaction();
var action = t.action; // 调用服务端的类。server side Class called
var method = t.method; // 调用服务端的方法。server side method called
if(e.status){
var answer = Ext.encode(result); // 8
}else{
var msg = e.message; // 失败的信息 failure message
}
}
);
"actions":{ // actions对象下面的属性每个都代表者对应服务端的类。each property within the 'actions' object represents a server side Class
"TestAction":[ // 服务端的类其方法所组成的数组，要将他们暴露给客户端。array of methods within each server side Class to be
{ // stubbed out on client
"name":"doEcho",
"len":1
},{
"name":"multiply",// name of method
"len":2 // 参数的个数是多少。一定要是数字类型，而不能是字符串。The number of parameters that will be used to create an
// array of data to send to the server side function.
// Ensure the server sends back a Number, not a String.
},{
"name":"doForm",
"formHandler":true, // direct the client to use specialized form handling method
"len":1
}]
}
* </code></pre>
* <p>
* 注意Store不是必须的，一个服务端方法可以在任何的时候被调用。下面的例子中我们<b>客户端</b>的方法调用服务端中的“乘法”，就在服务端的“TestAction”类中：
* <br />
* Note that a Store is not required, a server method can be called at any time.
* In the following example a <b>client side</b> handler is used to call the
* server side method "multiply" in the server-side "TestAction" Class:</p>
* <pre><code>
TestAction.multiply(
2, 4, // 这两个参数都会传到服务器中，所以指定len=2。pass two arguments to server, so specify len=2
// 下面的回调函数在服务端调用后执行。callback function after the server is called
// result: the result returned by the server
// e: Ext.Direct.RemotingEvent object result就是由服务端返回的对象，例如Ext.Direct.RemotingEvent类型的对象
function(result, e){
var t = e.getTransaction();
var action = t.action; // 调用服务端的类。server side Class called
var method = t.method; // 调用服务端的方法。server side method called
if(e.status){
var answer = Ext.encode(result); // 8
}else{
var msg = e.message; // 失败的信息 failure message
}
}
);
上面的例子中，服务端的“multiply”函数会送入两个参数（2和4）。“multiply”函数就应该返回8，最后变为result变量。
另外，设置enableBuffer为true或false决定是否捆绑多个方法调用在一起。如果指定一个数字表示就等待形成一次批调用的机会（默
认为10毫秒）。多个调用按一定的时候聚集在一起然后统一在一次请求中发出，就可以优化程序了，因为减少了服务端之间的往返次数。
配置项namespace则指定了远程供应器的命名空间（默认为浏览器的全局空间window）。完全命名这个空间，或者指定一个String执行隐式命名。
最后介绍PollingProvider似乎更“猛”一些，因为它让笔者感觉Ext有点向Web消息同步的技术挑战，因为我们知道整个Web世界的
模型都是从低成本通讯出发的，白话说就是，客户端要什么，就向服务端请求，我答应你就是，我（服务端）可不主动塞信息给你（客户端），也就是说，客户端从
Server拿了东西就完事了，，越简单的模型越符合低成本通讯的要求，，，---Web之所以是天下做大的网络，可以想象，诸如窄带等的问题不一而足，
条件制约多的很，故所以不能有太奢侈的功能，还是第一代嘛 呵呵。
随着人们的发展（WebIM等等），这方面的需求日益高涨，好比HMTL5就活脱把TCP Stocket拉进来算了。。。
现在Comet长连接/BOSH都是力图先走一步，提供上述问题的解决方案。。。这不，Ext也来奏热闹了，弄了个PollingProvider，比较雏形，我们看看官方的怎么说：
按一定的周期不断轮询服务端。最开始的数据由客户端发出，然后由服务端响应。应该由运行在服务端其余部分的Ext.Direct包来生成PollingProvider的所有配置内容。
创建一个PollingProvider实例可以通过new关键字实现，或者只是指定type = 'polling' 就可以，例如：
var pollA = new Ext.direct.PollingProvider({
type:'polling',
url: 'php/pollA.php',
});
Ext.Direct.addProvider(pollA);
pollA.disconnect();
Ext.Direct.addProvider(
{
type:'polling',
url: 'php/pollB.php',
id: 'pollB-provider'
}
);
var pollB = Ext.Direct.getProvider('pollB-provider');
些乏味的编码，例如数据的验证和出来返回的数据包（读数据、错误条件等等）。Ext.direct命名空间下有若干的类是为了与服务端更密切地整合。
Ext.Direct的一些方法产生出来的数据经过Ext.data另外的一些类，就可以转给Ext.data.Stores处理。
供应器
Ext.Direct的架构属于“供应器（provider）”的架构，一个或多个的供应器负责将数据传输到服务器上。当前有几种关键的供应器：
JsonProvider 简易的JSON操作
PollingProvider 轮询供应器，用于重复的请求
RemotingProvider 向客户端暴露了服务端的供应器
供应器本身不能直接的使用，应该通过Ext.Direct.add()加入。该方法加入一个Ext.Direct供应器并创建代理，或者可理解我ie对服务端执行的方法进行一个快照。 如果供应器还没有链接，那么就会自动链接。下面的例子创建了两个provider。
var pollProv = new Ext.direct.PollingProvider({
url: 'php/poll2.php'
});
Ext.Direct.addProvider(
{
"type":"remoting", // create a Ext.direct.RemotingProvider
"url":"php//router.php", // url to connect to the Ext.Direct server-side router.
"actions":{ // each property within the actions object represents a Class
"TestAction":[ // array of methods within each server side Class
{
"name":"doEcho", // name of method
"len":1
},{
"name":"multiply",
"len":1
},{
"name":"doForm",
"formHandler":true, // handle form on server with Ext.Direct.Transaction
"len":1
}]
},
"namespace":"myApplication",// namespace to create the Remoting Provider in
},{
type: 'polling', // create a Ext.direct.PollingProvider
url: 'php/poll.php'
},
pollProv // reference to previously created instance
);
var pollProv = new Ext.direct.PollingProvider({
url: 'php/poll2.php'
});
Ext.Direct.addProvider(
{
"type":"remoting", // create a Ext.direct.RemotingProvider
"url":"php//router.php", // url to connect to the Ext.Direct server-side router.
"actions":{ // each property within the actions object represents a Class
"TestAction":[ // array of methods within each server side Class
{
"name":"doEcho", // name of method
"len":1
},{
"name":"multiply",
"len":1
},{
"name":"doForm",
"formHandler":true, // handle form on server with Ext.Direct.Transaction
"len":1
}]
},
"namespace":"myApplication",// namespace to create the Remoting Provider in
},{
type: 'polling', // create a Ext.direct.PollingProvider
url: 'php/poll.php'
},
pollProv // reference to previously created instance
);
路由器
在客户端与服务端部分方法之间，Ext.Direct使用了服务端“路由器（router）”的概念来直接请求。
由于Ext.Direct是真正平台无关性的，所以你完全可以在以Java为解决方案的服务端，立刻替换成为C#的服务端，过程中你不需要对
JavaScript作任何的变动或修改。
服务端事件。
由服务器通知而来的事件，可以添加一个事件侦听器来应接并触发：
{"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
// 对应服务端“message”的事件的处理函数。add a handler for a 'message' event sent by the server
Ext.Direct.on('message', function(e){
out.append(String.format('<p><i>{0}</i></p>', e.data));
out.el.scrollTo('t', 100000, true);
});
{"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
// 对应服务端“message”的事件的处理函数。add a handler for a 'message' event sent by the server
Ext.Direct.on('message', function(e){
out.append(String.format('<p><i>{0}</i></p>', e.data));
out.el.scrollTo('t', 100000, true);
});
供应器Provider究竟是什么呢？文档是这样描述的，“Ext.direct.Provider是一个抽象类，用来扩展的。”！太简单了吧，呵呵其实还没说完了，看看这层次图：
Provider
|
+---JsonProvider
|
+---PollingProvider
|
+---RemotingProvider
基类Provider提供了重要的三个属性如下表:
属性：类型 说明
id : String 供应器的id（默认的由Ext.id()方法产生）。如果你没有用全局变量保存着这个供应器，那么你就应该分配一个id来记住这个供应器，以便日后寻找。例如：
view plaincopy to clipboardprint?Ext.Direct.addProvider(
{ type: 'polling', url: 'php/poll.php',
id: 'poll-provider' } ); Ext.Direct.addProvider(
{
type: 'polling',
url: 'php/poll.php',
id: 'poll-provider'
}
);
priority : Number 请求的优先权（priority）,数值愈低表示优先权愈高，0 就表示“双工的”（总是打开）。 所有的供应器默认为1 ，但PollingProvider就除外，默认为3 。
type : String 这是Ext.Direct的类型，这是必须的 ，默认是undefined 。 执行addProvider创建新的供应器的时候就会用到这个类型。 默认可识别的类型如下规格：
polling : PollingProvider
remoting : RemotingProvider
RemotingProvider暴露了在客户端上访问服务端方法的方式方法。 这是一种RPC（remote procedure
call，远程过程调录）的连接类型，即客户端可以初始化服务端上的进程。这样的话，组织代码的时候会更具可维护性，客户端与服务端之间的道路怎么走也会
越加地清晰。如果单使用URL的话这点是不容易做到的。同时，服务端必须将有关类和方法的信息告诉给客户端知道。一般这些配置的信息由服务端的
Ext.Direct包完成，构建一系列的API信息输出。
RemotingProvider.action是一个重要的配置项。它用对象字面化（Object literal）确定服务端的动作或方法。例如，如果供应器（Provider）是如下配置的：
view plaincopy to clipboardprint?
"actions":{ // actions对象下面的属性每个都代表者对应服务端的类。each property within the 'actions' object represents a server side Class
"TestAction":[ // 服务端的类其方法所组成的数组，要将他们暴露给客户端。array of methods within each server side Class to be
{ // stubbed out on client
"name":"doEcho",
"len":1
},{
"name":"multiply",// name of method
"len":2 // 参数的个数是多少。一定要是数字类型，而不能是字符串。The number of parameters that will be used to create an
// array of data to send to the server side function.
// Ensure the server sends back a Number, not a String.
},{
"name":"doForm",
"formHandler":true, // direct the client to use specialized form handling method
"len":1
}]
}
* </code></pre>
* <p>
* 注意Store不是必须的，一个服务端方法可以在任何的时候被调用。下面的例子中我们<b>客户端</b>的方法调用服务端中的“乘法”，就在服务端的“TestAction”类中：
* <br />
* Note that a Store is not required, a server method can be called at any time.
* In the following example a <b>client side</b> handler is used to call the
* server side method "multiply" in the server-side "TestAction" Class:</p>
* <pre><code>
TestAction.multiply(
2, 4, // 这两个参数都会传到服务器中，所以指定len=2。pass two arguments to server, so specify len=2
// 下面的回调函数在服务端调用后执行。callback function after the server is called
// result: the result returned by the server
// e: Ext.Direct.RemotingEvent object result就是由服务端返回的对象，例如Ext.Direct.RemotingEvent类型的对象
function(result, e){
var t = e.getTransaction();
var action = t.action; // 调用服务端的类。server side Class called
var method = t.method; // 调用服务端的方法。server side method called
if(e.status){
var answer = Ext.encode(result); // 8
}else{
var msg = e.message; // 失败的信息 failure message
}
}
);
"actions":{ // actions对象下面的属性每个都代表者对应服务端的类。each property within the 'actions' object represents a server side Class
"TestAction":[ // 服务端的类其方法所组成的数组，要将他们暴露给客户端。array of methods within each server side Class to be
{ // stubbed out on client
"name":"doEcho",
"len":1
},{
"name":"multiply",// name of method
"len":2 // 参数的个数是多少。一定要是数字类型，而不能是字符串。The number of parameters that will be used to create an
// array of data to send to the server side function.
// Ensure the server sends back a Number, not a String.
},{
"name":"doForm",
"formHandler":true, // direct the client to use specialized form handling method
"len":1
}]
}
* </code></pre>
* <p>
* 注意Store不是必须的，一个服务端方法可以在任何的时候被调用。下面的例子中我们<b>客户端</b>的方法调用服务端中的“乘法”，就在服务端的“TestAction”类中：
* <br />
* Note that a Store is not required, a server method can be called at any time.
* In the following example a <b>client side</b> handler is used to call the
* server side method "multiply" in the server-side "TestAction" Class:</p>
* <pre><code>
TestAction.multiply(
2, 4, // 这两个参数都会传到服务器中，所以指定len=2。pass two arguments to server, so specify len=2
// 下面的回调函数在服务端调用后执行。callback function after the server is called
// result: the result returned by the server
// e: Ext.Direct.RemotingEvent object result就是由服务端返回的对象，例如Ext.Direct.RemotingEvent类型的对象
function(result, e){
var t = e.getTransaction();
var action = t.action; // 调用服务端的类。server side Class called
var method = t.method; // 调用服务端的方法。server side method called
if(e.status){
var answer = Ext.encode(result); // 8
}else{
var msg = e.message; // 失败的信息 failure message
}
}
);
上面的例子中，服务端的“multiply”函数会送入两个参数（2和4）。“multiply”函数就应该返回8，最后变为result变量。
另外，设置enableBuffer为true或false决定是否捆绑多个方法调用在一起。如果指定一个数字表示就等待形成一次批调用的机会（默
认为10毫秒）。多个调用按一定的时候聚集在一起然后统一在一次请求中发出，就可以优化程序了，因为减少了服务端之间的往返次数。
配置项namespace则指定了远程供应器的命名空间（默认为浏览器的全局空间window）。完全命名这个空间，或者指定一个String执行隐式命名。
最后介绍PollingProvider似乎更“猛”一些，因为它让笔者感觉Ext有点向Web消息同步的技术挑战，因为我们知道整个Web世界的
模型都是从低成本通讯出发的，白话说就是，客户端要什么，就向服务端请求，我答应你就是，我（服务端）可不主动塞信息给你（客户端），也就是说，客户端从
Server拿了东西就完事了，，越简单的模型越符合低成本通讯的要求，，，---Web之所以是天下做大的网络，可以想象，诸如窄带等的问题不一而足，
条件制约多的很，故所以不能有太奢侈的功能，还是第一代嘛 呵呵。
随着人们的发展（WebIM等等），这方面的需求日益高涨，好比HMTL5就活脱把TCP Stocket拉进来算了。。。
现在Comet长连接/BOSH都是力图先走一步，提供上述问题的解决方案。。。这不，Ext也来奏热闹了，弄了个PollingProvider，比较雏形，我们看看官方的怎么说：
按一定的周期不断轮询服务端。最开始的数据由客户端发出，然后由服务端响应。应该由运行在服务端其余部分的Ext.Direct包来生成PollingProvider的所有配置内容。
创建一个PollingProvider实例可以通过new关键字实现，或者只是指定type = 'polling' 就可以，例如：
var pollA = new Ext.direct.PollingProvider({
type:'polling',
url: 'php/pollA.php',
});
Ext.Direct.addProvider(pollA);
pollA.disconnect();
Ext.Direct.addProvider(
{
type:'polling',
url: 'php/pollB.php',
id: 'pollB-provider'
}
);
var pollB = Ext.Direct.getProvider('pollB-provider');
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ext 3.0新增内容系列文章之三：DWR的替代品Ext.Direct
- Ext 介绍入门之 DWR的替代品Ext.Direct
- 在EXT中直接使用DWR
- Ext.Direct之DirectJNgine使用（一）
- java.lang.ClassNotFoundException: org.directwebremoting.servlet.DwrServlet
- DWR (Direct Web Remoting)
- EXT.NET_DirectMethod 使用
- ExtDirectStoreReadRequest
- 《Ext JS高级程序设计》节选：在CRUD操作中restful的设置以及使用Ext.Direct的问题
- Ext.Direct技术初步
- Ext 3 - Dwr 数据交互 Grid用store : DWRProxy
- DWR (Direct Web Remoting)
- 秀一下正在使用Ext+Dwr开发的一个项目
- ibatis+spring+dwr+ext整合感想
- 简单测试extdirectspring在tomcat上不成功
- DWR Ext 加载数据
- ExtJS下 Ext.Direct加载和提交过程排错小结
- ajax框架学哪个好？jquery/DWR/EXT
- dwr(Direct Web Remoting)的使用
- 《Ext JS高级程序设计》节选：在CRUD操作中restful的设置以及使用Ext.Direct的问题