Why is my cross domain JSON calls not working? - json

Question

The remote url http://remote-server/json-data.php contains data in this format:
[{"id":"1","partname":"R1","date":"10/12/2012"},{"id":"2","partname":"R2","date":"10/10/2012"},{"id":"3","partname":"R3","date":"07/12/2012"},{"id":"4","partname":"R4","date":"14/06/2012"}]
This is my jQuery that is supposed to read the above data and display it in the html or php file. This is currently not working:
$(document).ready(function () {
var url = "http://remote-server/json-data.php";
var success = function(data){
data = $.parseJSON(data);
$.each(data, function(index, element) {
$('div.outerBox').append('<div>'+element.partname+'/'+element.date+'</div>');
});
}
$.ajax({
type: 'GET',
url: url,
dataType: "jsonp",
crossDomain: true,
cache:false,
success: success,
error:function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
}
});
});
When I refresh the page, I get an error message in the javascript alert box, something like this: Error: jQuery142452552225_55355545554 was not called.
I tried putting that remote file into my local server and it seems to work fine with $.getJSON() function. Not sure what I am doing wrong here.

Answer 1

If the server isn't prepared to handle JSONP requests it won't work.
JSONP is not strictly a client side manipulation of data, it involves server interaction
When using jsonp the responses should be enclosed in a javascript function.
So to make things simple, lets say for example you have an empty JSON object that the server will return to you. i.e. {}
To make a standard request for the object you would do
$.ajax({
type: 'GET',
url: url,
dataType: "json",
success: function(data) {
alert("Retrieved : " + JSON.stringify(data);
},
error:function(jq, st, error){
alert(error);
}
});
All that does is make a standard HTTP request and retrieve the empty object from the url.
If you want to use JSONP with the same url, you try something like
$.ajax({
type: 'GET',
url: url,
dataType: "jsonp",
crossDomain: true,
success: function(data) {
alert("Retrieved : " + JSON.stringify(data);
},
error:function(jq, st, error){
alert(error);
}
});
What this does is takes the url you have an appends a ?callback={Some Random jQuery function}. In your case the random jQuery function was jQuery142452552225_55355545554. The server has to take that empty JSON object and wrap it in the callback, so instead of returning {} it should have returned jQuery142452552225_55355545554({}) with HTTP content-type header of application/json.
Here is a fiddle of a JSON request to coderwall, which fails, and then tries a JSONP request which works successfully. JSONP Example

Answer 2

The remote url http://remote-server/json-data.php contains data in
this format:
[{"id":"1","partname":"R1","date":"10/12/2012"},{"id":"2","partname":"R2","date":"10/10/2012"},{"id":"3","partname":"R3","date":"07/12/2012"},{"id":"4","partname":"R4","date":"14/06/2012"}]
Well, that's the problem. Your remote url is returning JSON, not JSONP. That's why you cannot consume it. The remote server should return JSONP:
callbackFunctionName([
{
"id": "1",
"partname": "R1",
"date": "10/12/2012"
},
{
"id": "2",
"partname": "R2",
"date": "10/10/2012"
},
{
"id": "3",
"partname": "R3",
"date": "07/12/2012"
},
{
"id": "4",
"partname": "R4",
"date": "14/06/2012"
}
]);
where callbackFunctionName should be dynamically specified by passing a parameter to your server. Like this:
http://remote-server/json-data.php?callback=callbackFunctionName
When you call this url you should return a JSONP response.