EXT introduction to getting started to replace DWR Ext. Direct

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 operation
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 ({
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 previusly 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 previusly created instance
);
 

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 at: 11:19:30 am "}
// The processing function corresponding to the "message" event on the server. 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 "}
// The processing function corresponding to the "message" event on the server. 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 );
});
 

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:

Attribute: type description
ID: ID of the string supply (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:

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: the priority of the number request. The lower the value, the higher the priority. 0 indicates "duplex" (always open ). All supplies are 1 by default, except pollingprovider. The default value is 3.
Type: String This is the Ext. Direct type, which is required. The default value is undefined. 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:

View plaincopy to clipboardprint?
"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
"Testaction": [// an array composed of methods of the server class, which must be exposed to the client. 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. It must be a number, not a string. The number of parameters that will be used to create
// 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>
* Note that store is not required. 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.
* In the following example a <B> Client Side </B> handler is used to call
* Server side method "Multiply" in the server-side "testaction" Class: </P>
* <PRE> <code>
Testaction. Multiply (
2, 4, // both parameters are uploaded to the server, So Len = 2 is specified. Pass two arguments to server, so specify Len = 2
// The following callback function is executed after being called by the server. Callback Function after the server is called
// Result: the result returned by the server
// E: Ext. Direct. remotingevent object result is the object returned by the server, for example, ext. Direct. remotingevent type object.
Function (result, e ){
VaR T = E. gettransaction ();
VaR action = T. Action; // call the server class. Server Side class called
VaR method = T. method; // call the method of the server. Server Side method called
If (E. Status ){
VaR answer = ext. encode (result); // 8

} Else {
VaR MSG = E. Message; // failure message
}
}
);
"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
"Testaction": [// an array composed of methods of the server class, which must be exposed to the client. 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. It must be a number, not a string. The number of parameters that will be used to create
// 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>
* Note that store is not required. 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.
* In the following example a <B> Client Side </B> handler is used to call
* Server side method "Multiply" in the server-side "testaction" Class: </P>
* <PRE> <code>
Testaction. Multiply (
2, 4, // both parameters are uploaded to the server, So Len = 2 is specified. Pass two arguments to server, so specify Len = 2
// The following callback function is executed after being called by the server. Callback Function after the server is called
// Result: the result returned by the server
// E: Ext. Direct. remotingevent object result is the object returned by the server, for example, ext. Direct. remotingevent type object.
Function (result, e ){
VaR T = E. gettransaction ();
VaR action = T. Action; // call the server class. Server Side class called
VaR method = T. method; // call the method of the server. Server Side method called
If (E. Status ){
VaR answer = ext. encode (result); // 8

} Else {
VaR MSG = E. Message; // failure message
}
}
);

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 create a pollingprovider instance by using the new keyword or by specifying type = 'pollinging'. For example:

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: 'llb-provider'
}
);
VaR pollb = ext. Direct. getprovider ('pollb-provider ');