Question

Suppose I have

1)
a HTML document.

2)
This HTML document loads Javascript file “code.js” like this:

<script src="code.js">

3)
User clicks button which runs “fetchdata” function in “code.js”,

4)
“fetchdata” function looks like this:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4) {
        myjsdata = xmlhttp.responseText;
    }
}
xmlhttp.open("GET", 'http://www.example.com/data.js', false);
xmlhttp.send(null);

…

Now how do I do the following successfully:

I want to insert/eval my Javascript in a way, so all functions in “code.js” including “fetchdata” and functions defined above/below can access the data (structures, declarations, pre-calculated data values etc.) in “data.js”.

(If this was possible, it would be idea since I could wait loading the actual JS data file until the user explicitly requests it.)

Answer 1

jQuery always has something for everything:

http://api.jquery.com/jQuery.getScript/

Loads a javascript file from url and executes it in the global context.

edit: Oops, didn’t see that you weren’t using jQuery. Everyone is always using jQuery…

Just do:

var scrpt = document.createElement('script');
scrpt.src='http://www.example.com/data.js';
document.head.appendChild(scrpt);