Load JSON at runtime rather than dynamically via AJAX

Question

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

I'm currently looking at the link tag - and wondering how I could make this work. — ChrisInCambo, Dec 28 '08 at 05:14

score 3 · Answer 1 · answered Dec 28 '08 at 07:03

3

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

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

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

answered Dec 28 '08 at 07:03

Scott Evernden

39,136
15
78
84

score 2 · Answer 2 · answered Dec 28 '08 at 06:40

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.

As I said in the comment to Ant P. I do not have control of the server, I have to access this REST web service as is. It returns simply JSON (mime-type=application/json), not JavaScript or JSON which is assigned to a variable. — ChrisInCambo, Dec 28 '08 at 07:37

score 1 · Answer 3 · answered Dec 28 '08 at 05:15

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.

answered Dec 28 '08 at 05:15

Thanks for your input, but I can't do that, modifying the resource is not an option. I need to find a way to deal with the JSON. Like I said I have a feeling that my current method via AJAX is the only clean route here. – ChrisInCambo Dec 28 '08 at 05:23

score 1 · Accepted Answer · answered Dec 28 '08 at 13:47

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?

I've been doing a lot of searching and I think what I'm trying to do is basically not possible, so as you say, it's best to stick with my current AJAX solution. — ChrisInCambo, Dec 28 '08 at 14:41

score 1 · Answer 5 · answered Dec 28 '08 at 14:05

1

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"></script>
<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.

answered Dec 28 '08 at 14:05

kdgregory

38,754
10
77
102

normally I would down-rate such an answer. You do realize that the script-tag has no innerHTML!, or any other straightforward means of accessing the remote script data. This is the reason of AJAX's = XHR success. – Lorenz Lo Sauer Sep 15 '11 at 12:16
@Lo - in Firefox and Chrome at least, the script tag most definitely does have an innerHTML; I haven't tried IE – kdgregory Sep 18 '11 at 15:04

Load JSON at runtime rather than dynamically via AJAX

5 Answers5

Linked