Dynamic JavaScript Loading (xmlhttprequest)

[RMWChaos]

Currently testing in: WinVista / IE7

I have been working on getting xmlhttprequest going for weeks now. I have finally gotten a semi-working script going. Pulling up text or xml files works great and populates into the webpage; however, executing javascript has a few problems:

1. Opens on a blank page, but not a new page. It appears to compeltely overwrite the original page. I want it to update the existing page by loading within a <div> element.

2. I cannot seem to get functions to work. It seems as if the script is not opening in the global space despite using the 'window' element.

3. What format should the external javascript file that I am attempting to load be in? I think that I have figured out not to include the '<!--' and '//-->' tags normally included in an external javascript file.

4. I have no idea how to tell when the browser is using JScript or JavaScript (friggin' Microsoft :-D) and how the two may respond differently.

I have been reading a lot on the global issues, but none of the suggested fixes has worked for me. One thing that I've learned is that in IE7, all three of these methods of initiating an external javascript file work: eval(), execScript(), and setTimeout().

Here is the code for your viewing pleasure (I break my code out for ease of reading; so I apologize if it seems longer than normal):

 
<!--
 
var xmlhttp;
 
var fileType;
 
function loadData(url)
 
    {
 
    xmlhttp = null;
 
    fileType = url;
 
    // code for native xmlhttp
 
    if (window.XMLHttpRequest)
 
        {
 
        xmlhttp = new XMLHttpRequest();
 
        }
 
    // code for old IE
 
    else if (window.ActiveXObject)
 
        {
 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 
        }
 
    if (xmlhttp != null)
 
        {
 
        xmlhttp.open("GET", url, false);
 
        xmlhttp.onreadystatechange = processData;
 
        xmlhttp.send(null);
 
        }
 
    else
 
        {
 
        alert("Please upgrade to a browser that supports XMLHTTP.");
 
        }
 
    }
 
function processData()
 
    {
 
    // if xmlhttp shows "loaded"
 
    if (xmlhttp.readyState == 4)
 
        {
 
        // if "OK"
 
        if (xmlhttp.status == 200)
 
            {
 
            // if text document
 
            if (fileType.lastIndexOf("txt") != -1)
 
                {
 
                document.getElementById('content').innerHTML = xmlhttp.responseText;
 
                }
 
            // if xml document
 
            if (fileType.lastIndexOf("xml") != -1)
 
                {
 
                // xml parse code here for xmlhttp.responseXML
 
                }
 
            // if javascript file
 
            if (fileType.lastIndexOf("js") != -1)
 
                {
 
                // if MSIE
 
                if (window.execScript)
 
                    {
 
                    window.execScript(xmlhttp.responseText, "javascript");
 
                    return null;
 
                    }
 
                // if others
 
                else if (window.eval)
 
                    {
 
                    window.eval(xmlhttp.responseText);
 
                    }
 
                // if Safari
 
                else
 
                    {
 
                    window.setTimeout(xmlhttp.responseText, 0);
 
                    }
 
                }
 
            }
 
        else
 
            {
 
            alert("Problem retrieving data:\n" + xmlhttp.status + "\n" + xmlhttp.statusText);
 
            }
 
        }
 
    }
 
//-->
 
 

Thanks in advance for your help.

[RMWChaos]

By the way, this:

document.getElementById('content').innerHTML = window.execScript(xmlhttp.responseText, "javascript");

throws a "Permission Denied" error but otherwise operates exactly the same.

In all cases where loading an external javascript file, the "Back" button functions; so it is not loading within the original page as it should. This does not occur with either Text or XML files.

Oh, I even tried renaming my javascript files to .txt and adding <script> and </script> to them, which sort of worked. At least they loaded within the original page; however, the functions they called within the external script file still did not work. So once again, the global scope problem. Grrr.

What am I doing wrong!?

[gits]

hi ...

may be you could try something like this:

the js-text should look like the assignment to responseText:

var responseText = 'window.test = function test(x) { alert(x); }; test(3);';
 
eval(responseText);
 
// you also may do now:
test(4):
 

kind regards

[RMWChaos]

Thanks for the reply, gits. If I understand your example code correctly, you are suggesting creating a global var and setting it equal to some function. I assume you mean the function would be the responseText from xmlhttprequest. I have tried that. Basically I did this:

var response; // along with the other global vars such as xmlhttp
 
// in the processData() function
 
response=xmlhttp.responseText;
 
execScript(response);
// or
window.execScript(response);
//same for eval() or setTimeout()
 

In all cases, the result was the same. I even tried setting a global variable for 'window', which probably makes no sense, and that didn't work either.

I have got to be doing something silly here to be causing the problem.

Thanks again.

[gits]

could you please post an example responseText that you are trying to eval?

[RMWChaos]

Oh wait! Are you saying to do this:

var loadData= function() { // here I would place my loadData() code};
 
// then call loadData from the processData() function
 
function processData() {
 
// ...
 
window.execScript(loadData, "javascript);
 
}
// then I would have to change the way I initiate the script and pass 'url' to loadData
 

Am I on the right track? I will try this now.

[RMWChaos]

Below is some example responseText from an external javascript file called loadLogin.js. So from my webpage, I might have a button "Login" with an onclick property:

[HTML]onclick="loadData('loadLogin.js')"[/HTML]

 
function loginOver()
 
    {
 
    document.login.src = "../images/loginHover.jpg";
 
    }
 
function loginOut()
 
    {
 
    document.login.src = "../images/loginDefault.jpg";
 
    }
 
function submitOver()
 
    {
 
    document.submit.src = "../images/submitHover.jpg";
 
    }
 
function submitOut()
 
    {
 
    document.submit.src = "../images/submitDefault.jpg";
 
    }
 
function loginForm()
 
    {
 
    document.write('<form name="login" action="http://api.eve-online.com/account/Characters.xml.aspx" method="post">');
 
        document.write('UserID: <input type="text" name="userID" size="10" /><br /><br />');
 
        document.write('APIKey: <input type="text" name="apiKey" size="75" /><br /><br />');
 
        document.write('<input type="image" alt="Submit" name="submit" value="Submit" src="../images/submitDefault.jpg" onmouseover="submitOver" onmouseout="submitOut" />');
 
    document.write('</form>');
 
    }
 
document.write('<img src="../images/loginDefault.jpg" name="login" alt="Login" onmouseover="loginOver" onmouseout="loginOut" onclick="loginForm" />');
 
 

[RMWChaos]

Ok, so calling var loadData from function processData() does not make sense because processData is waiting on the new XMLHttpRequest to be readystate ==4 and status==200.

There has got to be some way to get the functions from an external javascript file pulled in from xmlhttprequest loaded into global scope. I thought this happened automatically with execScript() and setTimeout().

Perhaps because my xmlhttprequest script is an external file itself, not embedded in the HTML code, window refers back to the script file and not the htm file. Does that make sense? I am going to try putting the code directly into my webpage and see what happens.

[RMWChaos]

Nope. Exact same issue occurs when I run the xmlhttprequest script directly from within the html code. So this has something to do with how execScript() is evaluating the code. It is not loading the functions in the global scope or not remembering them or something.

[gits]

hi ...

did you try something that i showed you in my first post (#3)? ... as far as i can see that should work, i tested that with firefox ... in your processData() function you first should eval the responseText. after that you should be able to call the function by name only? do you get any errors? or do you just have no access to the evaluated functions?

kind regards

[gits]

and try to avoid document.write ... this destroys your current document, you may use regular dom-methods (createElement(), appendChild() etc.) for that ... or use innerHTML ...

kind regards

[RMWChaos]

gits,

I don't completely understand what you are suggesting I do in your post #3. Sorry, I have only been doing javascripting for about a month now; so without explicit examples, I sometimes get lost.

To answer your other question, once the external javascript file is either eval'd, execScript'd, or setTimeout'd, it does not appear that I can call any of the functions from the file. I will try a few things to confirm.

The example I gave was just one of the shorter external javascripts I am using, and I certainly will remove the document.write in favor of the dom method as you suggest. Other scripts I am calling do not have document.write in them and run into the same problem.

Figures I choose some of the most complex type of coding for my first project.

Thanks for your help! :-)

[gits]

first try the alert example i gave you ... and tell if that works ... please!

put the test-function to one of your js files. use firefox to test it. before that ... install the firebug extension so that we may easily debug our code ... i strongly recommend that step. ... next: load our test function, eval it and try to call it after the eval ... and then ... please post back the results ...

kind regards

[RMWChaos]

gits,

Added your code in post #3 to my loadXHR.js file in place of my other data processing files in processData(). Worked fine in both IE and FireFox. Firebug did not report any errors. An alert popped up with "3" in both IE and FF as expected.

I am going to test further with my original code using Firebug to see what errors it logs. I strongly suspect this has something to do with loading the external javascript in the global scope.

Thanks.

[gits]

hi ...

but when the test() - alert worked ... it is loaded in the gobal scope when you could call it by name and with a new param = 4 after the eval. so in that case your code should work too ... tell what firebug says ...

kind regards

[RMWChaos]

gits,

Okay, I tested as you said. I used a loadTest.js script with the code "return;" in it, and nothing else.

First, I click my button with attribute onclick="loadData('loadTest.js')" and it returns alert 3.

Next, I click another button with attribute onclick="test(4)" and it returns alert 4.

Firebug shows both functions returning "return;" as expected.

So it is loading into the global scope here.

[gits]

so ... now we know how to do it ... :) now try your functions to load ... and tell what firebug says ... please, and don't try to have a document.write there ... at the moment ... we may try to replace that later on ...

kind regards

[RMWChaos]

@#%$#@!!! Argh!

gits,

Okay, my original code is working now in IE and FF without any changes, but not NN for some reason. The problem, as it turns out, is that xmlhttprequest and document.write do not play well together. By themselves, each works fine, but following your advice, I will be dropping document.write from my code altogether.

As for NN, is there something different about how it interprets <img> attributes? Not even the alt="" text shows up when I hover, and the onclick="" is not launching.

Thanks again for all your help!!!

[gits]

hi ...

in any case you should always avoid document.write ... use innerHTML instead ... as the simple and beginner solution :) ... the best way owuld be to create regular nodes and append them through dom-handling ...

in case you could or have to isolate a NN specific problem ... after changing the handling ... you should start a new thread in the forum regarding this ...

as far as i can see ... it works now ... but you have to replace the document.writes?

kind regards

[RMWChaos]

gits,

That's correct, it works now. I am working on using dom-handling to create and remove nodes and plan on converting my text files to xml files, but it's taking a bit of trial and error. innerHTML will have to work for the time being. ;-)

I will open a new thread on the NN issue.

Take care and thanks for all your help!

[gits]

hi ...

glad to hear that you are on track at least :) ...

kind regards