Javascriptdatei dynamisch mit AJAX laden

**jeko** · 02-03-2007, 22:51

Hallo zusammen!

Für den Eigengebrauch habe ich mir mal folgende Funktion geschrieben und denke, dass sie noch ganz nützlich ist.

Die Funktion ermöglicht das dynamische Laden einer Javascriptdatei (.js) mittels AJAX.
Getestet in Firefox 2.0 und Internet Explorer 5.5, 6 und 7.

Aufruf:

Code:

loadJSFile(string filename[,bool einmaligEinbinden=false]);

filename ist der Pfad zur .js-Datei. Als optionaler Parameter kann zusätzlich einmaligEinbinden. Ist einmaligEinbinden true, so wird die Datei nur einmal im gesamten Dokument eingebunden. D.h. sollte im gleichen Dokument ein zweiter Aufruf von loadJSFile mit dem gleichen filename erfolgen, wird die Datei nicht geladet.

Funktionscode:

HTML-Code:

//<!--
var ljsf;
var schonEingebunden = ""; // Speichert die bereits eingebundenen Scripts
function loadJSFile(filename,einmaligEinbinden) {
         if (einmaligEinbinden) {
            // schon einbebunden?
            if (schonEingebunden.indexOf("|"+filename+"|")!=-1) return true;
            // Nein, in die Liste damit
            schonEingebunden = schonEingebunden + "|" + filename + "|";
         }

        // Instanz einmalig erstellen
        if (ljsf == null) ljsf = (navigator.userAgent.indexOf("MSIE")+1)?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest;
        
        ljsf.open('get',filename,true);
        ljsf.setRequestHeader("Connection","close");
        ljsf.onreadystatechange = function() {
                if(ljsf.readyState == 4){
                        eval(ljsf.responseText);        
                }
        }
        ljsf.send(null);
}
//-->

Beispieldatei: Testfile für js dynamisch laden

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>Testfile für js dynamisch laden</title>
<script type="text/javascript">//<!--
var ljsf;
var schonEingebunden = ""; // Speichert die bereits eingebundenen Scripts
function loadJSFile(filename,einmaligEinbinden) {
         if (einmaligEinbinden) {
            // schon einbebunden?
            if (schonEingebunden.indexOf("|"+filename+"|")!=-1) return true;
            // Nein, in die Liste damit
            schonEingebunden = schonEingebunden + "|" + filename + "|";
         }

        // Instanz einmalig erstellen
        if (ljsf == null) ljsf = (navigator.userAgent.indexOf("MSIE")+1)?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest;
        
        ljsf.open('get',filename,true);
        ljsf.setRequestHeader("Connection","close");
        ljsf.onreadystatechange = function() {
                if(ljsf.readyState == 4){
                        eval(ljsf.responseText);        
                }
        }
        ljsf.send(null);
}
//-->
</script>
</head>
<body>
<!-- HTML Code -->
<a href="#" onclick="loadJSFile('./test.js');" title="JS-File Einbinden!">binde test.js ein</a>
</body>
</html>

Eingebunden wird das JS-File 'test.js' wenn man auf den Link klickt. In der Datei test.js ist ein Alert. Erscheint dieser Alert nach dem Klick, war das Laden erfolgreich.

test.js: http://dominiquesandoz.ch/Tests/ladeJSDynamisch/test.js

HTML-Code:

// <!--

alert("Erfolgreich eingebunden! Ich bin schon das JS-File! :D");

// -->

Viel Spass damit!

Grüsse,
jeko

**Buenaventure** · 18-07-2007, 23:45

Ich habe so was ähnliches auch schonmal geschrieben. Wenn man direkt nach dem load Befehl eine Funktion aufruft, die in dem JS File steht, gibt es einen Fehler, weil die Funktion aufgerufen wird bevor der Server antwortet. Man kann aber statt ljsf.open('get',filename,true); schreiben ljsf.open('get',filename,false);. Dann wartet der Browser, bis das Script da ist. das Problem ist nur, dass der Browser total hängt, bis die Antwort kommt.

Außerdem würde ich noch was einbauen, falls die Datei nicht existiert, das sähe dann so aus:

Code:

//<!--
var ljsf;
var schonEingebunden = ""; // Speichert die bereits eingebundenen Scripts
function loadJSFile(filename,einmaligEinbinden) {
         if (einmaligEinbinden) {
            // schon einbebunden?
            if (schonEingebunden.indexOf("|"+filename+"|")!=-1) return true;
            // Nein, in die Liste damit
            schonEingebunden = schonEingebunden + "|" + filename + "|";
         }

        // Instanz einmalig erstellen
        if (ljsf == null) ljsf = (navigator.userAgent.indexOf("MSIE")+1)?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest;
        
        ljsf.open('get',filename,false);
        ljsf.setRequestHeader("Connection","close");
        ljsf.onreadystatechange = function() {
                if(ljsf.readyState == 4){
                        switch(ljsf.status){
                                case 200:eval(ljsf.responseText);break;
                                default:alert("ERROR while loading '"+filename+"':\n\t"+ljsf.status+"\n\t"+ljsf.statusText);
                        }
                }
        }
        ljsf.send(null);
}
//-->