Ajax2.html
12.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-data-proxy-Ajax-method-constructor'><span id='Ext-data-proxy-Ajax'>/**
</span></span> * @author Ed Spencer
*
* AjaxProxy is one of the most widely-used ways of getting data into your application. It uses AJAX requests to load
* data from the server, usually to be placed into a {@link Ext.data.Store Store}. Let's take a look at a typical setup.
* Here we're going to set up a Store that has an AjaxProxy. To prepare, we'll also set up a {@link Ext.data.Model
* Model}:
*
* Ext.define('User', {
* extend: 'Ext.data.Model',
* fields: ['id', 'name', 'email']
* });
*
* //The Store contains the AjaxProxy as an inline configuration
* var store = Ext.create('Ext.data.Store', {
* model: 'User',
* proxy: {
* type: 'ajax',
* url : 'users.json'
* }
* });
*
* store.load();
*
* Our example is going to load user data into a Store, so we start off by defining a {@link Ext.data.Model Model} with
* the fields that we expect the server to return. Next we set up the Store itself, along with a
* {@link Ext.data.Store#proxy proxy} configuration. This configuration was automatically turned into an
* Ext.data.proxy.Ajax instance, with the url we specified being passed into AjaxProxy's constructor.
* It's as if we'd done this:
*
* new Ext.data.proxy.Ajax({
* url: 'users.json',
* model: 'User',
* reader: 'json'
* });
*
* A couple of extra configurations appeared here - {@link #model} and {@link #reader}. These are set by default when we
* create the proxy via the Store - the Store already knows about the Model, and Proxy's default {@link
* Ext.data.reader.Reader Reader} is {@link Ext.data.reader.Json JsonReader}.
*
* Now when we call store.load(), the AjaxProxy springs into action, making a request to the url we configured
* ('users.json' in this case). As we're performing a read, it sends a GET request to that url (see
* {@link #actionMethods} to customize this - by default any kind of read will be sent as a GET request and any kind of write
* will be sent as a POST request).
*
* # Limitations
*
* AjaxProxy cannot be used to retrieve data from other domains. If your application is running on http://domainA.com it
* cannot load data from http://domainB.com because browsers have a built-in security policy that prohibits domains
* talking to each other via AJAX.
*
* If you need to read data from another domain and can't set up a proxy server (some software that runs on your own
* domain's web server and transparently forwards requests to http://domainB.com, making it look like they actually came
* from http://domainA.com), you can use {@link Ext.data.proxy.JsonP} and a technique known as JSON-P (JSON with
* Padding), which can help you get around the problem so long as the server on http://domainB.com is set up to support
* JSON-P responses. See {@link Ext.data.proxy.JsonP JsonPProxy}'s introduction docs for more details.
*
* # Readers and Writers
*
* AjaxProxy can be configured to use any type of {@link Ext.data.reader.Reader Reader} to decode the server's response.
* If no Reader is supplied, AjaxProxy will default to using a {@link Ext.data.reader.Json JsonReader}. Reader
* configuration can be passed in as a simple object, which the Proxy automatically turns into a {@link
* Ext.data.reader.Reader Reader} instance:
*
* var proxy = new Ext.data.proxy.Ajax({
* model: 'User',
* reader: {
* type: 'xml',
* root: 'users'
* }
* });
*
* proxy.getReader(); //returns an {@link Ext.data.reader.Xml XmlReader} instance based on the config we supplied
*
* # Url generation
*
* AjaxProxy automatically inserts any sorting, filtering, paging and grouping options into the url it generates for
* each request. These are controlled with the following configuration options:
*
* - {@link #pageParam} - controls how the page number is sent to the server (see also {@link #startParam} and {@link #limitParam})
* - {@link #sortParam} - controls how sort information is sent to the server
* - {@link #groupParam} - controls how grouping information is sent to the server
* - {@link #filterParam} - controls how filter information is sent to the server
*
* Each request sent by AjaxProxy is described by an {@link Ext.data.Operation Operation}. To see how we can customize
* the generated urls, let's say we're loading the Proxy with the following Operation:
*
* var operation = new Ext.data.Operation({
* action: 'read',
* page : 2
* });
*
* Now we'll issue the request for this Operation by calling {@link #read}:
*
* var proxy = new Ext.data.proxy.Ajax({
* url: '/users'
* });
*
* proxy.read(operation); //GET /users?page=2
*
* Easy enough - the Proxy just copied the page property from the Operation. We can customize how this page data is sent
* to the server:
*
* var proxy = new Ext.data.proxy.Ajax({
* url: '/users',
* pageParam: 'pageNumber'
* });
*
* proxy.read(operation); //GET /users?pageNumber=2
*
* Alternatively, our Operation could have been configured to send start and limit parameters instead of page:
*
* var operation = new Ext.data.Operation({
* action: 'read',
* start : 50,
* limit : 25
* });
*
* var proxy = new Ext.data.proxy.Ajax({
* url: '/users'
* });
*
* proxy.read(operation); //GET /users?start=50&limit;=25
*
* Again we can customize this url:
*
* var proxy = new Ext.data.proxy.Ajax({
* url: '/users',
* startParam: 'startIndex',
* limitParam: 'limitIndex'
* });
*
* proxy.read(operation); //GET /users?startIndex=50&limitIndex;=25
*
* AjaxProxy will also send sort and filter information to the server. Let's take a look at how this looks with a more
* expressive Operation object:
*
* var operation = new Ext.data.Operation({
* action: 'read',
* sorters: [
* new Ext.util.Sorter({
* property : 'name',
* direction: 'ASC'
* }),
* new Ext.util.Sorter({
* property : 'age',
* direction: 'DESC'
* })
* ],
* filters: [
* new Ext.util.Filter({
* property: 'eyeColor',
* value : 'brown'
* })
* ]
* });
*
* This is the type of object that is generated internally when loading a {@link Ext.data.Store Store} with sorters and
* filters defined. By default the AjaxProxy will JSON encode the sorters and filters, resulting in something like this
* (note that the url is escaped before sending the request, but is left unescaped here for clarity):
*
* var proxy = new Ext.data.proxy.Ajax({
* url: '/users'
* });
*
* proxy.read(operation); //GET /users?sort=[{"property":"name","direction":"ASC"},{"property":"age","direction":"DESC"}]&filter;=[{"property":"eyeColor","value":"brown"}]
*
* We can again customize how this is created by supplying a few configuration options. Let's say our server is set up
* to receive sorting information is a format like "sortBy=name#ASC,age#DESC". We can configure AjaxProxy to provide
* that format like this:
*
* var proxy = new Ext.data.proxy.Ajax({
* url: '/users',
* sortParam: 'sortBy',
* filterParam: 'filterBy',
*
* //our custom implementation of sorter encoding - turns our sorters into "name#ASC,age#DESC"
* encodeSorters: function(sorters) {
* var length = sorters.length,
* sortStrs = [],
* sorter, i;
*
* for (i = 0; i < length; i++) {
* sorter = sorters[i];
*
* sortStrs[i] = sorter.property + '#' + sorter.direction
* }
*
* return sortStrs.join(",");
* }
* });
*
* proxy.read(operation); //GET /users?sortBy=name#ASC,age#DESC&filterBy;=[{"property":"eyeColor","value":"brown"}]
*
* We can also provide a custom {@link #encodeFilters} function to encode our filters.
*
* @constructor
* Note that if this HttpProxy is being used by a {@link Ext.data.Store Store}, then the Store's call to
* {@link Ext.data.Store#method-load load} will override any specified callback and params options. In this case, use the
* {@link Ext.data.Store Store}'s events to modify parameters, or react to loading events.
*
* @param {Object} config (optional) Config object.
* If an options parameter is passed, the singleton {@link Ext.Ajax} object will be used to make the request.
*/
Ext.define('Ext.data.proxy.Ajax', {
requires: ['Ext.util.MixedCollection', 'Ext.Ajax'],
extend: 'Ext.data.proxy.Server',
alias: 'proxy.ajax',
alternateClassName: ['Ext.data.HttpProxy', 'Ext.data.AjaxProxy'],
<span id='Ext-data-proxy-Ajax-property-actionMethods'> /**
</span> * @property {Object} actionMethods
* Mapping of action name to HTTP request method. In the basic AjaxProxy these are set to 'GET' for 'read' actions
* and 'POST' for 'create', 'update' and 'destroy' actions. The {@link Ext.data.proxy.Rest} maps these to the
* correct RESTful methods.
*/
actionMethods: {
create : 'POST',
read : 'GET',
update : 'POST',
destroy: 'POST'
},
<span id='Ext-data-proxy-Ajax-cfg-headers'> /**
</span> * @cfg {Object} headers
* Any headers to add to the Ajax request. Defaults to undefined.
*/
doRequest: function(operation, callback, scope) {
var writer = this.getWriter(),
request = this.buildRequest(operation, callback, scope);
if (operation.allowWrite()) {
request = writer.write(request);
}
Ext.apply(request, {
headers : this.headers,
timeout : this.timeout,
scope : this,
callback : this.createRequestCallback(request, operation, callback, scope),
method : this.getMethod(request),
disableCaching: false // explicitly set it to false, ServerProxy handles caching
});
Ext.Ajax.request(request);
return request;
},
<span id='Ext-data-proxy-Ajax-method-getMethod'> /**
</span> * Returns the HTTP method name for a given request. By default this returns based on a lookup on
* {@link #actionMethods}.
* @param {Ext.data.Request} request The request object
* @return {String} The HTTP method to use (should be one of 'GET', 'POST', 'PUT' or 'DELETE')
*/
getMethod: function(request) {
return this.actionMethods[request.action];
},
<span id='Ext-data-proxy-Ajax-method-createRequestCallback'> /**
</span> * @private
* TODO: This is currently identical to the JsonPProxy version except for the return function's signature. There is a lot
* of code duplication inside the returned function so we need to find a way to DRY this up.
* @param {Ext.data.Request} request The Request object
* @param {Ext.data.Operation} operation The Operation being executed
* @param {Function} callback The callback function to be called when the request completes. This is usually the callback
* passed to doRequest
* @param {Object} scope The scope in which to execute the callback function
* @return {Function} The callback function
*/
createRequestCallback: function(request, operation, callback, scope) {
var me = this;
return function(options, success, response) {
me.processResponse(success, operation, request, response, callback, scope);
};
}
}, function() {
//backwards compatibility, remove in Ext JS 5.0
Ext.data.HttpProxy = this;
});
</pre>
</body>
</html>