Send user details (session token) within every AJAX requests (Sencha Touch 2)

Question

i am building a Sencha Touch 2 Application with userspecific datasets.

Architecture of the App:

Sencha Touch App <=====> Java Server backend with REST Services ( many AJAX requests =) )

What i actually have is:

Login the user with username/password

The app gets initialized and the loginform comes into play. After submitting the form as a AJAX request, the server backend checks the userdata and calls the client callback function.

And what i want to do is:

The callback function should
1. create a cookie with the sessiontoken or
2. store the sessiontoken within the localstorage (http://docs.sencha.com/touch/2-0/#!/api/Ext.data.proxy.LocalStorage) or
3. store the sessiontoken within js variable

Okay, shouldn't be the problem.

But how can i achieve the following:

Most of the data is specific for one user and should be returned by the REST service if needed (by clicking on the navigation,...). How can i send the sessiontoken (see above) within every AJAX request - so the server can provide the suitable datasets (assuming the token is valid)?

Send cookies within AJAX requests

I have already read that cookies gets automaticly added to the request if the url is on the same space, right? The Java Server is on the same domain (localhost:8080) but the cookies aren't available - instead of requests on urls like 'app.json'. I thought that cross-domain-requests are really domain specific?

Send paramaters within AJAX requests

Because the cookies aren't avi i thought about the possiblity of 'manually' adding parameters to the ajax requests. The App will contain many AJAX requests and thats why i dont want to add the token manually - i tried to override the requests function of Ext.Ajax but i failed ;-( :

(function() {
    var originalRequest = Ext.data.Connection.prototype.request;

    Ext.override(Ext.data.Connection, {
        request : function(options) {
            alert("Do sth... like add params");
            return originalRequest.apply(this, options);
        }
    });
})();

ERROR:

Uncaught Error: [ERROR][Ext.data.Connection#request] No URL specified

I also tried to add a listener

Ext.Ajax.add({
    listeners : {
        beforerequest :  function( conn, options, eOpts ){
           alert("Do sth... like add params");
        }
     }
});

ERROR:

Uncaught TypeError: Object [object Object] has no method 'add'

Any idea about how i can add the token?

Or any better way of handling these case?

Thanks!

Just a quick advice : Go to read the documentation when you get something like 'has not method xxx' (docs.sencha.com/touch/2-0/#!/api/Ext.Ajax) If you take a look at the method for Ext.Ajax there's no 'add' method. That's also not the proper way to add a listener. To add a listener, use the 'on' method (docs.sencha.com/touch/2-0/#!/api/Ext.Ajax-method-on). — Titouan de Bailleul
@tdebailleul You're right, my fault. I've added such a interceptor and it seems to work now - i add a new param to every request. — judomu

judomu judomu · Accepted Answer · 2012-08-20T11:28:30

Finally i successfully used:

function addAjaxInterceptor(context)
{
   Ext.Ajax.on('beforerequest', function(conn, options, eOptions)
   {
      // add the param to options...
   }, context);
}

Executed from the app (=> addAjaxInterceptor(this)).

But the following solution is more suitable for my situation i think:

Ext.Ajax._defaultHeaders = {
    // params as json
};

(Cause Ext.Ajax is a singleton object and i dont change the params for every request)

Send user details (session token) within every AJAX requests (Sencha Touch 2)

Architecture of the App:

1 Answers