Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Testing a static jsonp response

Tags:

jquery

jsonp

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.

like image 735
Choy Avatar asked Dec 07 '10 04:12

Choy


People also ask

What is a JSONP response?

March 1, 2022. JSON with Padding, or JSONP for short, is a technique that allows developers to get around browsers' same-origin policies by exploiting the nature of the <script> element. The policy prohibits reading any responses made by websites with origins other than those currently in use.

What is difference between JSON and JSONP?

JSONP stands for JSON with Padding. Requesting a file from another domain can cause problems, due to cross-domain policy. Requesting an external script from another domain does not have this problem. JSONP uses this advantage, and request files using the script tag instead of the XMLHttpRequest object.

Can JSONP be used with Ajax?

Google Sheets as JSON data source for JavaScript According to the AJAX model, web applications can send and retrieve data from a server asynchronously without interfering with the display and the behavior of the existing page. Many developers use JSON to pass AJAX updates between the client and the server.

How do you call JSONP?

Method to use JSONP:In HTML code, include the script tag. The source of this script tag will be the URL from where the data to be retrieve. The web services allow to specify a callback function. In the URL include the callback parameter in the end.


1 Answers

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).

like image 91
Dr.Molle Avatar answered Oct 24 '22 05:10

Dr.Molle