Questions about on-demand dynamic javascript loading

Hello All,

I have couple of doubts regarding the concept of on-demand javascript
loading using javascript code. I could see on the net different
techniques for achieving this - techniques like:

1. document.write("<script src=[source of script]
language='JavaScript'></script>);
2. sc = document.createElement("<script>"); sc.setAttribute("src",
[source]); and append this to the head
3. Get the script file using XmlHTTPRequest() and do an eval on the
text downloaded

etc...

There are few things not yet clear for me:

1. Which of these techniques perform synchronous load without much
effort (i.e. prevent me from writing all callbacks/event listeners and
instead allow me to write just one API function on whose return I can
be sure that javascript file is loaded).

Method 3 is kind of synchronous but I'm not able to use eval() inside a
function because the scope of eval is within the scope of the function
calling the eval, effectively making the functions inside the loaded
javascript file inaccessible to the rest of the code.

2. Which of these techniques are having risks like - memory leaks etc
.... The reason I'm asking this is: For us every time a server hit is
made, the server response returns the list of javascript files to be
loaded. This list will not vary often but whenever the list contains
new javascript files to be loaded, I have to load those files. If I
adopt method 1 for our scenario, is it fine if my load function keeps
adding the text <script src=""></scriptto document, even if the file
was downloaded earlier? Or should my load function maintain a list of
scripts loaded earlier and take actions only if a request for some new
javascript file is made?

Request anybody having knowledge about this to throw some light.

Thank you,
Venkatesh

re: Questions about on-demand dynamic javascript loading

Venkatesh wrote:That is hardly "on demand", it is more a convenience for those without
script capabilities - it saves them downloading what, for them, is
useless content.
That works OK, but to be robust in all browsers you need to use a
setTimeout() callback to separate the function that loads the script
from those that try to call functions within it.

As you note below, that has its drawbacks.
XHR does, but that may not be what you really want.

There are ways around that, but I don't think you want to do it.

[...]Read this thread "createTextNode and IE7":

<URL:
http://groups.google.com.au/group/co...ebcff147d2e442
--
Rob

re: Questions about on-demand dynamic javascript loading

RobG said the following on 1/9/2007 4:27 AM:I am not sure I agree with that. I have never seen a UA that is script
incapable that will download an external script file. It is one of the
benefits of putting it in an external file versus inline for non-script
users.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

re: Questions about on-demand dynamic javascript loading

Venkatesh said the following on 1/8/2007 11:11 PM:Doing that as the page loads is fine. Doing it after the page loads is
disastrous. So I wouldn't call that "loading on demand" per se.
Search the archives for loadJSFile and you can find more reading on that
than you probably ever cared to read about it.
As Rob pointed out, there are scope issues with eval'ing the text that
gets downloaded.
Method 1 and Method 3.

<snip>
If any do, all of them do.
When is that request made? Is it made on a setTimeout/Interval basis
while the app is running or is it made when the page is initially
loaded? How you go about dealing with loading .js files will depend -
directly - on the answer to that question.
That depends on header's and cache settings. It may load twice for User1
but only once for User2.
That makes it sound like you are polling the server to see if new files
are available while the app is running. Without knowing when you are
checking it is impossible to come up with a definitive answer though. It
also depends on how your .js files are created/formatted.
I tried throwing light but it kept slipping through my fingers :-)

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

re: Questions about on-demand dynamic javascript loading

Randy Webb wrote:Which is not to say one doesn't or wont exist - I haven't tested them
all, or even a majority of them. :-)

It was my short-cut way of covering both script-ignorant and
script-disabled browsers, though I agree with your statement.

I fully agree, I was trying to make the point (obviously poorly worded)
that it is more a pleasant side effect than a significant criterion
when deciding whether to put script in the page or in an external file.
e.g. I don't think anyone would recommend using document.write() for
all script elements because it saves script-disabled browsers a bit of
bandwidth.

If you disable scripting, do browsers download external script files
anyway?


--
Rob

re: Questions about on-demand dynamic javascript loading

RobG said the following on 1/9/2007 7:10 PM:An educated guess based on disabled images says no. But nothing MS does
is educated.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

re: Questions about on-demand dynamic javascript loading

Hello Randy,

Thanks for replying. Just thought of giving a clear picture of how our
app is running.
The request is an AJAX request that happens everytime user clicks on
hyperlinks present in our document. The response from server contains
list of HTML elements to be changed and list of javascript files to be
loaded. The technique we have adopted is - Update the HTML element
changes (i.e. update the DOM), then load the javascript files from the
list present in server's response, then allow user to perform any other
clicks.

So, both method 2 i.e. adding document.createElement("script") ....;
and method 3 "i.e. getting javascript contents as response and doing an
eval" work for us.
I'm now able to use eval and get the function declarations go global
(i.e. have variables and functions declared in global scope) ...
window.eval -for non IE browsers and window.execScript() for IE are
doing the job for me ... So, a synchronous get from XMLHttpRequest()
and eval is achieving the synchronization we wanted. and since I'm
doing an eval now, my load function is keeping track of js files
downloaded just to ensure the next time request for download is made we
are not doing a get and eval again.

Once again, thanks everyone for replying.

-Venkatesh