AJAX

Ein Grundproblem von Webseiten war in den Anfangsjahren die Schwerfälligkeit bei der Interaktion, weil man jede Benutzer-Aktivität zum Server senden musste und dann die ganze Seite noch einmal aufbauen musste. Bei komplexen Seiten dauert der Neuaufbau aber zu lange.
Etwa 2005 wurde AJAX zum Nachladen von Teilen einer Seite entwickelt, um nicht die ganze Seite neu aufbauen zu müssen.
Das Konzept ist sehr einfach. Nehmen wir an es gibt eine sehr komplizierte seite1.htm, die bei Aufruf auch angezeigt wird. Durch einen Klick auf einen Button (oder ein Auswahlmenü, oder ein PullDown oder bei Eingabe eines Textes…) soll eine Zweite Seite seite2.htm an einer bestimmten Stelle der ersten Seite eingefügt werden.
Was braucht man dazu?
Man muss wissen, wie man ein Element einer Webseite anspricht (getElementById) (ajax-1.htm)
[code lang=”js”]
<script>
function ladeDokument() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("neu").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax-2.htm", true);
xhttp.send();
}
</script>
<h1>Das ist eine sehr komplizierte Seite</h1>
<div id="neu">Hier ist der Platz für neuen Content
<button type="button" onClick="ladeDokument()">Ändere den Inhalt</button>
</div>
[/code]

ajax-2.htm

[code lang=”html”]
<h2>Das ist ein vollkommen neuer Inhalt</h2>
<p>Dieser Inhalt wird ohne Neuaufbau der ursprünglichen Seite hier eingefügt.</p>
[/code]
Das Programm kann unter Zuhilfenahme von jQuery auch bedeutend vereinfacht werden (ajax-1-jquery.htm):
[code lang=”js”]
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<h1>Das ist eine sehr komplizierte Seite</h1>
<div id="neu">Hier ist der Platz für neuen Content
<button id="b" type="button">Ändere den Inhalt</button>
</div>
<script>
$( "#b" ).click(function() {
$( "#neu" ).load( "ajax-2.htm" );
});
</script>
[/code]

Hinweise

• Alle hier in Klammen gesetzten Dateien findest Du auf der Seite http://sex.clubcomputer.at -> webseiten zum Ausprobieren.
• Die Beispiele in diesem Beitrag sind auch in einem Foliensatz zu finden.
• Beachte auch den Beitrag “Websprachen lernen”, in dem zahlreiche Links zu dem hier besprochenen Thema zu finden sind.

• Über
• Letzte Artikel

Franz Fiala

Ehemaliger Präsident Clubcomputer / Herausgeber PCNEWS bei ClubComputer.at

Franz war pensionierter HTL Lehrer (TGM), Präsident von ClubComputer, Herausgeber der Clubzeitung PCNEWS und betreute unser Clubtelefon und Internet Support. Er war leidenschaftlicher Rapid Wien Fan. Er ist leider Anfang Jänner 2024 nach langer schwerer Krankheit verstorben.

Letzte Artikel von Franz Fiala (Alle anzeigen)

• Neue Folgen im Physik-Universum - 18. Dezember 2023
• Große Dateien in WordPress - 17. Dezember 2023
• Wien-Panorama - 16. Dezember 2023