Load JSON at runtime rather than dynamically via AJAX

Question

Hi,

I don't think this can be done "cleanly", but I'll ask anyway.

I have a system which needs to get a JSON resource via a REST GET call in order to initialize. At the moment the system waits until the onLoad event and fires an ajax request to retrieve the resource, which I don't think is the best way to do it, as the resource is needed a run time.

What I would love to do is somehow load the resource at runtime inside an HTML tag then eval the contents. But what I'm working on is an API to be used by others, so I would like to achieve this in a logical and standards based way.

So is there any tag which fits the bill? A tag which can be placed in the doc head, that I will be able to read and eval the contents of at runtime?

Regards,

Chris

Answer 1

JSON on its own does nothing; you can't just use <script> to include it because it'll create an object that gets assigned to... nowhere. You'll have to modify it - either put it in a JS string to parse or stick a "var foo = " in front of it.

Answer 2

Is lack of CDN caching (Akamai etc) going to be a problem for you? If not, you could drop a script tag on the page, point the src attribute to a server side script which returns content with a javascript mime-type and contains the JS object you requested. It would be just like including an external script, only dynamically generated.

Ex:

In the head, have something like:

<script src="/js/loadjs.php?id=123"></script>

And have loadjs.php return something like:

var MyApp.initData = { id: 123, setting1: "xyz" };

Downside is that you would be unable to cache it via a CDN. I think browser caching would still work if you needed.

Answer 3

Maybe I'm not understanding but couldn't you just:

<?php
$json_data = json_encode($your_data);
?>

<script>
var data = <?= $json_data ?>;
</script>

Answer 4

I was thinking of putting it in an iframe but then I realized that you have a problem with that the content-type is application/json. When I tested FF, IE and Chrome was trying to download the file and asked the user where to store it (Opera displayed the file)

Putting it in a LINK will not help you since the browser will not try to fetch the document (it only fetches for known resources like style-sheet)

To me it looks like you have to use AJAX. Can you elaborate on why that's a problem?

Answer 5

Do you have control of any server? Because if yes, you could use your server to proxy the service and wrap the JSON response with the appropriate "var" statement.

Alternatively, I believe this would work (I haven't tested it, and I always miscapitalize "innerHtml"), although IMO it's not terribly clean:

<script id="data" src="http://someotherserver.com/json.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    var dataElem = document.getElementById("data");
    if (dataElem)
    {
        var myData = eval(dataElem.innerHtml);
    }
</script>

Surgeon General's warning: eval-ing results from a server that you don't control is a bad idea.

Answer 6

Hi Chris,

I am right now at the same question. What kdgregory wrote is true. That would be a solution but not the safest, but right direction to go. Just use instead of pure javascript a javascript-framework. They offer a simular eval-function but with less or no safty problems!

If someone knows how that works with the prototype javascript-framework.

Let me know ... An example would be nice to see!

http://www.prototypejs.org/learn/json

That seems to be the solution, but I am not sure ...