CODEWITHSUNDEEP
sencha-touchsencha-touch-2
user1364743
user1364743

Reputation: 5661

Cross-domain requests does not work using Sencha Touch 2

I have an application which displays some articles. The application works perfectly on Wamp in localhost. I've uploaded my database management in an other server. I already configured my ArticleStore.js in JSONP but when I run my application the following error appears in the console :

Resource interpreted as Script but transferred with MIME type text/html: "http://[ip_address]:[port]/totos?_dc=1372152920457&keyword=&page=1&start=0&limit=25&callback=Ext.data.JsonP.callback1"

and :

Uncaught SyntaxError: Unexpected token :                                 totos:1

When I clic on the url above I'm redirected to the view which display the following content :

{"articles_list":[{"id":"28","title":"Prixtel dope son service client avec le forfait Sumo"}],"total":1}

For sake of simplicity, I tested to display just the title of one article. Here's the JSON response for the line 1 when I clic on 'totos:1':

{"articles_list":[{"id":"28","title":"Prixtel dope son service client avec le forfait Sumo"}],"total":1}

Here's my ArticleStore.js content :

Ext.define("MyApp.store.ArticleListStore",
{
    extend: "Ext.data.Store",    
    requires: ["MyApp.model.ArticleModel","Ext.data.proxy.JsonP"],
    config: {
    model: "MyApp.model.ArticleModel",
    proxy: {
        type: 'jsonp',
        model: "MyApp.model.ArticleModel",
        url: "http://62.23.96.124:81/totos",
        },
        reader: {
            type: "json",
            rootProperty: "articles_list",
            totalProperty: "total"
        },
    },
        autoLoad: true
    }
});

When I was launched my resquest in localhost directly on Wamp server my JSON responses had the same syntax (The JSON tree architecture is the same). Here's an example :

{"articles_list":[{"id":"384","title":"Skype est disponible sur Windows Phone"}],"total":1}

I cannot see any difference between the two responses. However, I have an 'Unexpected token' error!. As you can see the two nodes 'articles_list' and 'total' have the same place in the JSON tree for the two examples. I don't understand why there is an syntax error. I'm really lost. Does anyone can help me, please ? Thanks a lot in advance for your help.

Upvotes: 0

Views: 883

Answers (1)

kevhender
kevhender

Reputation: 4405

Your server is not formatting the response correctly for JSON-P. JSON-P essentially needs your response to be embedded within a function, which is specified by the callbackKey property of your proxy:

proxy: {
    type: 'jsonp',
    url : "http://62.23.96.124:81/totos",
    callbackKey: 'myCallbackKey'
}

Then, on your server, you need to use that parameter to wrap your response:

myCallbackKey({
    "articles_list": [
        {
            "id":"28",
            "title":"Prixtel dope son service client avec le forfait Sumo"
        }
    ],
    "total":1
})

You can learn more about this from the docs here: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.data.proxy.JsonP. You also will want to know a little more about the purpose of JSON-P, and how it works. Find out more here: What is JSONP all about?

Upvotes: 1

Related Questions