Cross-domain Ext.Ajax/Ext.data.Connection

[M101]

Hi,
I have cross domain issue with ext js4.
Does anyone know how to read data from different domain using ext js4 .
or does those code posted in this thread works in ext js 4?

Thanks very much

[justinfalk]

Modified Romanitch's 3.3.1 patch with minor changes to properly handle restful requests with no params.

Ext.lib.Ajax.isCrossDomain = function(u) {
    var match = /(?:(\w*:)\/\/)?([\w\.]*(?::\d*)?)/.exec(u);
    if (!match[1]) return false; // No protocol, not cross-domain
    return (match[1] != location.protocol) || (match[2] != location.host);
};

Ext.override(Ext.data.Connection, {

    request : function(o){
            var me = this;
            if(me.fireEvent("beforerequest", me, o)){
                if (o.el) {
                    if(!Ext.isEmpty(o.indicatorText)){
                        me.indicatorText = '<div class="loading-indicator">'+o.indicatorText+"</div>";
                    }
                    if(me.indicatorText) {
                        Ext.getDom(o.el).innerHTML = me.indicatorText;
                    }
                    o.success = (Ext.isFunction(o.success) ? o.success : function(){}).createInterceptor(function(response) {
                        Ext.getDom(o.el).innerHTML = response.responseText;
                    });
                }

                var p = o.params,
                    url = o.url || me.url,
                    method,
                    cb = {success: me.handleResponse,
                          failure: me.handleFailure,
                          scope: me,
                          argument: {options: o},
                          timeout : Ext.num(o.timeout, me.timeout)
                    },
                    form,
                    serForm;


                if (Ext.isFunction(p)) {
                    p = p.call(o.scope||WINDOW, o);
                }

                p = Ext.urlEncode(me.extraParams, Ext.isObject(p) ? Ext.urlEncode(p) : p);

                if (Ext.isFunction(url)) {
                    url = url.call(o.scope || WINDOW, o);
                }

                if((form = Ext.getDom(o.form))){
                    url = url || form.action;
                     if(o.isUpload || (/multipart\/form-data/i.test(form.getAttribute("enctype")))) {
                         return me.doFormUpload.call(me, o, p, url);
                     }
                    serForm = Ext.lib.Ajax.serializeForm(form);
                    p = p ? (p + '&' + serForm) : serForm;
                }

                method = o.method || me.method || ((p || o.xmlData || o.jsonData) ? 'POST' : 'GET');

                if(method === 'GET' && (me.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
                    var dcp = o.disableCachingParam || me.disableCachingParam;
                    url = Ext.urlAppend(url, dcp + '=' + (new Date().getTime()));
                }

                o.headers = Ext.apply(o.headers || {}, me.defaultHeaders || {});

                if(o.autoAbort === true || me.autoAbort) {
                    me.abort();
                }

                if((method == 'GET' || o.xmlData || o.jsonData) && p){
                    url = Ext.urlAppend(url, p);
                    p = '';
                }
                
                if (o.scriptTag || this.scriptTag || Ext.lib.Ajax.isCrossDomain(url)) {
                   me.transId = this.scriptRequest(method, url, cb, p, o);
                } else {
                   me.transId = Ext.lib.Ajax.request(method, url, cb, p, o)
                }
                return me.transId;
            }else{
                return o.callback ? o.callback.apply(o.scope, [o,undefined,undefined]) : null;
            }
    },
    
    scriptRequest : function(method, url, cb, data, options) {
        var transId = ++Ext.data.ScriptTagProxy.TRANS_ID;
        var trans = {
            id : transId,
            cb : options.callbackName || "stcCallback"+transId,
            scriptId : "stcScript"+transId,
            options : options
        };

        if (!Ext.isEmpty(data))
            url = Ext.urlAppend(url, data)
        url = Ext.urlAppend(url, String.format("{0}={1}", options.callbackParam || this.callbackParam || 'callback', trans.cb));
        
        var conn = this;
        window[trans.cb] = function(o){
            conn.handleScriptResponse(o, trans);
        };

        // Set up the timeout handler
        trans.timeoutId = this.handleScriptFailure.defer(cb.timeout, this, [trans]);

        var script = document.createElement("script");
        script.setAttribute("src", url);
        script.setAttribute("type", "text/javascript");
        script.setAttribute("id", trans.scriptId);
        document.getElementsByTagName("head")[0].appendChild(script);

        return trans;
    },

    handleScriptResponse : function(o, trans){
        this.transId = false;
        this.destroyScriptTrans(trans, true);
        var options = trans.options;
        
        // Attempt to parse a string parameter as XML.
        var doc;
        if (typeof o == 'string') {
            if (window.ActiveXObject) {
                doc = new ActiveXObject("Microsoft.XMLDOM");
                doc.async = "false";
                doc.loadXML(o);
            } else {
                doc = new DOMParser().parseFromString(o,"text/xml");
            }
        }

        // Create the bogus XHR
        response = {
            responseObject: o,
            responseText: (typeof o == "object") ? Ext.util.JSON.encode(o) : String(o),
            responseXML: doc,
            argument: options.argument
        }
        this.fireEvent("requestcomplete", this, response, options);
        Ext.callback(options.success, options.scope, [response, options]);
        Ext.callback(options.callback, options.scope, [options, true, response]);
    },
    
    handleScriptFailure: function(trans) {
        this.transId = false;
        this.destroyScriptTrans(trans, false);
        var options = trans.options;
        response = {
            argument:  options.argument,
            status: 500,
            statusText: 'Server failed to respond',
            responseText: ''
        };
        this.fireEvent("requestexception", this, response, options, {
            status: -1,
            statusText: 'communication failure'
        });
        Ext.callback(options.failure, options.scope, [response, options]);
        Ext.callback(options.callback, options.scope, [options, false, response]);
    },
    
    // private
    destroyScriptTrans : function(trans, isLoaded){
        document.getElementsByTagName("head")[0].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){}
            };
        }
    }
});

[headkit]

Are you telling us you subscribed, or are you trying to subscribe?

you are bored, right?
:-)

[johnsonkid]

Im trying to use the override too. I am able to run the example just fine, but when i run my own application code i get the following error in fireBug which says invalidLabel? Anyone have any ideas? Thanks!

[mystarrocks]

Ditto that.

I got,

invalid label

and it's pointing to the actual JSON object obtained from the server. No other clue as to where the prob would be. Could anyone guess what's wrong here?

EDIT: Got it. From what Animal said,

Of course, since it uses a script tag, the server-side script you  invoke must wrap the returned data in a call to a callback function. So  text must be passed back as a quoted string parameter to a function.

But my response.responseText only returns something like:

 {"totalCount":4,"locations":[{"nid":"43","title":"location1"},{"nid":"44","title":"location2"},{"nid":"39","title":"location3"},{"nid":"41","title":"location4"}]}

from the server. The prob. is can't go about making it look like a string parameter, since I don't have access to modify them. Any workaround like if we can handle it elsewhere?

[kulothungan]

HI,
Please tell me whether the following code is work or not.

Ext.Ajax.request({
params: {Name:'Nigel', Age:20,format: 'xml'},
url: 'http://patentwerkmobile.tambien.nu/ws-Patent.asmx/MyWebMethod',
scriptTag: true,
success: function(response) {
alert("Success");},
failure: function (msg)
{
alert("Failure" + msg);}
});

You can browse the service on browser
http://patentwerkmobile.tambien.nu/ws-Patent.asmx
it will work.

I nee to connect this service from my local machine via Sencha Code.

Please help me ASAP.

Thanks.