AJAX

Wie auf der vorigen Seite erläutert benötigt man für die AJAX Kommunikation ein XMLHttpRequest Objekt.

XMLHttpRequest Object

Mit einem XMLHttpRequest Objekt kann man Dateien empfangen und senden. mehr dazu siehe w3schools Dieses Objekt hat folgende Methoden und Eigenschaften.

Senden und empfangen

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");

Das Konfigurieren des Headers muss nach der Methode open() und vor der Methode send() geschehen.

So wäre es beispielsweise möglich einen Indexwert zu senden und dann aus einem Array ein bestimmtes Element zu empfangen. Im folgendem gibt es eine array.php und eine karte.html mit dem Javascript.

Beispiel

array.php

<?php
$nr = $_POST["index"];
$karte = [];
$karte[0] = "Narr";
$karte[1] = "Der Magier";
$karte[2]="Die Hohepriesterin";

echo json_encode($karte[$nr]);
?>

in Javascript:

let anzeige = document.getElementById( "anzeige" );
var xhttp = new XMLHttpRequest();
xhttp.onload = ( e ) =>
{
    var karte = JSON.parse( xhttp.responseText );
    anzeige.innerHTML = 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 img_info.xml

Beispiel 1

 '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') hier wird der XML Mime Type gesetzt.

Beispiel 2

 '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;

Beispiel 3

'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.

beispiel 4

 '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.

Beispiel 5

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.

Javascript Tipps