Ziel des Artikels  nach oben

Das Ziel besteht dann darin (dynamisch) einen Text (quelle.***) in das Dokument (ziel.***) einzubinden und das Ergebnis für den Besucher sichtbar zu machen.

Als Grundstock wird dabei jeweils nach einer Möglichkeit gesucht, Daten in eine Variable zu laden. Diese Variable soll dann einfach nur noch in das Dokument geschrieben werden.

Die einfache Script-Variante  nach oben

Eine der ältesten und zugleich einfachsten Ideen Daten in eine Variable zu laden besteht darin, die Daten einfach schon in einer Variablen zu haben und diese zu Laden. Dieser Weg ist für die meisten Anwendungen völlig ausreichend und zudem noch sehr unkompliziert.

Die Idee ist, die Daten, die später geladen werden sollen, als Werte von definierten Variablen in einer .js-Datei abzuspeichern und diese dann - sofern sie benötigt werden - in die HTML-Datei zu laden. Benötigt werden dazu also 2 Dateien: Wir nennen sie mal quelle.js und ziel.htm Beispiel:

In quelle.js:

var Quelle = 'Textdateien laden mit JavaScript!';

In ziel.htm:

<script src="quelle.js"></script>
<script>
<!--
 document.writeln(Quelle);
//-->
</script>

Die dynamische Script-Variante  nach oben

Um das Laden von Dateien nun noch etwas freier zu gestallten, ist es z.B. möglich, die jeweilige JavaScript-Datei dynamisch einzubinden. Dies greift auch wieder auf die erste Idee zurück - allerdings mit dem Unterschied, dass hierbei die gesamte Datei dynamisch eingebunden wird und nicht nur der Text aus einer Datei. Im folgenden Beispiel wird angenommen, dass die Text-Variable Quelle in der Datei quelle.js gesperichert ist (siehe oben). In der Datei wird als zusätzlicher Eintrag document.writeln(Quelle); am Ende eingefügt. Die dazugehörige HTML-Datei läd die Datei als Script ein. Durch das Laden wird auch der darin enthaltene Code ausgeführt und somit der Text geschrieben. Somit ist es quasi möglich beliebige (vorpreparierte) Dateien zu laden.
Beispiel:

In quelle.js:

var text = 'Textdateien laden mit JavaScript!';
document.writeln(text); 

In ziel.htm:

document.writeln('<script src="quelle.js"></script>');

Die Fenster-Variante  nach oben

Eine weitere Idee, Daten in JavaScript einzulesen ist die Fenster-Variante. Die Überlegung besteht darin, die einzulesende Datei in ein neues Browser-Fenster zu öffnen und dieses dann auszulesen. Das Öffnen dürfte dabei kein größeres Problem darstellen. Einzig zu beachten ist, dass die Datei möglichst mit einer Dateiendung gekennzeichnet ist, die vom Browser nicht ausgeführt oder als Download herunter geladen wird. Es sollte also sichergestellt sein, dass die Datei vom Browser angezeigt wird.

Als weitaus größeres Problem stellt sich dann das Auslesen des Fensters dar. Mit Microsofts Internet Explorer geht dies relativ einfach:
Von dem geöffneten Fenster wird das document-Objekt abgefragt und von diesem wiederum mit getElementsByTagName('body')[0].innerHTML der Inhalt des body-Elements.
Da diese Schreibweise demDOMentspricht, wird sie sowohl vom MSIE ab 5.0 als auch von Netscapes 6er Versionen und Operas Browsern ab Version 7.0 unterstützt. Da diese 3 Browser ca. 90-95% des gesamten Browsermarktes ausmachen, sollte die Lösung also recht praktikabel sein. Leider ist Netscapes 4er Browser dagegen nicht wirklich dazu zu bewegen, den Inhalt auszuspucken.

Sind die Daten ersteinmal ausgelesen, müssen sie nur noch verarbeitet werden und das Browser-Fenster kann wieder geschlossen werden.
Beispiel:

In quelle.htm:

<html>
<head></head>
<body>Textdateien laden mit JavaScript!</body>
</html>

In ziel.htm:

b = 'quelle.htm';
c = window.open(b);
d = c.document.getElementsByTagName('body')[0].innerHTML;
c.close();
document.writeln(d);

Ein Problem dabei ist, dass, sobald der Ladevorgang des Fensters zu lang andauert, das Ausfragen des Fensters vielleicht keine Resultate oder einen Fehler hervorruft. Dazu empfiehlt es sich, mit Ereignissen zu arbeiten (z.B. onload).

Die ActiveX-Variante  nach oben

Neben zahlreichen anderen Dingen - die andere Browser nicht beherrschen - hat der Internet Explorer auch die Möglichkeit auf ActiveX-Objekte zuzugreifen. Die Idee ist nun, einfach das zuständige ActiveX-Objekt FileSystemObject zu verwenden um eine Datei zu öffnen, zu lesen und den Text auszugeben.

Auch hierbei entsteht wiederum ein größeres Problem: Wird das Script beim Clienten ausgeführt, so wird eine Datei im Internet nicht gefunden und kann demnach nicht geöffnet werden. Dazu kommt noch, dass 1. der MS Internet Explorer verwendet werden muss und 2. ActiveX eingeschaltet sein muss.

Diese Variante ist eher für serverseitiges Einfügen interessant (z.B. bei ASP) - zur Anwendung im eigenen Intranet (etc.) wäre sie allerdings auch in normalen Dokumenten zu gebrauchen.
Beispiel:

