how to do cross-domain jsonp request in javascript

Question

i'm working on a little sample of code but i'm getting some problem to do what i want.

here is a sample of code. i found part of it on internet and tryed to use it.

in the case just above it works perfectly but when the target URL is not the same it doesent

in the first example, the target provide json. in the second example, the target provide jsonp.

the difference is that for the second example i set the json to the 'true' value. i don't really understand why it doesn't work.

if someone could explain me that cause' i tried plenty of things that i found on internet but nothing really worked.

thanks so much for those who will take some time on my problem and help me to figure out what's wrong ;)

sample 1:

<!doctype html>
<html>
<head>
<title>JSONP example</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<h1>Test</h1>
<script>
$.ajax({
type: 'GET',
dataType: "json",
processData: false,
crossDomain: true,
jsonp: false,
url: "http://flxn.eu/json.php",
success: function (responseData, textStatus, jqXHR) 
{
    console.debug(responseData);
    $.each(responseData, function (index, value) {
            console.debug(value);
            $('body').append(value.name + '<br />' + value.address + '<br />' + value.city + '<br />' + value.postcode + '<br />' + '<br />');
        });
},
error: function (responseData, textStatus, errorThrown) {
    alert('POST failed.');
}
});
</script>
</body>
</html>

sample 2:

<!doctype html>
<html>
<head>
<title>JSONP example</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<h1>test jsonP</h1>
<script>
$.ajax({
type: 'GET',
dataType: "json",
processData: false,
crossDomain: true,
jsonp: true,
url: "http://widget.mondialrelay.com//parcelshop-picker/v3_0/services/parcelshop-picker.svc/SearchPR?Brand=BDTEST%20%20&Country=FR&PostCode=62620&ColLivMod=24R&Weight=&NbResults=7&SearchDelay=&SearchFar=75&=Zone_Widget&VacationBefore=&VacationAfter=&Service=&Latitude=&Longitude=&method=jQuery16206304910685867071_1380876031038&_=1380879686732",
success: function (responseData, textStatus, jqXHR) 
{
    console.debug(responseData);
},
error: function (responseData, textStatus, errorThrown) {
    alert('POST failed.');
}
});
</script>
</body>
</html>

Here is a working example of jsonp cross domain, See this: http://stackoverflow.com/questions/2681466/jsonp-with-jquery — , Oct 08 '13 at 11:49
@Bergi: It's an actual callback name from someone else's JSONP request. — SLaks, Oct 08 '13 at 11:52
Yes exactly SLaks. but when i try to adapt it by putting my URL it doesn't work .. — bottus, Oct 08 '13 at 12:20

score 1 · Answer 1 · answered Oct 08 '13 at 11:50

1

You need to tell jQuery where to put the JSONP callback name.

Change the URL parameter to &method=?.

answered Oct 08 '13 at 11:50

SLaks

868,454
176
1,908
1,964

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

Here is a working example of jsonp cross domain

jsonp with jquery

Is that what you are looking for?

If you have requested with query string

 ?callback=my_callback_method

then, your server must response data wrapped like this:

my_callback_method({your json serialized data});

see: Make cross-domain ajax JSONP request with jQuery

Hopefully this will work if your json is fine.

<!doctype html>
<html>
<head>
<title>JSONP example</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<h1>test jsonP</h1>
<script>
var url = 'http://widget.mondialrelay.com//parcelshop-picker/v3_0/services/parcelshop-picker.svc/SearchPR?Brand=BDTEST%20%20&Country=FR&PostCode=62620&ColLivMod=24R&Weight=&NbResults=7&SearchDelay=&SearchFar=75&=Zone_Widget&VacationBefore=&VacationAfter=&Service=&Latitude=&Longitude=&method=jQuery16206304910685867071_1380876031038&_=1380879686732?callback=?';
$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jQuery16206304910685867071_1380876031038',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.dir(json.PRList);
    },
    error: function(e) {
       console.log(e.message);
    }
});
</script>
</body>
</html>

edited May 23 '17 at 11:50

Community

1
1

answered Oct 08 '13 at 11:51

I think yes it is but when i put my URL instead of the one before, i get this in the Chrome's console "Uncaught ReferenceError: jQuery16206304910685867071_1380876031038 is not defined " – bottus Oct 08 '13 at 11:59
I have added information to my answer from: http://stackoverflow.com/questions/11736431/make-cross-domain-ajax-jsonp-request-with-jquery. – Oct 08 '13 at 12:35
I read your explanations and understood but i don't see what it really changes in my code .. i mean yes if i request with a callback the server will answer with the callback wrapping the json but i don't see what i do have to change to make it work .. thank you for your answers by the way – bottus Oct 08 '13 at 12:53
use this url: url:"http://widget.mondialrelay.com//parcelshop-picker/v3_0/services/parcelshop-picker.svc/SearchPR?Brand=BDTEST%20%20&Country=FR&PostCode=62620&ColLivMod=24R&Weight=&NbResults=7&SearchDelay=&SearchFar=75&=Zone_Widget&VacationBefore=&VacationAfter=&Service=&Latitude=&Longitude=&method=jQuery16206304910685867071_1380876031038?callback=?", and then look at the console in chrome, see the new error which is now inside the json response. – Oct 08 '13 at 12:59
Right now i get this : "Uncaught SyntaxError: Unexpected token ?" – bottus Oct 08 '13 at 13:03
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/38796/discussion-between-kentoro-and-bottus) – Oct 08 '13 at 13:39

how to do cross-domain jsonp request in javascript

2 Answers2

Linked