AJAX
AJAX bietet die Möglichkeit mit dem Server zu kommunizieren, ohne dass die Seite neu geladen wird. AJAX ist keine Programmiersprache sondern eine Methode oder ein Verfahren.
XML HttpRequest Object
Mit einem XMLHTTPRequest Objekt kann man Dateien empfangen und senden. mehr dazu siehe w3schools
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("info").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "info.txt", true);
xhttp.send();
Man erzeugt zuerst ein XMLHttpRequest Objekt.
Der Event onreadystatechange reagiert auf Veränderungen im Ladevorgang, also jedes mal wenn sich der Status des Objekts ändert.
readyState liefert Informationen über den Ladevorgang. siehe dazu w3school
responseText liefert das was gesendet wurde, im obigen Beispiel den Inhalt der Datei info.txt
Wenn man die Methode POST statt GET verwendet und einen Header anhängt, ist möglich etwas zu senden, bevor es empfangen wird. Das kann von PHP genau wie eine Formularvariable empfangen werden.
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("index=2");
object.send("name=Bernd&ort=Berlin") keine Leerzeichen, weitere Variablen mit kaufmännischem & anhängen
So wäre es beispielsweise möglich einen Indexwert zu senden und dann aus einem Array ein bestimmtes Element zu empfangen. Das könnten in PHP so aussehen:
<?php $nr = $_POST["index"]; karte[0] = "Narr" karte[1] = "Der Magier" $karte[2]="Die Hohepriesterin"; echo json_encode($karte[$nr]); ?>
im Javascript:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var karte = JSON.parse(this.responseText);
document.write(karte);
}
};
xhttp.open("POST", "array.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("index=2");
XML Dateien empfangen
In folgenden 4 Beispielen werden die Daten aus einer XML Datei gelesen und damit eine Bilder-Galerie erstellt. Hier die info_xml.html
'use strict';
let request = new XMLHttpRequest();
request.onload = function(e){
if(request.status === 200){
let xml = request.responseXML;
}
};
request.open('GET', 'img_info.xml');
request.responseType = 'document';
request.setRequestHeader('Accept', 'text/xml');
request.send(null);
request.status == 200 bedeutet, dass die Anfrage erfolgreich war.
request.responseType = 'document; bedeutet, dass es sich um eine XML Datei handelt
setRequestHeader('Accept', 'text/xml') auch hier wird der XML Mime Type gesetzt.
'use strict';
let request = new XMLHttpRequest();
request.onload = function(e){
if(request.status === 200){
let xml = request.responseXML;
document.getElementById("anzeige").innerHTML = xml.getElementsByTagName("titel")[0].textContent;
}
};
request.open('GET', 'img_info.xml');
request.responseType = 'document';
request.setRequestHeader('Accept', 'text/xml');
request.send(null);
request.responseXML liefert das XML Document
Aus diesem XML Document kann man genauso wie beim HTML Document die einzelnen Elemente auf verschiedene Arten ansprechen.
xml.getElementsByTagName("titel")[0].textContent;
'use strict';
let request = new XMLHttpRequest();
request.onload = function(e){
if(request.status === 200){
let xml = request.responseXML;
let bilder =new Array(xml.getElementsByTagName("Bild").length) ;
let titel = xml.querySelectorAll("Bild > titel");
let url = xml.querySelectorAll("Bild > bildurl");
let flickr = xml.querySelectorAll("Bild > filmurl");
console.log(bilder.length);
for(let i = 0; i < bilder.length; i++){
bilder[i] = {titel: titel[i].textContent,
url:url[i].textContent,
flickr: flickr[i].textContent
};
console.log(bilder[i].titel);
console.log(bilder[i].url);
console.log(bilder[i].flickr);
document.getElementById("anzeige").innerHTML += bilder[i].titel+" | "+bilder[i].url+"<br>";
}
}
};
request.open('GET', 'img_info.xml');
request.responseType = 'document';
request.setRequestHeader('Accept', 'text/xml');
request.send(null);
Hier werden aus den XML Elementen Arrays erzeugt. Diese Arrays werden in der for-Schleife zu einem Array zusammengesetzt, dessen Elemente Objekte sind.
bilder[i] = {titel: titel[i].textContent,
url:url[i].textContent,
flickr: flickr[i].textContent
};
So hat man einen übersichtlichen Zugriff auf alle Elemente.
'use strict';
let request = new XMLHttpRequest();
request.onload = function(e){
if(request.status === 200){
let xml = request.responseXML;
let bilder =new Array(xml.getElementsByTagName("Bild").length) ;
let titel = xml.querySelectorAll("Bild > titel");
let url = xml.querySelectorAll("Bild > bildurl");
let flickr = xml.querySelectorAll("Bild > filmurl");
console.log(bilder.length);
for(let i = 0; i < bilder.length; i++){
bilder[i] = {titel: titel[i].textContent,
url:url[i].textContent,
flickr: flickr[i].textContent
};
setElement(bilder[i].url, bilder[i].titel, bilder[i].flickr);
}
}
};
request.open('GET', 'img_info.xml');
request.responseType = 'document';
request.setRequestHeader('Accept', 'text/xml');
request.send(null);
function setElement(imgSrc, imgTitel, imgLink){
let a = document.createElement('a');
a.setAttribute("href", imgLink);
let img = document.createElement('img');
img.src = imgSrc;
img.setAttribute("title", imgTitel);
a.appendChild(img);
document.body.appendChild(a);
}
Hier ist eine Funktion hinzugekommen, die aus den Daten der XML Datei Links mit Bildern erzeugt, welche im body eingefügt werden.
In dieser Datei passiert in Sachen XML nichts neues. Lediglich die HTML Elemente und CSS Styles werden etwas optimiert, indem die setElement() etwas angepasst wird und im body ein vorhandes Div Element mit Flexbox Eigenschaften genutzt wird.
