EXT 3.0 New Content Series Article 3: Alternatives to DWR Ext. Direct

In the previous issue, we talked about datawriter, which is essentially a product corresponding to datareader. In this issue, let's talk about Ext. Direct. Whether it's datawriter or ext. Direct, We can first check the official examples and combine them with this article to deepen our understanding.

 

Ext. direct aims to provide a seamless streamline between the client and the server to form a single interface, so that we can reduce some tedious coding, for example, data verification and returned data packets (read data and error conditions ). There are several classes in the Ext. Direct namespace to be more closely integrated with the server. The data produced by some Ext. Direct methods can be transferred to Ext. Data. Stores for processing through Ext. Data and other classes.

 

Supplies

The Ext. Direct architecture belongs to the "provider" architecture. One or more supplies are responsible for transmitting data to the server. There are several key supplies:

• Jsonprovider
  Simple JSON operations
• Pollingprovider polls the provider for repeated requests.
• Remotingprovider exposes the provider to the client.

The instance itself cannot be used directly. You should use Ext. Direct. Add () to add the instance. This method adds an Ext. Direct Supply and creates a proxy, or I can understand that IE takes a snapshot of the method executed on the server. If no link is available, the link is automatically linked. The following example creates two providers.

VaR pollprov = new Ext. direct. pollingprovider ({<br/> URL: 'php/poll2.php' <br/>}); <br/> Ext. direct. addprovider (<br/>{< br/> "type": "remoting", // create a Ext. direct. remotingprovider <br/> "url": "php // router. PHP ", // URL to connect to the ext. direct server-side router. <br/> "actions": {// each property within the actions object represents a class <br/> "testaction ": [// array of methods within each server side class <br/>{< br/> "name": "doecho ", // name of method <br/> "len": 1 <br/>},{ <br/> "name": "Multiply ", <br/> "len": 1 <br/>},{ <br/> "name": "doform", <br/> "formhandler": True, // handle form on server with ext. direct. transaction <br/> "len": 1 <br/>}] <br/>}, <br/> "namespace": "myapplication ", // namespace to create the remoting provider in <br/>}, {<br/> type: 'polling', // create a Ext. direct. pollingprovider <br/> URL: 'php/poll. php' <br/>}, <br/> pollprov // reference to previusly created instance <br/>); <br/>

Vro

Between some methods on the client and the server side, ext. Direct uses the "Router" concept of the server side to directly request requests.
Because Ext. direct is truly platform-independent, so you can replace it with the C # server immediately on the server where Java is the solution, you do not need to make any changes or modifications to JavaScript during the process.

 

Server events.

For events notified by the server, you can add an event listener to receive and trigger the event:

{"Type": "Event", "name": "message", "data": "successfully polled: 11:19:30 am "}< br/> // The processing function of the event corresponding to the" message "on the server. Add a handler for a 'message' event sent by the server <br/> Ext. direct. on ('message', function (e) {<br/> out. append (string. format ('<p> <I> {0} </I> </P>', E. data); <br/> out. el. scrollto ('T', 100000, true); <br/>}); <br/>

What is the provider? The document describes this as follows: "Ext. Direct. provider is an abstract class for extension ."! It's too simple. You haven't actually finished it yet. Let's look at this level chart:

 

Provider

|

+ --- Jsonprovider

|

+ --- Pollingprovider

|

+ --- Remotingprovider

 

The base class provider provides the following three important attributes:

Property: Type	Description
ID : String	The ID of the supplier (generated by the Ext. ID () method by default ). If you do not use a global variable to save the Token, you should assign an ID to remember the token for future search. For example: Ext.Direct.addProvider( { type: 'polling', url: 'php/poll.php', id: 'poll-provider' });
Priority : Number	Request priority. The lower the value, the higher the priority,0 It indicates "duplex" (always open ). Default Value:1 Except pollingprovider. The default value is3 .
Type : String	This is the Ext. Direct type, and this isRequired The default value isUndefined . This type is used when addprovider is executed to create a new supply. The following types are identifiable by default: Polling : Pollingprovider Remoting : Remotingprovider

Remotingprovider exposes the methods used to access the server on the client.
This is a Remote Procedure Call (RPC) connection type, that is, the client can initialize processes on the server. In this way, the code is more maintainability, and the path between the client and the server is clearer and clearer. This is not easy if you use a URL. At the same time, the server must tell the client about classes and methods. Generally, the configuration information is completed by the server's Ext. Direct package, and a series of API information output are constructed.

Remotingprovider. Action is an important configuration item. It uses Object literal to determine the actions or methods of the server. For example, if the provider is configured as follows:

"Actions": {// each attribute under the actions object represents the class of the provider's server. Each property within the 'actions' object represents a server side class <br/> "testaction": [// an array composed of methods of the server class, expose them to the client. Array of methods within each server side class to be <br/> {// stubbed out on client <br/> "name": "doecho ", <br/> "len": 1 <br/>},{ <br/> "name": "Multiply ", // name of method <br/> "len": 2 // the number of parameters. It must be a number, not a string. The number of parameters that will be used to create an <br/> // array of data to send to the server side function. <br/> // ensure the server sends back a number, not a string. <br/>},{ <br/> "name": "doform", <br/> "formhandler": True, // direct the client to use specialized form handling method <br/> "len ": 1 <br/>}] <br/>}< br/> * </code> </PRE> <br/> * <p> <br/> * Note store not mandatory, A server method can be called at any time. In the following example, the <B> client </B> method calls the "multiplication" in the server, which is in the "testaction" Class of the server: <br/> * Note that a store is not required, a server method can be called at any time. <br/> * in the following example a <B> Client Side </B> handler is used to call the <br/> * server side method "Multiply" in the server- side "testaction" class: </P> <br/> * <PRE> <code> <br/> testaction. multiply (<br/> 2, 4, // both parameters are uploaded to the server, so the Len = 2. Pass two arguments to server, so specify Len = 2 <br/> // The following callback function is executed after being called by the server. Callback Function after the server is called <br/> // result: the result returned by the server <br/> // E: ext. direct. remotingevent object result is the object returned by the server, such as Ext. direct. remotingevent type object <br/> function (result, e) {<br/> var T = E. gettransaction (); <br/> var action = T. action; // call the server class. Server Side class called <br/> VaR method = T. method; // call the method of the server. Server Side method called <br/> If (E. status) {<br/> var answer = ext. encode (result); // 8 </P> <p >}else {<br/> var MSG = E. message; // failed message failure message <br/>}< br/> );

 

In the above example, the "Multiply" function of the server will send two parameters (2 and 4 ). The "Multiply" function should return 8 and change to the result variable.

In addition, setting enablebuffer to true or false determines whether to bind multiple methods to call together. If a number is specified, the request is waiting for a batch call (10 ms by default ). When multiple calls are aggregated and then unified in one request, the program can be optimized because the number of round-trips between servers is reduced.

The namespace of the configuration item specifies the namespace (the global space window of the browser by default) of the Remote Supply ). Completely name the space, or specify a string for implicit naming.

 

Finally, the introduction of pollingprovider seems more "Fierce", because it makes the author feel that ext is a bit challenging to the web message synchronization technology, because we know that the entire web world model is based on low-cost communication, in other words, if the client wants anything, it will send a request to the server. I promise you that I (the server) will not actively inject information to you (the client), that is, the simpler the model, the simpler the client is to meet the requirements of low-cost communication. The reason why Web is a world-wide network can be imagined, narrow Band and other problems are inadequate, and many conditions are restricted. Therefore, there cannot be too many luxury functions, or the first generation.

With the development of people (webim and so on), the demand for this is increasing. For example, hmtl5 just pulled TCP stocket in...

Now comet persistent connection/Bosh is trying to take a step first to provide solutions to the above problems... This is not the case. ext is also playing a lively game. It's a prototype of pollingprovider. Let's take a look at what the official website says:

 

Poll the server continuously for a certain period of time. The initial data is sent by the client and then responded by the server. All the configuration content of pollingprovider should be generated by the Ext. Direct package running in the rest of the server.

 

You can use the new keyword to create a pollingprovider instance, or specifyType = 'polling'
For example:

VaR polla = new Ext. direct. pollingprovider ({<br/> type: 'pollinging', <br/> URL: 'php/polla. php', <br/>}); <br/> Ext. direct. addprovider (polla); <br/> polla. disconnect (); <br/> Ext. direct. addprovider (<br/>{< br/> type: 'polling', <br/> URL: 'php/pollb. php', <br/> ID: 'pollb-provider' <br/>}< br/>); <br/> var pollb = ext. direct. getprovider ('llb-provider'); <br/>

 

To be continued...