Ext 3.0新增内容系列文章之三:DWR的替代品Ext.Direct

上一期的内容谈了DataWriter,实质是与DataReader相对应的产物。今期咱们讲Ext.Direct的内容,无论DataWriter还是Ext.Direct我们都可以先检查一下官方所提供的例子,结合本文,加深理解。

 

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
);

路由器

在客户端与服务端部分方法之间,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);
});

供应器Provider究竟是什么呢?文档是这样描述的,“Ext.direct.Provider是一个抽象类,用来扩展的。”!太简单了吧,呵呵其实还没说完了,看看这层次图:

 

Provider

|

+---JsonProvider

     
|

      +---PollingProvider

      |

      +---RemotingProvider

 

基类Provider提供了重要的三个属性如下表:

属性:类型 说明
id
: String
供应器的id(默认的由Ext.id()方法产生)。如果你没有用全局变量保存着这个供应器,那么你就应该分配一个id来记住这个供应器,以便日后寻找。例如:
 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)是如下配置的:

"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');

 

待续…

时间: 2024-09-18 10:24:49

Ext 3.0新增内容系列文章之三:DWR的替代品Ext.Direct的相关文章

Ext 3.0新增内容系列文章之二:Ext.data.Writer简介

上期我们的内容是关于API接口的配置,其中涉及到CRUD只是略略一提,没有谈论太多,今期再重点说说. 根据CRUD 的原则,数据或资源操作不外乎"生.变.见.灭"的四大规律,也就是说,只需要"创建(Create ).获取(Read ).更新 (Update )和销毁(DELETE )"四种行为便可完成对资源的处理和操作了.如果"读"操作在Ext 中没有题的话,那么其他三种操作就应该归类为"写"的操作了.这部分的内容,在Ext

Ext 3.0新增内容系列文章之一:Ext.data.Api快速一睹

为了确保开发者的DataProxy API使用无误,我们定义了Ext.data.Api单例管理这些数据的API.除了创.见.变.灭的这四种CRUD操作进行了定义之外,还分别将这些操作映射到了RESTful的HTTP方法:GET.POST.PUT和DELETE.   我们不妨打开源码看看.var validActions = {}就是保存"反转Ext.data.Api.actions的哈希表hash",即value变为是key.本单例的一些方法(如getActions.getVerb)会

Ext 2.0.1 Grid 增删改 &amp;amp; DWR 1 实例

运行截图: 这次是真的了, 和数据库同步操作,不过,有安全性问题,建议加密码,一共有20个字段.后台数据 库:

稳扎稳打Silverlight 3.0系列文章索引

相关文章:稳扎稳打Silverlight 2.0系列文章索引 在线DEMO http://www.cnblogs.com/webabcd/archive/2009/08/04/1538238.html 1.稳扎稳打Silverlight(33) - 3.0控件之AutoCompleteBox,DataPager 介绍 Silverlight 3.0 控件一览: AutoCompleteBox - 自动完成控件.当用户输入部分信息后,此控件可以基于指定的过滤算法在一个下拉框中陈列出匹配项 Data

IT软件人员的技术学习内容(写给技术迷茫中的你) - 项目管理系列文章

前面笔者曾经写过一篇关于IT从业者的职业道路文章(见笔者文:IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章).然后有读者提建议说写写技术方面的路线,所以就有了本文.本文从初学者到思想者的四步方面对IT从业者的技术路线做了阐述(见笔者文:IT从业者的学习规划 - 学习者系列文章开篇),从浅到深的对技术路线需要学习的内容做了叙述,后续会对学习者系列文章进行书写,本文就当做该系列文章的一个版图吧. 对于技术路线,笔者认为,在工作之余,就该自我主动的去学习技术和业务方面的知识.一方面是

Asp.net MVC2.0系列文章-显示列表和详细页面操作

上一篇文章,我们简单地完成了新闻的添加操作(Asp.net MVC2.0系列文章-添 加操作)此篇文章,我们使用Asp.net MVC2.0实现新闻清单的展示和新闻详细页面 . 创建View视图Index和NewsDetails 创建新闻首页,用来显示新闻列表. 在Views/News目录下,单击右键,选择Add->View,修改相关配置如下图所 示 在生成的HTML代码中,进行相关展示方面的修改.主要代码如下: <% foreach (var item in Model) { %> &

8、项目管理基本内容 - 项目管理系列文章

在前面的项目管理系列文章中,笔者已经对项目管理的项目组的相关管理内容做了介绍,从最基本的招聘,到相关的项目组管理方法等都有描述.今天本文就从项目组管理的基本内容出发,对项目的管理内容做个基本介绍. 一.项目业务文档编写: 项目文档是项目的最基本内容,其主要是根据项目经理与项目的业务需求人员进行沟通之后进行编写的内容,就是项目的业务文档,描述了项目的具体功能需求内容,也是项目进行开发的具体内容,项目组与业务人员进行沟通交流的基石.   二.项目的基本原型内容编写: 在进行了项目业务文档记录之后,如

IT人经济思维之投资 - 创业与投资系列文章

前面笔者写过一个文(IT从业者的职业规划),主要通过笔者的从业道路的经验,介绍了IT从业者的职业选择道路问题,主要从技术.业务和管理三大方面进行了描述.然后,通过文(IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章)介绍了职业道路上的职业角色,描述了从一个技术人员到管理人员的角色变换道路.当然,IT从业者有很多种角色(见笔者文:软件项目角色指南-开篇),而且,每个IT从业者选择的角色和道路不一定一样,但是,笔者的职业道路经验是能够复制的,这个通过笔者的博文就能看得出来. 但是,今

Dreamweaver 4.0 新增功能全接触

dreamweaver MacroMedia公司在2000年11月13日发布了Dreamweaver 4.0,它的出现把Dreamweaver的竞争对手远远甩在了后面,稳坐可视化网页编辑软件的头把交椅,作为Dreamweaver 3.0 的升级产品Dreamweaver 4.0并没有质的飞跃,它基本保持了Dreamweaver3.0的界面风格,唯一不同的是多了几个浮动面板,要是不太细心的话还以为是Dreamweaver3.0,Dreamweaver4.0到底有什么新东东?让我来给您详细介绍Dre