/** * @class Ext.data.ScriptTagProxy * @extends Ext.data.DataProxy * An implementation of Ext.data.DataProxy that reads a data object from a URL which may be in a domain * other than the originating domain of the running page.
** Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain * of the running page, you must use this class, rather than HttpProxy.
** The content passed back from a server resource requested by a ScriptTagProxy must be executable JavaScript * source code because it is used as the source inside a <script> tag.
** In order for the browser to process the returned data, the server must wrap the data object * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy. * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy * depending on whether the callback name was passed: *
*
*boolean scriptTag = false; String cb = request.getParameter("callback"); if (cb != null) { scriptTag = true; response.setContentType("text/javascript"); } else { response.setContentType("application/x-json"); } Writer out = response.getWriter(); if (scriptTag) { out.write(cb + "("); } out.print(dataBlock.toJsonString()); if (scriptTag) { out.write(");"); }Below is a PHP example to do the same thing:
*$callback = $_REQUEST['callback']; // Create the output object. $output = array('a' => 'Apple', 'b' => 'Banana'); //start output if ($callback) { header('Content-Type: text/javascript'); echo $callback . '(' . json_encode($output) . ');'; } else { header('Content-Type: application/x-json'); echo json_encode($output); }Below is the ASP.Net code to do the same thing:
* * @constructor * @param {Object} config A configuration object. */ Ext.data.ScriptTagProxy = function(config){ Ext.apply(this, config); Ext.data.ScriptTagProxy.superclass.constructor.call(this, config); this.head = document.getElementsByTagName("head")[0]; /** * @event loadexception * Deprecated in favor of 'exception' event. * Fires if an exception occurs in the Proxy during data loading. This event can be fired for one of two reasons: *String jsonString = "{success: true}"; String cb = Request.Params.Get("callback"); String responseString = ""; if (!String.IsNullOrEmpty(cb)) { responseString = cb + "(" + jsonString + ")"; } else { responseString = jsonString; } Response.Write(responseString);
The server-side processing must read this parameter value, and generate * javascript output which calls this named function passing the data object as its only parameter. */ callbackParam : "callback",
/** * @cfg {Boolean} nocache (optional) Defaults to true. Disable caching by adding a unique parameter * name to the request. */ nocache : true, /** * HttpProxy implementation of DataProxy#doRequest * @param {String} action * @param {Ext.data.Record/Ext.data.Record[]} rs If action is read, rs will be null * @param {Object} params An object containing properties which are to be used as HTTP parameters * for the request to the remote server. * @param {Ext.data.DataReader} reader The Reader object which converts the data * object into a block of Ext.data.Records. * @param {Function} callback The function into which to pass the block of Ext.data.Records. * The function must be passedthis reference) in which the callback function is executed. Defaults to the browser window.
* @param {Object} arg An optional argument which is passed to the callback as its second parameter.
*/
doRequest : function(action, rs, params, reader, callback, scope, arg) {
var p = Ext.urlEncode(Ext.apply(params, this.extraParams));
var url = this.buildUrl(action, rs);
if (!url) {
throw new Ext.data.Api.Error('invalid-url', url);
}
url = Ext.urlAppend(url, p);
if(this.nocache){
url = Ext.urlAppend(url, '_dc=' + (new Date().getTime()));
}
var transId = ++Ext.data.ScriptTagProxy.TRANS_ID;
var trans = {
id : transId,
action: action,
cb : "stcCallback"+transId,
scriptId : "stcScript"+transId,
params : params,
arg : arg,
url : url,
callback : callback,
scope : scope,
reader : reader
};
window[trans.cb] = this.createCallback(action, rs, trans);
url += String.format("&{0}={1}", this.callbackParam, trans.cb);
if(this.autoAbort !== false){
this.abort();
}
trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
var script = document.createElement("script");
script.setAttribute("src", url);
script.setAttribute("type", "text/javascript");
script.setAttribute("id", trans.scriptId);
this.head.appendChild(script);
this.trans = trans;
},
// @private createCallback
createCallback : function(action, rs, trans) {
var self = this;
return function(res) {
self.trans = false;
self.destroyTrans(trans, true);
if (action === Ext.data.Api.actions.read) {
self.onRead.call(self, action, trans, res);
} else {
self.onWrite.call(self, action, trans, res, rs);
}
};
},
/**
* Callback for read actions
* @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
* @param {Object} trans The request transaction object
* @param {Object} res The server response
* @protected
*/
onRead : function(action, trans, res) {
var result;
try {
result = trans.reader.readRecords(res);
}catch(e){
// @deprecated: fire loadexception
this.fireEvent("loadexception", this, trans, res, e);
this.fireEvent('exception', this, 'response', action, trans, res, e);
trans.callback.call(trans.scope||window, null, trans.arg, false);
return;
}
if (result.success === false) {
// @deprecated: fire old loadexception for backwards-compat.
this.fireEvent('loadexception', this, trans, res);
this.fireEvent('exception', this, 'remote', action, trans, res, null);
} else {
this.fireEvent("load", this, res, trans.arg);
}
trans.callback.call(trans.scope||window, result, trans.arg, result.success);
},
/**
* Callback for write actions
* @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
* @param {Object} trans The request transaction object
* @param {Object} res The server response
* @protected
*/
onWrite : function(action, trans, response, rs) {
var reader = trans.reader;
try {
// though we already have a response object here in STP, run through readResponse to catch any meta-data exceptions.
var res = reader.readResponse(action, response);
} catch (e) {
this.fireEvent('exception', this, 'response', action, trans, res, e);
trans.callback.call(trans.scope||window, null, res, false);
return;
}
if(!res.success === true){
this.fireEvent('exception', this, 'remote', action, trans, res, rs);
trans.callback.call(trans.scope||window, null, res, false);
return;
}
this.fireEvent("write", this, action, res.data, res, rs, trans.arg );
trans.callback.call(trans.scope||window, res.data, res, true);
},
// private
isLoading : function(){
return this.trans ? true : false;
},
/**
* Abort the current server request.
*/
abort : function(){
if(this.isLoading()){
this.destroyTrans(this.trans);
}
},
// private
destroyTrans : function(trans, isLoaded){
this.head.removeChild(document.getElementById(trans.scriptId));
clearTimeout(trans.timeoutId);
if(isLoaded){
window[trans.cb] = undefined;
try{
delete window[trans.cb];
}catch(e){}
}else{
// if hasn't been loaded, wait for load to remove it to prevent script error
window[trans.cb] = function(){
window[trans.cb] = undefined;
try{
delete window[trans.cb];
}catch(e){}
};
}
},
// private
handleFailure : function(trans){
this.trans = false;
this.destroyTrans(trans, false);
if (trans.action === Ext.data.Api.actions.read) {
// @deprecated firing loadexception
this.fireEvent("loadexception", this, null, trans.arg);
}
this.fireEvent('exception', this, 'response', trans.action, {
response: null,
options: trans.arg
});
trans.callback.call(trans.scope||window, null, trans.arg, false);
},
// inherit docs
destroy: function(){
this.abort();
Ext.data.ScriptTagProxy.superclass.destroy.call(this);
}
});