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 zur Codierung der Datenbasis
XMLHttpRequest Object erzeugen:
Alle modernen Browser (IE11, Firefox, Chrome, Safari, and Opera) verfügen über ein built-in XMLHttpRequest object.
Syntax zum Erzeugen eines XMLHttpRequest object:
xmlhttp=new XMLHttpRequest();
[Ältere Versionen des Internet Explorer (IE5 and IE6) benötigen ein ActiveX Object:]
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
Ajax in der Praxis
Ajax Code
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("mySection").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<section id="mySection">
<h2>
Let AJAX change this text</h2>
</section>
<button onclick="loadXMLDoc()" type="button">Change Content</button>
</body>
</html>