This is driving me crazy. I wrote a php api file and stored it on my server. When I run the url directly the JSON results are perfectly echoed to the screen, with no problem. However, when I attempt to access the results from another domain (e.g. Cross domain) I can not get the values to show. The screen is still blank. I hope this is making sense. I'm wondering if there is something wrong with my javascript call below. This is really becoming a royal pain.

Any help will be greatly appreciated.

The code below:

Note:

//Example of what the JSON results would look like
{
 "name": "John Doe",
 "url": "http://www.adomain.com",
 "created": "A DATE HERE"
}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<html>
<head>
<title>API JSON Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
 var timeService = "http://api.MYDOMAIN.com/api.php?key=abc&num=1&format=json&callback=?";

 $.getJSON(timeService, function(data) {
 $('showdata').html("<p>ulore="+data.name+" url="+data.url+" created="+data.created+"</p>");
 });
});
</script>
<div id="showdata"></div>
</body>
</html>

eawade,

Please forgive me if I'm wrong.. Whereas I've done lots of JSON, I only know about JSONP from what I have read.

Things are made difficult in the jQuery documentation in that JSONP is detailed under "jQuery.ajax()" with only a scant reference under "jQuery.getJSON()".

For me, the only scenario that makes sense where a $.getJSON() call works for same-domain but not for cross-domain is:

  • The format of the server's response is JSON, not JSONP.
  • The response of your same-domain call is handled as JSON, not JSONP, despite the presence of callback=? in the url.

With JSONP the callback function, as specified in the URL, should be written by the server as a javascript function call with JSON-encoded data as its argument.

Suggest you check your the server-side aspects against this discussion.

I hope there's some mileage in what I say.

Airshow

Hello Airshow, first and foremost thankyou for the information. It was useful, as I was able to properly encode the data into JSONP on the serverside. That being said, I'm still having the same issue. It is totally strange, to be honest. I can neither retrieve and display the results via cross-domain OR on the same domain. I'm wondering if there is a problem with the code (javascript) that I used to display the data in the html file. Each time I try, the screen just ends up blank.

I've tried what feels like 1 million different things and have been at this for a couple of days now. I have been reading forums etc and no one else seem to have this kind of problem, not to the extent to which I'm having it. Note that below is what the JSONP looks like:

?({"posts":[{"post":{"name":"Mike
Jones","url":"http:\/\/aweburl.com","timestamp":"2011-12-08 09:48:04"}}]});

For the life of me I can't figure this out.

Thanks Airshow

eawade,

Suggest you move away from $.getJSON() and use $.ajax() instead.

$.getJSON() is a shorthand method.

$.ajax() gives you full control, including the ability to specify an error handler to give you better chance of seeing what's going wrong.

$.ajax() is very well documented in the jQuery documentation.

Personally, I only ever use $.ajax() and none of the shorthand methods.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.