Typische AJAX-Anwendungen ( 2014 ) sind Virtuelle Landkarten, interaktive Straßenkarten, Globen, interaktive Weltkarten, Soziale Software, soziale Netzwerke, Web-basierter Instant Messenger, Webchatsysteme, Webbasierte Büroanwendungen, E-Mail-Programm für Webbrowser, Web-Desktop, Textverarbeitung, Tabellenkalkulation, Bildbearbeitungswerkzeuge, Verwaltung von Fotos, Internetradio, usw.
AJAX
(Asynchronous JavaScript and XML) verwendet ECMAScript und
W3C
XMLHttpRequest (Level 2)
- Zugriffe auf Server-XML-Objekte.
Progress Events
((Editor's Draft 4 May 2012).
Mozilla
Monitoring Progress
(Beispiele).
Nachfolgende wird ein clientseitiges "submit" von Formulardaten
mit einem AJAX-XMLHttpRequest verglichen
(siehe z.B. w3schools
AJAX-Intro
).
Der ECMAScript-Code der XMLHttpRequest-Anfrage und die XMLHttpRequest-Anfrageziel-URL müssen aus derselben Quelle (Origin) stammen. SOP ( Same-Origin-Policy ) ist ein Sicherheitskonzept (siehe en.wikipedia Same-Origin-Policy ). Browser möchten SOP garantieren und können das AJAX-"Cross-Site Request Forgery" verhindern. Bei Same-Origin-Policy sind Zugriffe nur erlaubt wenn gilt: document.domain === anderes_window.document.domain. (siehe W3C CORS - Cross-Origin Resource Sharing, Mozilla HTTP access control ).
Die mit AJAX-erbetenen Server-Daten werden asynchron (mit Hilfe einer Callback-Funktion) zum Browser zurück gegeben. Infolge der XMLHttpRequest-Anfrage wird nicht gewartet bis eine Server-Antwort kommt, sondern ECMAScript-Code weiter ausgeführt. Wenn die Server-Antwort vorliegt, wird die Callback-Funktion (siehe de.wikipedia Rückruffunktion ) aufgerufen.
Die clientseitig erhaltenen Server-Daten können dann "augenfreundlich" z.B. in den DOM-Baum (XML, XHTML, HTML5) oder/und in ein Webformular eingefügt werden.
Ein serverseitig veranlaßtes AJAX, ohne daß der Client ein gewünschtes Request geschickt hat, kann zum "Pushen" von (umfangreichen) Server-Daten im Browser verwendet werden und wird Comet genannt.
Was wird nachfolgend behandelt? Vorrangig ist das Lernen. An Hand von kleinen Beispielen sollen Einsichten in die AJAX-Programmierung vermittelt werden.
Als Einstiegsbeispiel wird zunächst ohne Ajax ein einfaches Formular und die Wirkung von Echo-Response (PHP) betrachtet. In einem weiteren Beispiel wird Ajax verwendet und die String-Antwort (PHP) des Servers in das Dokument eingefügt. Die serverseitige Verarbeitung mit PHP ist denkbar einfach. Serverseitig wird PHP verwendet:
nimmt serverseitige die URL der *.htm -Seite (die AJAX-XMLHttpRequest enthält) entgegen, wird benutzt, um zu testen, ob die *.htm -Seite und die *.php-Seite aus dem gleichen Seververzeichnis stammen. Clientseitig liefert window.location.toString() die URL. Serverseitig geben PHP-Funktionen über den *.php-Dateinamen Auskunft.
Der clientseitig eingegebene 'NACHNAME' soll
aus dem serverseitigen PHP-Array die zugehörige Adresse holen.
Achtung! Die PHP-Syntax von assoziativen PHP-Array erlaubt
keine Umlaute in key-Bezeichner.
Anstelle von 'Müller' ist 'Mueller' erlaubt.
Das PHP-Script nimmt gesendete Daten in $_POST['URL_HTM_SEITE'] und $_POST['NACHNAME'] entgegen, verarbeitet diese, und sendet nach der PHP-Verarbeitung den String $response; mit Hilfe von echo $response; zurück. Hier ist der aktuelle PHP - Quelltext und hier die PHP-Seite als Pseudo-Code:
<?php
ini_set('display_errors',0); error_reporting(0);
//ini_set('display_errors',1); error_reporting(E_ALL | E_STRICT);
/*
DEMO
1. Teste: Kommen $url_php_seite und $url_htm_seite
aus dem gleichen Serververzeichnis?
*/
$url_htm_seite = htmlentities(rawurldecode($_POST["URL_HTM_SEITE"]),ENT_COMPAT,'UTF-8');
$http = (isset($_SERVER['HTTPS']) && ($_SERVER['HTTPS'] == 'on')) ? 'https://' : 'http://';
$url_php_seite = $http.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];
if(substr($url_htm_seite,0,-4) != substr($url_php_seite,0,-13)) { echo ''; exit;
// debug: exit('$url_php_seite='.$url_php_seite.'<br/>$url_htm_seite='.$url_htm_seite);
}
/*
2. Ermittle $response = $arr[$key]
*/
$arr = array(
'maier' => 'Hans Meier | Griesweg 4 | 4711 Hintertupfingen',
'weber' => 'Klaus Weber| Narzisse 1 | 12345 Schupfingen',
'kraus' => 'Karl Kraus | Tulpenweg 9 | 98765 Wohnland'
);
/*
3. Prüfe $key von Formular name='NACHNAME'
*/
$key = trim($_POST['NACHNAME']);
$key = htmlentities(rawurldecode($key),ENT_COMPAT,'UTF-8');
$key = strtolower($key);
if( isset($key) && isset($arr[$key])) {
$response = $arr[$key];
} else {
$response = 'Nachname unbekannt';
}
/*
4. Antwort zurück schicken
*/
echo $response;
?>
Nachfolgende wird ein HTML-Formular und ein clientseitiges "submit" von Formulardaten betrachte. Im nächsten Beispiel soll dann das entsprechende Vorgehen mit einem AJAX-XMLHttpRequest betrachtet werden.
Das Lehr-Beispiel besteht aus einem HTML-Formular, verwendet kein AJAX. Es soll lediglich die Wirkung des serverseitigen Echo-Response (PHP) verdeutlichen werden. Die Formulardaten werden mit "submit" zum PHP-Script geschickt, und die serverseitigen Antwort (PHP-Echo-Response) wird in einem neuen Browser ausgegeben.
Als Formular werde ohne submit-Button verwendet:
<form action="ajax-response.php"
method="post"
>
Test-Beispiele für Nachnamen sind maier/weber/kraus/mueller
Nachname: <input type="text" id="NACHNAME"
name="NACHNAME" value=" Kraus" />
</form>
Wegen id="NACHNAME" kann der eingegebene Nachnamen-String erhalten werden durch
var nachname = document.getElementById("NACHNAME").value;
Hier ist ein Schnelleinstieg zu clientseitigen
Formularzugriffen
.
Als Test wird nachfolgend das AJAX-XMLHttpRequest() mit einem a-Tag-Klick ausgelöst. Mit Hilfe von id="NACHNAME" wird der Nachnamen geholt und als name-value-Paar bei AJAX eingetragen und mit der "action-Zieladresse" von XMLHttpRequest() zum Server gesendet.
Die folgende Funktion ajax_request(obj) versucht, AJAX (post) "from Scratch" zu erklären und darüber hinaus auch nützlich zu sein. Das Parameter-Objekt obj braucht Attribute. Mindestens erforderlich sind action:'ajax-response.php' und die ausprogrammierte Callback-Funktion.
Eine einfache debug-Callback-Funktion ist callback: function (responseText) { alert(responseText); }.
Eine anderes Beipiel für die Callback-Funktion ist
callback: function (r) { document.getElementById('ANTWORT').innerHTML = r; },
Mit Hilfe von .innerHTML = r wird der response-String in das Tag mit id='ANTWORT' geschrieben.
Das ECMAScript-Objekt obj für den Funktionsaufruf ajax_request(obj) kann etwa wie folgt ausschauen:
var obj = {
action : 'ajax-response.php',
callback: function (r) {
var arr = r.split(/\s*\|\s*/);
document.getElementById('ANTWORT').innerHTML =
"Name : " + arr[0] +
"<br />Strasse: " + arr[1] +
"<br />Wohnort: " + arr[2];
},
URL_HTM_SEITE: window.location.toString(),
NACHNAME: document.getElementById('NACHNAME').value
};
Ein direkter Aufruf ajax_request(obj); führt dann
das gewünschte XMLHttpRequest() aus.
Auch ein a-Tag kann das gewünschte XMLHttpRequest() ausführen, wie z.B.
<a href="javascript:obj.NACHNAME=document.getElementById('NACHNAME').value;ajax_request(obj);">
Teste
</a>
Hier kommt der Quelltext der Funktion ajax_request(o), der ein Objekt o (angelegt mit var o = {}; ) übergeben wird. Mindestens notwendig sind o.action='my.php'; und o.callback=function (response) { ... }; und falls benötigt name-value-Paare, wie z.B. o.URL_HTM_SEITE='url'; o.NACHNAME='Mueller';, usw.