Getting JSONP via jQuery

Question

UPDATE 1:

This is what I get in the browser if I type

http://www.remote_host.com/feed.php?callback=jsonpCallBack

{
    "rss": {
        "channels": [
            {
                "title": "title goes here",
                "link": "http://www.remote_server.com/feed.php",
                "description": "description goes here",
                "items": [
                    {
                        "title": "item title goes here",
                        "link": "item link goes here",
                        "pubDate": "item date goes here",
                        "description": "item description goes here"
                    },
                    {
                        "title": "item title goes here",
                        "link": "item link goes here",
                        "pubDate": "item date goes here",
                        "description": "item description goes here"
                    },
                    {
                        "title": "item title goes here",
                        "link": "item link goes here",
                        "pubDate": "item date goes here",
                        "description": "item description goes here"
                    }
                ]
            }
        ]
    }
}

So this is not jsonp?

ORIGINAL QUESTION:

I have the following script where I am trying to get json data from a remote host:

$(document).ready(function() {
    get_json_feed();

    function get_json_feed() {
        $.ajax({
            url: 'http://www.remote_host.com/feed.php?type=json',
            type: 'GET',
            dataType: 'jsonp',
            error: function(xhr, status, error) {
                alert("error");
            },
            success: function(json) {
                alert("success");
            }
        });
    }
});

But for some reason I am getting an error and warning:

Warning: Resource interpreted as Script but transferred with MIME type text/html.

Error: Uncaught SyntaxError: Unexpected token :

What am I doing wrong?

This sounds like the server does not return JSONP. You should try (a) feed.php?type=jsonp and (b) if the server supports JSONP, it normally accepts a parameter with which you specify the callback name, something like: feed.php?type=jsonp&callback=?. You have to read the documentation of the service you are using. — Felix Kling
– Felix Kling, Commented Jun 2, 2011 at 11:24
write jsonp: 'callback', jsonpCallback: 'jsonpCallback', in ur option — xkeshav
– xkeshav, Commented Jun 2, 2011 at 11:25
Try some combinations of parameters in the browser and/or read the documentation. E.g. if you type http://www.remote_host.com/feed.php?type=json in the address bar and the response does not look like funcName({...}) but like {...}, then you get JSON and not JSONP. — Felix Kling
– Felix Kling, Commented Jun 2, 2011 at 11:30
If the server belongs to you, you also have to set it up to return JSONP. — Felix Kling
– Felix Kling, Commented Jun 2, 2011 at 11:31

Pointy · Accepted Answer · 2011-06-02 11:28:05Z

7

The JSONP "protocol" relies on the site replying to your request with a JavaScript statement of the form,

 someFunction( someJSON )

The name of the function is supplied as an argument from your code, with the idea being that the response script, once consumed and interpreted by the browser, will result in a call to that function with a parsed blob of JSON — which is to say, a JavaScript object. The jQuery library will do some of the bookeeping work for you, even to the extent of creating the globally-scoped function to call (which will be code that just calls the callback you supply as the "success" argument).

Thus, you should check what the actual response from that server looks like. It sounds to me as if it may not be a server prepared to respond that way. You might need to make sure there's an extra parameter on your URL, of the form "callback=?".

answered Jun 2, 2011 at 11:28

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pointy Over a year ago

Right - that's just plain JSON. The JSONP protocol requires that the JSON be wrapped in a function call. The browser fetches the content from the server by creating a <script> tag. When the script is fetched (the function call around that JSON), the function call will take place.

Matt Hampel · Accepted Answer · 2016-10-01 13:34:24Z

I don't know exactly what error you are facing, but there are some useful tips for using jsonp here

error: This handler is not called for cross-domain script and JSONP requests.
write jsonp: 'callback', jsonpCallback: 'jsonpCallback' in ajax parameters. Setting jsonp to callback and then setting jsonpCallback to jsonpCallback makes the querystring look like this:

http://domain.com/jsonp-demo.php?callback=jsonpCallback&name=watever
Loads in a JSON block using JSONP. Will add an extra ?callback=? to the end of your URL to specify the callback.

Your complete script would look like this:

<script>
    $(document).ready(function(){

        $("#useJSONP").click(function(){
            $.ajax({
                url: 'http://domain.com/jsonp-demo.php',
                data: {name: 'Chad'},
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'jsonpCallback',
                success: function(){
                    alert("success");
                }
            });
        });

    });

    function jsonpCallback(data){
        $('#jsonpResult').text(data.message);
    }
    </script>

Example here

bjornd · Accepted Answer · 2011-06-02 11:26:03Z

3

Looks like server returns wrong Content-type header.

answered Jun 2, 2011 at 11:26

bjornd

23k4 gold badges59 silver badges74 bronze badges

1 Comment

oshirowanen Over a year ago

I have added a content type header header("content-type: text/javascript");, so the warning has now gone.

Collectives™ on Stack Overflow

Getting JSONP via jQuery

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related