Question

I have no trouble making jsonp requests, however I’m unsure about setting up a web service to deliver responses in jsonp.

First, does a server need to be configured in a certain way to allow jsonp requests, or does the page just have to have the response properly formatted?

In my testing I have the following jsonp response from geonames.org (I’ve placed it a blank page on server/domain 1 with nothing else):

<?php echo $_GET['callback'];?>({"postalcodes":[{"adminName2":"Westchester","adminCode2":"119","postalcode":"10504","adminCode1":"NY","countryCode":"US","lng":-73.700942,"placeName":"Armonk","lat":41.136002,"adminName1":"New York"}]});

On server/domain 2 I’m making the following request:

$.ajax({
    // works when I make the call to geonames.org instead of domain1
    //url: 'http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?',,
    url: 'http://www.domain1.com/test/jsonp.php?callback=?',
    success: function(data) {
        $('#test').html(data);
    },
});

The call works when I place the files on the same server (either domain 1 or 2) and turn it into a regular json request. What am I doing wrong?

Just to clarify: My question pertains to the page RECEIVING the request. I know the request works when I make it to geonames.org, flickr, etc… apis. However, I’m trying to set up a page to send a response. In my example I just have a blank page with hard coded jsonp. I’m not sure if I have to have some other headers on the page or have something enabled on my server.

Answer 1

The response is wrong.

If you have the following url:
http://www.mydomain.com/test/jsonp.php&callback=? jQuery will replace the question mark at the end of the url with a unique string. On the serverside you have to take this string($_GET[‘callback’]) and use it as function-name in your response:

PHP-example:

<?php
 $object=array('postalcodes'
                  =>array(
                            array(
                                    "adminName2"  =>  "Westchester",
                                    "adminCode2"  =>  "119",
                                    "postalcode"  =>  "10504",
                                    "adminCode1"  =>  "NY",
                                    "countryCode" =>  "US",
                                    "lng"         =>  -73.700942,
                                    "placeName"   =>  "Armonk",
                                    "lat"         =>  41.136002,
                                    "adminName1"  =>  "New York"
                                   )));

   echo $_GET['callback'].'('.json_encode($object).')';
?>

What happens with the response when receiving it? jQuery knows the unique string(assuming fx123456).
jQuery will create a <script>-element with the src: http://www.mydomain.com/test/jsonp.php&callback=fx123456 . jQuery will call a on the fly created function named fx123456() . This function will return the JSON(as a object) which will be taken as data-argument of the success-function of $.ajax().

So if you don’t use the callback-parameter provided by jQuery as functions-name inside the response, jQuery doesn’t know the name of function to call(I better say jQuery will call a function that doesn’t exist).