Sencha Touch : How to get the simple json file as response using JSONP?

Question

I am trying to make a simple JSONP call to get a json file which is loaded on the remote server.

Here is my simple json file loaded on the server.

{
    "login": [
        {
            "themename": "NO",
            "themeId": "1"
        }
    ],
    "homePage": [
        {
            "themename": "NO",
            "themeId": "1"
        }
    ],
    "transactionDetails": [
        {
            "themename": "NO",
            "themeId": "1"
        }
    ]
}

My Controller code which calls this file to get the data

 Ext.data.JsonP.request(
    {

    url : 'http://xx.xx:8080/ThemeSelector.json',

            callback : 'someCallback' ,

            someCallback: function(success, result) {

            var text = result.responseText;

              var object = Ext.decode(text);
              themeName = object['homePage'][0].themename;

            }
        });

I am getting the error "Uncaught SyntaxError: Unexpected token : "

I know that the response should be wrapped in the object but not able to make the exact correction in json file and my code. Any help please?

Thanks

score 1 · Answer 1 · answered Feb 13 '13 at 22:50

1

JSONP requires that the response be in the form of a JavaScript function call, passing the actual JSON object as the parameter. Plain JSON won't (can't) work.

The exact details of how the function call should look (in particular, the function name) can vary, but usually it's a parameter added to the HTTP request. The server should construct the response based on that parameter's value.

answered Feb 13 '13 at 22:50

Pointy

405,095
59
585
614

Thanks Pointy. But in my case, I have to dump a plain json file on the server and get the response. So server has no code but is dumb only to send the plain json file. Is there any workarounds? – Gendaful Feb 13 '13 at 22:55
If your server is in the same domain as the page that needs to load it, you can just use simple AJAX to fetch it. Otherwise, you'd have to set up the "Access-Control-Allow-Origin" header for the file so that you can retrieve it from a different domain. – Pointy Feb 13 '13 at 22:57
Hi Pointy. My server is in different domain and that is the reason i moved away from simple ajax. – Gendaful Feb 13 '13 at 23:00
I read somewhere, by setting header("Access-Control-Allow-Origin: *") on php file will solve this issue. Any thoughts on how to do this with json file? – Gendaful Feb 13 '13 at 23:04
@Gendaful you'd have to make sure that your server is set up with rules to add the header; it depends on what your server is. I'm not really an expert at that kind of thing but it should be possible. (And yes, that's the right header.) – Pointy Feb 13 '13 at 23:10
Another alternative would be to hard-code the function name into your file. Just add `somefunction( { ... object ... })` and then make sure that "somefunction" is a global function on your page. Then you can just load it by creating a ` – Pointy Feb 13 '13 at 23:11
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/24478/discussion-between-gendaful-and-pointy) – Gendaful Feb 13 '13 at 23:24
Thanks Pointy. Can you please elaborate more on this point? I am little bit lost here. – Gendaful Feb 13 '13 at 23:26
1

@Gendaful it all depends on exactly what web server software your host is using. I'm not an expert, but generally there are ways (based on file naming conventions, path details, etc) to configure a server so that it adds headers when serving certain kinds of static content. I'm afraid that's about all I know. You might try asking on the webmaster Stackexchange site, after you find out what your host software is. – Pointy Feb 13 '13 at 23:35

score 1 · Answer 2 · answered Feb 14 '13 at 06:01

To work with JsonP, your json response should contain the callback parameter you've sent. Without that, callback function will not get called and produces error since it does require that. In your case, you just have plain JSON file on server to serve. So you cant use JsonP directly with this file.

If you've some control over server, then you can write a script that can do this for you like -

<?php
 header('Content-Type: text/javascript');
 $response = file_get_contents('ThemeSelector.json');
 echo $_GET['someCallback'] . '(' . $response .' );';
?>

Then received json response will look something like -

Ext.data.JsonP.callback2 (
    {
        "login": [
            {
                "themename": "NO",
                "themeId": "1"
            }
        ],
        "homePage": [
            {
                "themename": "NO",
                "themeId": "1"
            }
        ],
        "transactionDetails": [
            {
                "themename": "NO",
                "themeId": "1"
            }
        ]
    }
)

Sencha Touch : How to get the simple json file as response using JSONP?

2 Answers2

Linked