Sencha touch get json error

Question

Every time i try to work with sencha touch to get a json feed i always get this error.

XMLHttpRequest cannot load http://api.example.com/index.php/news/all/format/json?_dc=1342630239638&node=root. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

how can i fix a work around to stop this i really want to work with sencha but most of my work will be working with json feeds???

any help

also my json outputted looks like this it doesnt have a rootproperty node??

[{
    "id": "7253",
    "title": "hello",
    "description": "",
    "source": "syrianews",
    "cat_name": "Syrianews"
}, {
    "id": "7208",
    "title": "hello",
    "description": "",
    "source": "syrianews",
    "cat_name": "Syrianews"
}]

Alexander Rolek Alexander Rolek · Accepted Answer · 2012-07-18T18:44:27

It appears you are trying to do a cross domain Ajax request, which is not allowed. Ajax requests have a security requirement of same domain, same port, same protocol. If you load your app from say http://www.tinyfactory.co/ and then try to make an Ajax request to http://api.example.com/ the security sandbox will not allow it.

But there is hope. Enter JSONP. JSONP or padded JSON (http://en.wikipedia.org/wiki/JSONP) is a way to bypass this security policy if the domain you are requesting the data from plays nice. Typically you will see a param on the API named "callback" What this does is wrap the data in a Javascript function you declare. for example:

http://api.example.com/datafeed.json?callback=foo

would return the data

foo({fName: 'Alex', lName: 'Rolek'});

JSONP is able to achieve this by dynamically inserting a script tag into the DOM with the 'src' attribute set to the API you are requesting with the callback request var. When the API returns the response the function 'foo' is called in your application and you can start working with the response data.

In Sencha Touch, change:

proxy: 'ajax'

to

proxy: 'jsonp'

On your request. As long as the API accepts callbacks, Sencha Touch will do the rest of the heavy lifting.

For additional information, check out:

http://docs.sencha.com/touch/2-0/#!/api/Ext.data.proxy.JsonP

Hope this helps.

Sencha touch get json error

2 Answers