Mit FormData gibt es ein Objekt, um Daten mit dem Request zu übergeben.
var e_parameter = new FormData(); // Element zur Parameterübergabe an PHP
e_parameter.append('artist',v_artist); // Variable anfügen
Für ein AJAX-Request wird zunächst ein neuer Request erzeugt.
var e_request = new XMLHttpRequest(); // AJAX-Request erzeugen
Dem AJAX-Request wird ein Eventlistener für das Event load hinzugefügt.
e_request.addEventListener("load", dataShowXML, false);
Der AJAX-Request wird mit open geöffnet und mit send abgesendet. Der dritte Parameter bestimmt, ob der Request syncron (false) oder asyncron (true) erfolgen soll.
e_request.open('GET',v_url,true); oder e_request.open('POST',v_url,true);
e_request.send(null); oder e_request.send(e_parameter);
Der Funktion, die beim addEventListener angegeben wird, wird automatisch das Objekt übergeben.
Dies muss in eine Variable übernommen werden (z.B. e_eventObject).
In der Funktion kann dann mit e_eventObject.target z.B. auf den Response zugegriffen werden.
v_response = e_eventObject.target.responseXML;
Vom XMLHttpRequest werden verschiedene Events gesendet.
load Dieser Event wird gesendet, wenn die Anfrage abgeschlossen ist.
loadend Dieser Event wird gesendet, wenn die Anfrage mit oder ohne Erfolg abgeschlossen ist.
abort Dieser Event wird gesendet, wenn die Anfrage abgebrochen wird.
error Dieser Event wird gesendet, wenn während der Anfrage ein Fehler auftritt.
timeout Dieser Event wird gesendet, wenn ein timaout fesetzt ist und dieser erreicht wird.
progress Dieser Event wird turnusmäßig gesendet und kann zur Anzeige eines Fortschrittsbalkens verwendet werden. Dazu sind aber weitere Schritte und Berrechnungen nötig, die ich hier nicht weiter ausführe.
Alle Events, außer progress, sind im Beispiel unten gesetzt. Es ist aber nicht leicht den Event zu simulieren.
Müssen Variablen an die AJAX-Funktion übergeben werden, muss beim Eventlistener mit einer Pseudofunktion gearbeitet werden. Da nun die Standardübergabe des Objekts (mit z.B. e_eventObject) nicht funktioniert, muss der Request (e_request) expliziet an die Funktion übergeben und dort in Empfang genommen werden.
Aufruf:
e_request.addEventListener("load", function() {dataShowXML(e_request,v_modus);}, false);
Verarbeitung in dataShowXML:
e_response = e_request.responseXML; // Das Ergebnis aus dem Request lesen
Mit AJAX können Text- oder XML-Dateien eingelesen werden. Die meistgenutzte Form wird aber die Verarbeitung einer Datenbankabfrage sein. Am sinnvollsten ist die Nutzung von XML.
Bei XML-Daten kann mit getElementsByTagName komfortabel auf die Daten zugegriffen werden.
In diesem Beispiel werden die drei Möglichkeiten gezeigt.
Text liest die Textdatei ajax.txt ein und zeigt sie an. Der Text wird nach HTML konvertiert. Dadurch werden alle mehrfach Leerzeichen und Zeilenschaltungen ignoriert.
Will man die Textdatei im Originalzustand anzeigen, muss man den Tag <pre> verwenden.
XML liest die XML-Datei ajax.xml ein und zeigt die Einträge in jeweils einer Zeile an.
DB liest über PHP die Einträge beginnend mit der Eingabe hinter DB aus der Datenbank und zeigt sie in jeweils einer Zeile an.
Weitere Informationen zum Thema AJAX-Request und PHP-Daten
Daten aus dem AJAX-Request
Die Daten werden unter Daten aus dem AJAX-Request in einem div mit id dateiAnzeigen angezeigt.
Damit immer nur die aktuell gewählten Daten angezeigt werden, muss das div, vor der Anzeige von Daten, geleert werden. Dies geschieht mit der Funktion elementLeer.
Mit dem Button Datei lesen wird die Funktion dataRead aufgerufen. In dieser Funktion wird geprüft welcher Radio-Button aktiviert ist. Danach wird der AJAX-Request abgesetzt.
Es wird die Funktion dataShowText aufgerufen
Die Funktion löscht alle im div enthaltenen Elemente. Danach wird der Text aus der Datei im div angefügt.
Bei beiden Möglichkeiten wird die Funktion dataShowXML aufgerufen. Der Inhalt der Datei und die Ausgabe aus der DB sind identisch:
Die Funktion löscht alle im div enthaltenen Elemente. Danach werden alle XML-Einträge gelesen und im div angefügt.
Zur Dateiauswahl muss der input type file sein.
Im Gegensatz zur PHP-Lösung handelt es sich hier um einen normalen Button, dem in javaScript ein Eventlistener für klick zugewiesen wird.
Der Button ruft die Funktion dataUpload auf. In dieser Funktion wird der AJAX-Request vorbereitet.
Für einen Upload muss einem bestehenden Request das upload hinzugefügt werden:
In der Funktion in der Zeile mit var ve_xmlupload = ve_request.upload; // Upload-Request erzeugen
Für den Fortschrittsbalken ist der Eventlistener für das Event progress zuständig. Dieser wird turnusmäßig aufgerufen. Bei jedem Aufruf wird mit loaded die bereits geladenen Bytes geliefert. total liefert die Gesamtzahl der Bytes. Daraus wird der Prozentsatz ermittelt und dem Progresselement zugewiesen.
Achtung! Das Progressevent wird nur bei asyncronen Requests ausgeführt.
Die hier verwendete PHP-Datei hat keine Einschränkung bei Typ oder Größe der Datei. Das birgt natürlich ein Sicherheitsrisiko.
Im PHP-Script stehen die folgende Variablen zur Verfügung:
$_FILES['datei']['name']
Name der Datei, die ausgewählt wurde.
$_FILES['datei']['tmp_name']
Name der Datei im temporären Verzeichnis auf dem Server.
$_FILES['datei']['size']
Größe der Datei in Bytes.
$_FILES['datei']['type']
MIME-Type der Datei.
Die Datei wird temporär auf den Server geladen und muss im PHP-Script verschoben werden. Dies geschieht mit move_uploaded_file. Das Zielverzeichnis muss die Berechtigung zum Schreiben für alle Benutzer haben (777);
Anmerkung! Wird hier eine ZIP-Datei hochgeladen, wird diese im PHP-Script entpackt.
In diesem Beispiel wird das Hochladen verhindert, indem der move_uploaded_file nicht ausgeführt wird.
Formtag anzeigen dataUpload() startUpload() statusUpload() endUpload() phpDateiUpload.php
Bei der Eingabe werden die entsprechenden Treffer über AJAX in der DB gesucht in in einer Auswahlbox oder Auswahlliste angezeigt.