LoadRemoteHTML() 02. November 2006 um 07:10 Uhr / Webdesign Programming /

Eingestellt am 02. November 2006 um 07:10 Uhr » Webdesign Programming

Als ich mir AHAH angesehen hatte gefiel mir die einfachheit auf anhieb, also der "Kosten-Nutzen" Faktor ist sehr hoch, man hat mit wenig code was ziemlich mächtiges geschaffen.

Aber es fielen mir auch sofort einige Mankos auf, zum Beispiel musste das Element in welches geladen werden sollte dringend eine eigene ID haben und es waren zwei von einander losgelöste Funktionen, die eigentlich hätten zusammengefasst werden sollen. Weiterhin wurden die Daten auf der Seite schon unwiederbringlich verändert bevor man überaupt eine erfolgreiche Antwort vom Server bekam. Alles in allem war das ganze irgendwie wirklich nicht zufriedenstellend.

Deshalb habe ich mir die Sache nachgebaut, und zwar so dass es meinen Vorstellungen entspricht :-) hier erst einmal der Quellcode:

function LoadRemoteHTML(target, url) {
  var self = this;

  if (window.XMLHttpRequest) req = new XMLHttpRequest();
  else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");
  if(!req) {
    alert("Dieser Browser unterstützt diese Funktion nicht.");
    return false;
  }

  this.done = function(req, target) {
    if (req.readyState == 4) {
      if (req.status == 200) {
        if(typeof target == "string") {
          document.getElementById(target).innerHTML = req.responseText;
        else target.innerHTML = req.responseText;
      }
      else alert("Fehler: ("+ req.status +") "+ req.statusText +"\n"+ req.responseText);
    }
  }

  req.onreadystatechange = function() { self.done(req, target); };
  req.open("GET", url, true);
  req.send(null);
}

Man hat damit die Möglichkeit ein Objekt zu übergeben, innerhalb welches nun die Daten geladen werden sollen, ohne dass dieses Objekt eine ID benötigen würde:


<td>
  <input type="button" value="Uhren"
     onclick="LoadRemoteHTML(this.parent, 'foo.py?q=' + this.value)" />
  <input type="button" value="Schmuck" 
     onclick="LoadRemoteHTML(this.parent, 'foo.py?q=' + this.value)" />
</td>

Hier zum Beispiel wird der Inhalt des Elternelements des geklickten Buttons, also das <td> mit dem Ergebnis des Scriptes foo.py ausgetauscht. Anstatt das foo.py Script zu benutzen könnte man da auch eine einfache Statische Datei angeben: LoadRemoteHTML(this.parent, 'uhren.html') dabei wird der Inhalt der Datei uhren.html vom Server im gleichen Verzeichnis geladen. Dabei dürfen es natürlich keine kompletten HTML Dateien mit <head> und allem sein, sondern nur Ausschnitte, die an eine bestimmte Stelle reingemacht werden sollen.

Selbstverstendlich ist es aber weiterhin möglich ein Objekt mit einer ID anzusprechen. Das geht exakt genau so, nur dass man die ID als String übergibt anstatt des objektes selbst: LoadRemoteHTML('menu', '/test.html') damit wird der geladene Inhalt der Datei text.html aus dem Root-Verzeichnis in das Element mit der ID menu geschrieben.

Da das ganze natürlich keine Rocket-Sience ist steht das obrige Script unter Public Domain und kann von jedem verwendet und verändert werden, und vielleicht hilft so ein einfaches "Ajax"-Beispiel dem einen oder anderen den ganzen Hokus-Pokus dahinter zu verstehen :-).

Kommentare

Die Kommentare sind für diesen Eintrag geschlossen.