Ajax
Asynchronous JavaScript and XML in der Theorie
In diesem Kontext ist mit AJAX weder ein Fußballverein, noch ein Reinigungsprodukt oder die Stadt am Ontariosee gemeint. Es handelt sich auch nicht um eine Programmiersprache sondern um ein Konzept, wie bereits existierende Standards gemeinsam zielorientiert eingesetzt werden können. Das verfolgte Ziel ist der Aufbau einer dynamischen, schnellen Webseite, die so strukturiert ist, dass die Daten zu einzelne Inhalten der Seite aus einer Datenbank bezogen werden und bei Änderung der Anforderungen an diese Daten, wird nicht die gesamte Seite neu geladen, sondern nur der entsprechende Bereich verändert.
Bekannte Beispiele für den Einsatz von AJAX sind:
- Google Maps,
- Gmail,
- Youtube
- Facebook.
AJAX ist ein Akronym zu Asynchrones JavaScript and XML und beschreibt eine bestimmte Art des Datenaustausches über HTTP (Ausführliche Erklärung).
AJAX kombiniert folgende Standards:
- JavaScript/DOM
Ein XMLHttpRequest ist ein Verfahren zur Datenübertragung mittels HTTP, das es ermöglicht, Daten dynamisch von einem Server abzurufen, ohne dass die HTML-Seite neu geladen werden muss. XML Daten können bei diesem Verfahren als Baumstruktur übermittelt werden. Das XMLHttpRequest Objekt stellt somit das Herzstück der Ajax-Kommunikation dar. XMLHttpRequest Objekt - HTML5
- CSS zur Gestaltung
- XML (oder ein anderes textbasiertes Format) zur Codierung der Datenbasis
XMLHttpRequest Object erzeugen:
Alle modernen Browser verfügen über ein built-in XMLHttpRequest Object.
Syntax zum Erzeugen eines XMLHttpRequest Object:
xmlhttp=new XMLHttpRequest();
Ajax in der Praxis
Ajax Code
<!DOCTYPE html>
<html>
<head>
<title>AJAX Testseite</title>
<script>
function ajaxTest(){
var MeinXmlHttp;
MeinXmlHttp=new XMLHttpRequest();
MeinXmlHttp.onreadystatechange=function(){
if (MeinXmlHttp.readyState==4 && MeinXmlHttp.status==200) {
document.getElementById("mySection").innerHTML=MeinXmlHttp.responseText;
}
}
MeinXmlHttp.open("GET","meineDatenbasis.txt",true);
MeinXmlHttp.send();
}
</script>
</head>
<body>
<section id="mySection">
<h2>AJAX Testseite</h2>
</section>
<button onclick="ajaxTest()" type="button">let's go</button>
</body>
</html>