Cross-domain requests does not work using Sencha Touch 2 - sencha-touch

Question

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.

Answer 1

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?