Use Ajax
After some pages are completed, you have understood the interaction principle between pages and scripts ). Next, you should know that,
How to exchange data with a remote server, usually load data from a database or save data)
To the database. Ajax is used to asynchronously exchange data without refreshing JavaScript. EXT built-in excellent Ajax support
For example, a common user operation is to asynchronously send something to the server, and then the UI element responds according to (response)
Make an update. This is a form that contains text input. a div is used to display the message (↓, you can add it to extstart.html
Below Code But this must be used to access the server ):
<Div id = "MSG" style = "visibility: hidden"> </div>
Name: <input type = "text" id = "name"/> <br/>
<Input type = "button" id = "okbutton" value = "OK"/>
Next, we add the JavaScript code for processing the exchange data to the extstart. js file (overwrite it with the following code ):
Ext. onready (function (){
Ext. Get ('okclick'). On ('click', function (){
VaR MSG = ext. Get ('msg ');
MSG. Load ({
URL: [server url], // change to your url
Params: 'name = '+ Ext. Get ('name'). Dom. value,
Text: 'updating ...'
});
MSG. Show ();
});
});
This mode looks familiar! First, obtain the button element and add the event listening. In the event Processor
Handler), we use an ext built-in class that handles Ajax requests, accepts responses, and updates another element
Updatemanager. Updatemanager can be used directly, or, like our current practice, through the load side of the element
(In this example, the element is a div with the ID of "MSG ). When the element. load method is used, the request will be processed
Send and wait for the response from the server to automatically replace the innerhtml of the element. Simply input the server URL and add the following words
You can process this request (in this example, the parameter value comes from the value of the "name" element), and the text value is prompted when the request is sent.
Text, and then the DIV of the MSG is displayed (because it is hidden by default at the beginning ). Of course, like most ext components, updatemanager
There are many optional parameters, and different Ajax requests have different solutions. Here we only show the simplest one.
