MiSo: Seiteninhalte dynamisch ändern / AJAX

Gibt es eine möglichkeit den Text der Seite an sich dynamisch umzugestalten. Beispiel: per ajax eine Suche durchführen und die Ergebnisse dann in einer Tabelle anzeigen ohne die Seite neu laden zu müssen. Gibt es irgendeinen Weg die Seite mit JS per Mausklick "umzuschreiben"?

mfg
Micha

  1. Gibt es eine möglichkeit den Text der Seite an sich dynamisch umzugestalten. Beispiel: per ajax eine Suche durchführen und die Ergebnisse dann in einer Tabelle anzeigen ohne die Seite neu laden zu müssen. Gibt es irgendeinen Weg die Seite mit JS per Mausklick "umzuschreiben"?

    Sicher gibt es die. Aber worum geht es dir?

    a) Um das Abfragen von Informationen von deinem Server, ohne die Seite sichtbar neu laden zu müssen oder

    b) um das Schreiben in die Seite per JavaScript?

    Für beides hast du mehrere Möglichkeiten. Alle vorzustellen spare ich mir, wenn doch eine reicht ;-)

    Zu a):
    Die einfachste und kompatibelste Methode hier ist ein iframe. Erstelle ein iframe mit 0px Breite und Höhe, (oder mach es per CSS "display" oder "visibility" gleich unsichtbar). Anschließend kannst du per JavaScript in diesem Frame vom Besucher deiner Seite unbemerkt Seiten aufrufen:

    window.frames["meinFrame"].document.location.href = 'seite.php';

    ...und anschließend die geladene Seite mit JavaScript einlesen und die Informationen verarbeiten:

    var frameInhalt = frames["meinFrame"].document.getElementsByTagName('body')[0].innerHTML;

    Problematisch ist hierbei allerdings, dass die Seite beim Abruf von innerHTML nicht garantiert fertig geladen ist. Dies ließe sich lösen, indem du in der im iframe aufgerufenen Seite (in diesem Fall seite.php) entweder per <body onload=""> oder per <script> kurz vor </body> eine Funktion in deiner Hauptseite aufruft, die sozusagen verkündet, dass die Seite fertig geladen ist.

    Die iframe-Methode hat mehrere Nachteile:
     - iframes sind *relativ* neu, sehr alte Browser unterstützen sie nicht unbedingt
     - im Internet Explorer erzeugt das Laden eines iframes je nach Einstellung eventuell einen lästigen "Klick"-Ton.
     - iframes müssen nicht immer aktiviert sein (bspw. Opera bietet eine Option, die iframes verbietet)

    Eine Alternative zu den iframes ist die Kommunikation per XML. Im Internet Explorer mit der XML-ActiveX-Komponente, in anderen Browsern mit dem neuen XMLHTTPRequest-Objekt. Aber das würde zu ausführlich werden. Schau dir AJAX-Toolkits wie "SAJAX" an. Die sind recht leicht zu verstehen und benutzen diese Objekte zur Kommunikation mit dem Server.

    Zu b):
    Diese Methode sollte in allen halbwegs aktuellen Browsern funktionieren:

    document.getElementsByTagName('body')[0].innerHTML += "Hallo Welt!"

    Dies würde am Ende deiner Seite "Hallo Welt!" anfügen. Du kannst natürlich auch gezielt in andere Tags hineinschreiben, z.B. per getElementById statt ...sByTagName. Du brauchst auch nicht ans Ende schreiben, du kannst den Inhalt auch komplett ersetzen.

    Ich denke die Funktionsweise ist auf jeden Fall klar.

    --
    Grüße,
    Yarin