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?

Answer 1

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=?".

Answer 2

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