In quelle.txt:

Textdateien laden mit JavaScript!

In ziel.htm:

var a = new ActiveXObject('Scripting.FileSystemObject');

c = 'quelle.txt';
d = window.location.href;
d = d.substr(0,d.lastIndexOf('/')+1);
if(d.search('file:///') != -1) {d = d.substr(d.search('file:///')+8,d.length)}

e = a.OpenTextFile(d+c, 1, false);
f = e.ReadAll();

while(f.search('u000A') != -1){f = f.replace('u000A','<br>');}

document.writeln(f);

Die Data-Binding-Variante  nach oben

Eine weitere auf ActiveX basierende Idee ist Microsofts Data-Binding oder Data-Bind. Dabei werden im Internet Explorer bzw. Windows integierte ActiveX-Steuerelemente verwendet. Diese können mit dem object-Element eingebunden und durch Parameter gesteuert werden. Um Daten einzubinden wird die CLASSID mit der Kennung CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83 verwendet. Als Parameter können dazu unter anderem folgende übergeben werden:

  • DataURL - die zu öffnende Datei
  • TextQualifier - zu verwendende Trennzeichen

Dem Objekt wird eine ID gegeben. Innerhalb der Seite kann dann über diese ID ein div-Element eingefügt werden, welches auf dieses Objekt (per datascr-Attribut) verweist. Handelt es sich bei den Daten um Text, sollte zusätzlich datafld="Text" angegeben werden. Ausserdem kann mit dataformatas="HTML" die Formatierung der Daten als HTML definiert werden.

Die zu öffnende Datei muss zusätzlich noch (um-)formatiert werden. Die erste Zeile sollte $Text:String$ lauten, wobei $ gegen die benannten Trennzeichen (TextQualifier-Attribut) ausgetauscht werden können. Zusätzlich muss jede weitere Zeile mit diesem Trennzeichen anfangen und beendet werden.
Beispiel:

In quelle.txt:

$Text:String$
$Textdateien laden mit JavaScript!$ 

In ziel.htm:

b = 'quelle.txt';
c = '<OBJECT ID="meinObj" WIDTH="0" HEIGHT="0" '+
    'CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">n' +
    ' <PARAM NAME="DataURL" VALUE="' + b + '">n' +
    ' <PARAM NAME="TextQualifier" VALUE="$">n' +
    ' <PARAM NAME="FieldDelim" VALUE="|">n' +
    ' <PARAM NAME="UseHeader" VALUE="true">n' +
    '</OBJECT>n' +
    '<div datasrc="#meinObj" datafld="Text" dataformatas="HTML"></div>n';
document.write(c); 

Die Java-Variante  nach oben

Ein weitere Idee besteht darin, auf Java zum Lesen der Datei zurück zu greifen. Da der Netscape Navigator in der Lage ist zwischen Java und JavaScript direkte Kommunikation innerhalb von script-Bereichen zu betreiben, können hierbei die Daten also auch mit JavaScript weiter verarbeitet werden. Der Internet Explorer unterstützt dies leider nicht - für ihn müsste der Java-Code daher in ein Applet verpackt werden. Auch hier wird die Datei vorher mit Trennzeichen und Formatierungen ausgestattet, sodass die Dateien aus der Data-Bining-Variante genutzt werden können. Folgender Code eignet sich für das auslesen von Dateien mit Java.
Beispiel:

In quelle.txt:

$Text:String$
$Textdateien laden mit JavaScript!$

In ziel.htm:

function Einlesen(FileName, Trennzeichen)
{
 a = self.location.pathname;
 a = a.substring(0, a.lastIndexOf('/')+1);

 b = new java.net.URL(self.location.protocol.split(':').join(''),
                      self.location.host, a + FileName);
 c = new java.io.BufferedReader(
     new java.io.InputStreamReader(b.openStream()));
 d = c.readLine();
 while((d = c.readLine()) != null)
 {e += d + ' ';}

 c.close();
 e = e.split(Trennzeichen).join('');

return(e);
}

if (document.layers && navigator.javaEnabled())
{
 document.writeln(Einlesen('quelle.txt', '$'));
}

Alternativen zu JavaScript  nach oben

Zwar werden die beschriebenen Ideen für die meisten einfachen JavaScript-/Homepage-Bastler völlig ausreichend sein, dennoch ist keine wirklich professionelle Lösung mit JavaScript bzw. Jscript zu erreichen. Für die meisten Anwender wird sich demnach das Augenmerk eher auf eine andere Sprache richten.
Nützlich dafür sind serverseitige Sprachen wie PHP oder ASP . Der Vorteil liegt dabei klar auf der Hand: Da der Client vom Server nur die Resultate des Einbindens bekommt, ist es egal, was für einen Browser er hat und es funktioniert immer. Eine mögliche PHP-Umsetzung zum Einbinden einer Textdatei wäre zum Beispiel:

In quelle.txt:

Textdateien laden mit JavaScript!

In ziel.php:

<script language="PHP">
echo "<script>n";
echo "var Quelle = '";
include "quelle.txt";
echo "';";
echo "</script>n";
</script> 

Fazit  nach oben

Letztlich sollte jeder selbst sehen, was für seine Bedürfnisse am Besten und ausreichend professionell genug ist. PHP oder ASP bieten sicherlich die beste Möglichkeit, wobei - je nach Anwendung - auch einfache JavaScript-Varianten durchaus ihren Dienst tun können.