The class encapsulates a connection to the page's originating domain, allowing requests to be made * either to a configured URL, or to a URL specified at request time.
*Requests made by this class are asynchronous, and will return immediately. No data from * the server will be available to the statement immediately following the {@link #request} call. * To process returned data, use a * success callback * in the request options object, * or an {@link #requestcomplete event listener}.
*The server response is parsed by the browser to create the document for the IFRAME. If the * server is using JSON to send the return object, then the * Content-Type header * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
*Characters which are significant to an HTML parser must be sent as HTML entities, so encode * "<" as "<", "&" as "&" etc.
*The response text is retrieved from the document, and a fake XMLHttpRequest object * is created containing a responseText property in order to conform to the * requirements of event handlers and callbacks.
*Be aware that file upload packets are sent with the content type multipart/form * and some server technologies (notably JEE) may require some custom processing in order to * retrieve parameter names and parameter values from the packet content.
* @constructor * @param {Object} config a configuration object. */ Ext.data.Connection = function(config){ Ext.apply(this, config); this.addEvents( /** * @event beforerequest * Fires before a network request is made to retrieve a data object. * @param {Connection} conn This Connection object. * @param {Object} options The options config object passed to the {@link #request} method. */ "beforerequest", /** * @event requestcomplete * Fires if the request was successfully completed. * @param {Connection} conn This Connection object. * @param {Object} response The XHR object containing the response data. * See The XMLHttpRequest Object * for details. * @param {Object} options The options config object passed to the {@link #request} method. */ "requestcomplete", /** * @event requestexception * Fires if an error HTTP status was returned from the server. * See HTTP Status Code Definitions * for details of HTTP status codes. * @param {Connection} conn This Connection object. * @param {Object} response The XHR object containing the response data. * See The XMLHttpRequest Object * for details. * @param {Object} options The options config object passed to the {@link #request} method. */ "requestexception" ); Ext.data.Connection.superclass.constructor.call(this); }; Ext.extend(Ext.data.Connection, Ext.util.Observable, { /** * @cfg {String} url (Optional)The default URL to be used for requests to the server. Defaults to undefined.
*The url config may be a function which returns the URL to use for the Ajax request. The scope
* (this reference) of the function is the scope option passed to the {@link #request} method.
Sends an HTTP request to a remote server.
*Important: Ajax server requests are asynchronous, and this call will * return before the response has been received. Process any returned data * in a callback function.
*To execute a callback function in the correct scope, use the scope option.
* @param {Object} options An object which may contain the following properties:The URL to
* which to send the request, or a function to call which returns a URL string. The scope (this reference) of the
* function is specified by the scope option. Defaults to configured URL.
*
The url config may be a function which returns the URL to use for the Ajax request. The scope
* (this reference) of the function is the scope option passed to the {@link #request} method.
True if the form object is a file upload (will be set automatically if the form was * configured with enctype "multipart/form-data").
*File uploads are not performed using normal "Ajax" techniques, that is they are not * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the * DOM <form> element temporarily modified to have its * target set to refer * to a dynamically generated, hidden <iframe> which is inserted into the document * but removed after the return data has been gathered.
*The server response is parsed by the browser to create the document for the IFRAME. If the * server is using JSON to send the return object, then the * Content-Type header * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
*The response text is retrieved from the document, and a fake XMLHttpRequest object * is created containing a responseText property in order to conform to the * requirements of event handlers and callbacks.
*Be aware that file upload packets are sent with the content type multipart/form * and some server technologies (notably JEE) may require some custom processing in order to * retrieve parameter names and parameter values from the packet content.
*The options object may also contain any other property which might be needed to perform * postprocessing in a callback because it is passed to callback functions.
* @return {Number} transactionId The id of the server transaction. This may be used * to cancel the request. */ request : function(o){ if(this.fireEvent("beforerequest", this, o) !== false){ var p = o.params; if(typeof p == "function"){ p = p.call(o.scope||window, o); } if(typeof p == "object"){ p = Ext.urlEncode(p); } if(this.extraParams){ var extras = Ext.urlEncode(this.extraParams); p = p ? (p + '&' + extras) : extras; } var url = o.url || this.url; if(typeof url == 'function'){ url = url.call(o.scope||window, o); } if(o.form){ var form = Ext.getDom(o.form); url = url || form.action; var enctype = form.getAttribute("enctype"); if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){ return this.doFormUpload(o, p, url); } var f = Ext.lib.Ajax.serializeForm(form); p = p ? (p + '&' + f) : f; } var hs = o.headers; if(this.defaultHeaders){ hs = Ext.apply(hs || {}, this.defaultHeaders); if(!o.headers){ o.headers = hs; } } var cb = { success: this.handleResponse, failure: this.handleFailure, scope: this, argument: {options: o}, timeout : o.timeout || this.timeout }; var method = o.method||this.method||((p || o.xmlData || o.jsonData) ? "POST" : "GET"); if(method == 'GET' && (this.disableCaching && o.disableCaching !== false) || o.disableCaching === true){ var dcp = o.disableCachingParam || this.disableCachingParam; url += (url.indexOf('?') != -1 ? '&' : '?') + dcp + '=' + (new Date().getTime()); } if(typeof o.autoAbort == 'boolean'){ // options gets top priority if(o.autoAbort){ this.abort(); } }else if(this.autoAbort !== false){ this.abort(); } if((method == 'GET' || o.xmlData || o.jsonData) && p){ url += (url.indexOf('?') != -1 ? '&' : '?') + p; p = ''; } this.transId = Ext.lib.Ajax.request(method, url, cb, p, o); return this.transId; }else{ Ext.callback(o.callback, o.scope, [o, null, null]); return null; } }, /** * Determine whether this object has a request outstanding. * @param {Number} transactionId (Optional) defaults to the last transaction * @return {Boolean} True if there is an outstanding request. */ isLoading : function(transId){ if(transId){ return Ext.lib.Ajax.isCallInProgress(transId); }else{ return this.transId ? true : false; } }, /** * Aborts any outstanding request. * @param {Number} transactionId (Optional) defaults to the last transaction */ abort : function(transId){ if(transId || this.isLoading()){ Ext.lib.Ajax.abort(transId || this.transId); } }, // private handleResponse : function(response){ this.transId = false; var options = response.argument.options; response.argument = options ? options.argument : null; this.fireEvent("requestcomplete", this, response, options); Ext.callback(options.success, options.scope, [response, options]); Ext.callback(options.callback, options.scope, [options, true, response]); }, // private handleFailure : function(response, e){ this.transId = false; var options = response.argument.options; response.argument = options ? options.argument : null; this.fireEvent("requestexception", this, response, options, e); Ext.callback(options.failure, options.scope, [response, options]); Ext.callback(options.callback, options.scope, [options, false, response]); }, // private doFormUpload : function(o, ps, url){ var id = Ext.id(); var frame = document.createElement('iframe'); frame.id = id; frame.name = id; frame.className = 'x-hidden'; if(Ext.isIE){ frame.src = Ext.SSL_SECURE_URL; } document.body.appendChild(frame); if(Ext.isIE){ document.frames[id].name = id; } var form = Ext.getDom(o.form), buf = { target: form.target, method: form.method, encoding: form.encoding, enctype: form.enctype, action: form.action }; form.target = id; form.method = 'POST'; form.enctype = form.encoding = 'multipart/form-data'; if(url){ form.action = url; } var hiddens, hd; if(ps){ // add dynamic params hiddens = []; ps = Ext.urlDecode(ps, false); for(var k in ps){ if(ps.hasOwnProperty(k)){ hd = document.createElement('input'); hd.type = 'hidden'; hd.name = k; hd.value = ps[k]; form.appendChild(hd); hiddens.push(hd); } } } function cb(){ var r = { // bogus response object responseText : '', responseXML : null }; r.argument = o ? o.argument : null; try { // var doc; if(Ext.isIE){ doc = frame.contentWindow.document; }else { doc = (frame.contentDocument || window.frames[id].document); } if(doc && doc.body){ r.responseText = doc.body.innerHTML; } if(doc && doc.XMLDocument){ r.responseXML = doc.XMLDocument; }else { r.responseXML = doc; } } catch(e) { // ignore } Ext.EventManager.removeListener(frame, 'load', cb, this); this.fireEvent("requestcomplete", this, r, o); Ext.callback(o.success, o.scope, [r, o]); Ext.callback(o.callback, o.scope, [o, true, r]); setTimeout(function(){Ext.removeNode(frame);}, 100); } Ext.EventManager.on(frame, 'load', cb, this); form.submit(); form.target = buf.target; form.method = buf.method; form.enctype = buf.enctype; form.encoding = buf.encoding; form.action = buf.action; if(hiddens){ // remove dynamic params for(var i = 0, len = hiddens.length; i < len; i++){ Ext.removeNode(hiddens[i]); } } } }); /** * @class Ext.Ajax * @extends Ext.data.Connection * Global Ajax request class. Provides a simple way to make Ajax requests with maximum flexibility. Example usage: *
// Basic request
Ext.Ajax.request({
url: 'foo.php',
success: someFn,
failure: otherFn,
headers: {
'my-header': 'foo'
},
params: { foo: 'bar' }
});
// Simple ajax form submission
Ext.Ajax.request({
form: 'some-form',
params: 'foo=bar'
});
// Default headers to pass in every request
Ext.Ajax.defaultHeaders = {
'Powered-By': 'Ext'
};
// Global Ajax events can be handled on every request!
Ext.Ajax.on('beforerequest', this.showSpinner, this);