JSON/JSONP/PHP Headache D:

Question

Ok, so basically what I am trying to do is bypass javascript's cross-domain/same-origin restrictions so that we can include a tagline at the bottom of clients' sites (that is hosted on our server and can be updated in one place instead of updating a million sites). I'd like to do this in jq with JSONP. Here is my code that goes into the pages displaying the tagline:

<div id="tagline"></div>
<script type="text/javascript">
 $(document).ready(function() {
  var url =  "http://www.mydomain2.com/api/tagline.php";
   $.getJSON(url + "?callback=taglineDisp", null, function(taglineDisp) {
    for(i in taglineDisp) {
     payload = taglineDisp[i];
     $("#tagline").append(payload.text);
    }
   });
 });
</script>

Here are the contents of tagline.php:

<?php header('Access-Control-Allow-Origin: *'); ?>
<?PHP echo "taglineDisp({\"tagline\" : \"Powered by <strong><a href='http://www.mydomain2.com'>Company Name</a></strong>\"}); ";

Originally tagline.php wasn't dynamic, and I just had tagline.json with this in it:

taglineDisp({"tagline" : "Powered by <strong><a href='http://www.mydomain2.com'>Company Name</a></strong>"});

That's correct, right? JSONP needs to have taglineDisp(); wrapped around the JSON object, yes?

At first I was getting the typical origin restriction error, but when I changed to .php and added the "Access-Control-Allow-Origin: *" header directive, I am now getting:

Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings.  It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains. oauth:1

I hope my descriptions and code samples are OK. I've read about a bajillion JSON articles (both on SO and on other site -- IBM actually has some great resources for JSON stuff, too) and I still can't figure out where I am going wrong. I am mostly a jq noob. :\

Is all this work even worth it? Would an iframe save me the headache? I thought that jq might be better for cross-browser compatibility at the cost of some extra resource overhead. :|

Answer 1

You are using $.getJSON, so you can set a callback that calls taglineDisp(json). But if you want to use JSONP, the Javascript method is a bit different!If you want to dynamically load your JSONP, you should do something like :

function load_script(url) {
  var s = document.createElement('script'); 
  s.src = url;
  document.body.appendChild(s);
}

function load_scripts() {
  load_script('http://www.mydomain2.com/api/tagline.js');
}

window.onload=load_scripts;

If you want to forge a complex JSONP, you can also use : Simple JSON for PHP.

include('includes/json.php');

$Json = new json('callback', 'taglineDisp'); 

$Json->add('status', 200);
$Json->add('message', success);
$Json->add('tagline', "Powered by <strong><a href='http://www.mydomain2.com'>Company Name</a></strong>");

$Json->send();

UPDATE :

You can use JSONP via getJSON, just by sending a JSON without callback

$.getJSON(
    'http://www.mydomain2.com/api/tagline.js',
    {'callback': 'process'}
);