Script laden und ausführen

[Rudi Ratlos]

Hallo,

ist es möglich, eine Datei example.js zu laden und auszuführen?

Bei Klick auf eine Schaltfläche möchte ich Daten per Ajax holen, aber die Ajax-Vorbereitung aus Gründen eines schlanken Codes nicht grundsätzlich einbauen, ihr wisst schon:

if (window.XMLHttpRequest) {  
  request = new XMLHttpRequest(); // Mozilla, Safari, Opera  
}  
else if (window.ActiveXObject) ...  

Laden kann ich sie ja. Aber der Browser denkt nicht dran, sie auszuführen. Irgendein "Simsalabim" fehlt. Leider kann ich nicht googeln, weil ich nicht weiss, wie "Simsalabim" auf javanisch heißt.

Gruß, Rudi

[Felix Riesterer]

Lieber Rudi Ratlos,

wenn Du die Datei als String laden lässt, dann hast Du eben einen String vorliegen. Bindest Du stattdessen ein JS-File über ein <script>-Element in die Seite ein, dann hast Du ein Script.

JavaScript bietet die Möglichkeit, <http://de.selfhtml.org//javascript/objekte/unabhaengig.htm#eval@title=String-Inhalte als JS-Code auszuwerten> - aber eval ist bekanntlich evil...

Liebe Grüße,

Felix Riesterer.

[Matti Mäkitalo]

Hi,

Bei Klick auf eine Schaltfläche möchte ich Daten per Ajax holen, aber die Ajax-Vorbereitung aus Gründen eines schlanken Codes nicht grundsätzlich einbauen

ich würde dir empfehlen, einen JavaScript-Loader zu verwenden, z.B. require.js.

Bis die Tage,
Matti

[JürgenB]

Hallo Matti,

ich würde dir empfehlen, einen JavaScript-Loader zu verwenden, z.B. require.js.

das geht aber auch einfacher, indem per JS ein Script-Element erzeugt wird:

  
LoadScript = function(url,callback) {  
  var scr = document.createElement('script');  
  scr.type = "text/javascript";  
  scr.async = "async";  
  if(typeof(callback)=="function") {  
    scr.onloadDone = false;  
    scr.onload = function() {  
      if ( !scr.onloadDone ) {  
        scr.onloadDone = true;  
        callback();  
      }  
    };  
    scr.onreadystatechange = function() {  
      if ( ( "loaded" === scr.readyState || "complete" === scr.readyState ) && !scr.onloadDone ) {  
        scr.onloadDone = true;  
        callback();  
      }  
    }  
  }  
  scr.src = url;  
  document.getElementsByTagName('head')[0].appendChild(scr);  
} // LoadScript  

Gruß, Jürgen

[Matti Mäkitalo]

Hi,

ich würde dir empfehlen, einen JavaScript-Loader zu verwenden, z.B. require.js.

das geht aber auch einfacher, indem per JS ein Script-Element erzeugt wird

interessante Definition von einfacher hast du da.

Der Unterschied von "require.js einbinden" zu "dein Code einbinden" ist marginal, die Aufrufsyntax ist (fast) gleich. Am Ende kommt es darauf an, dass require.js besser gewartet wird als dein Code-Schnippsel, und require.js mächtiger ist.

Bis die Tage,
Matti

[JürgenB]

Hallo Matti,

interessante Definition von einfacher hast du da.

genau: 14 KB minimiert gegen 655 Byte strukturiert.

Gruß, Jürgen

[Rudi]

Hallo Jürgen,

sieht interessant aus, auch wenn ich (noch) nicht verstanden habe, an welcher Stelle der Browser veranlasst wird, den geladenen Code auszuführen.

Du gibst an, dass dein Code 655 Byte umfasst. Mein Ajax- Code, den ich nur bei Bedarf nachladen will, umfasst 2,3 kB. Da muss ich mal abwägen, ob der logistische Aufwand lohnt.

Aber die Technik zu verstehen, hat was.

Eigentlich dachte ich an so etwas Einfaches wie "eval", mir fehlte nur dieser Begriff zum Suchen.

Rudi

[JürgenB]

Hallo Rudi,

sieht interessant aus, auch wenn ich (noch) nicht verstanden habe, an welcher Stelle der Browser veranlasst wird, den geladenen Code auszuführen.

die Funktion macht eigentlich nichts anderes, als ein Script-Element zu erzeugen und einzubinden.

Loadscript("test.js","");

macht (fast) nichts anderes, als

<script src="test.js"></script>

Wenn test.js nur Funktionsdefinitionen enthält, stehen diese nach(!) dem Laden zur Verfügung. Programmcode wird sofort ausgeführt.

Allerdings wird das Nachladen des Scripts asynchron ausgeführt. Loadscript gibt nach dem Erstellen des Script-Elements die Kontrolle sofort an das aufrufende Programm zurück und wartet nicht darauf, das das Script geladen ist. Du kannst daher auf die im nachgeladenen Script definierten Objekte nicht sofort zugreifen, sondern musst warten, bis das Nachladen abgeschlossen ist. Daher gibt es in Loadscript noch den Parameter "callback". Hier kann eine Referenz auf eine Funktion übergeben werden, die nach dem Laden aufgerufen wird:

Loadscript("test.js",function() { funktion_aus_test() });

Für das Aufrufen der Callbackfunktion werden dem Script-Element noch entsprechende Eventhandler gegeben: onload und onreadystatechange, um Browserübergreifend zu sein.

Du gibst an, dass dein Code 655 Byte umfasst. Mein Ajax- Code, den ich nur bei Bedarf nachladen will, umfasst 2,3 kB. Da muss ich mal abwägen, ob der logistische Aufwand lohnt.

Dazu musst du wissen, wie oft der Nachlader zum Einsatz kommt. Bei einem so kleinen Script würde ich das Script immer einbauen. Hier passt das Zitat von einem Kabarettisten: "Wir müssen sparen, koste es, was es wolle." :)

Eigentlich dachte ich an so etwas Einfaches wie "eval", mir fehlte nur dieser Begriff zum Suchen.

eval in Verbindung mit AJAX wäre auch eine Möglichkeit, man muss aber die "Eigenarten" von eval berücksichtigen, z.B. der Kontext, in dem eval läuft. Bei meinen Tests mit einem Nachlader mit ajax und eval waren globale Objekte "plötzlich" lokal. Außerdem sind Http-Requests nicht gerade Einzeiler.

Gruß, Jürgen

[Matti Mäkitalo]

Hi,

eval in Verbindung mit AJAX wäre auch eine Möglichkeit, man muss aber die "Eigenarten" von eval berücksichtigen, z.B. der Kontext, in dem eval läuft. Bei meinen Tests mit einem Nachlader mit ajax und eval waren globale Objekte "plötzlich" lokal. Außerdem sind Http-Requests nicht gerade Einzeiler.

Außerdem die Fallstricke beachten: http://requirejs.org/docs/why.html#5

Bis die Tage,
Matti