Asynchronous JavaScript and XML --- Ajax
- asynchrone Datenübertragung zwischen Browser und Webserver während die Webseite angezeigt wird
- Veränderung der Darstellung der Webseite durch Manipulation von DOM-Elementen ohne neu laden
- Zurück -Button
- Polling durch Browser
Grundlagen
das ObjektXMLHttpRequest - Methoden:
-
abort()--- Anfrage beenden, noch ankommende Daten werden nicht ausgewertet -
getAllResponseHeaders()--- alle vom Server gesendeten Headerfelder als String -
getResponseHeader(name)--- liefert das mitnamebezeichnetet Headerfeld -
open(method, url, [asyncflag], [user], [password])--- Parameter für Verbindungsdaten -
send(content)--- Übermitteln der Anfrage,contententhält die zu übermittelnden Daten (nur beiPOST-Methode) -
setRequestHeader(name, value)--- Definition individueller Headerfelder -
setMimeType(mimetype)--- setzt den Mimetype für für die angeforderten Daten
-
- Eigenschaften:
-
onreadystatechange--- Eventhandler, welcher bei jedem Statuswechsel der Anfrage aufgerufen wird -
readyState--- enthält den aktuellen Verbindungsstatus -
responseText--- enthält die vom Server gesendetet Antwort als Text -
responseXML--- ... als XML-Baum -
status--- http-Status als Fehlercode bzw.statusTextals String
-
ein einfaches Beispiel
load(url, parameter, callback)
Lädt Daten von einem URL und ersetzt den Inhalt des ausgewählten Elementsets. Parameter werden mit der POST -Methode übermittelt, wenn die Daten als Objekt (z.B. JSON) vorliegen. Andernfalls wird die GET -Methode verwendet. Der
callback -Funktion werden Response, Status und XHR-Instance übergeben.Beispiel: Ein
PHP -Script liefert eine Ausgabe (HTML -Code) und ersetzt damit den Inhalt des Elements (mit der ID output).
$("#output").load('ajaxtest.php', function(data, status, xhr) {
$("#output").append("<br/><i>Status: "+status+"</i>");
$("#output").append("<br/> "+xhr.getAllResponseHeaders());
});
In welcher Weise die vom Server zu übermittelnde Antwort erzeugt wird, spielt keine Rolle!
Beachte bei der Adressierung von Abfragen die Same Origin Policy!
Daten senden
serialize()
Generiert einen formatierten String (für die Datenübermittlung via GET) aus allen zur Elementeauswahl gehörenden
Formularelementen. Deaktivierte, leere bzw. nicht ausgewählte Formularelemente werden nicht beachtet.Beispiel: Erzeuge einen formatierten String aus allen
input und select -Elementen und stelle diesen im Element mit der ID output dar.
$("#output").html($("input,select").serialize());
serializeArray()
Generiert ein JavaScript-Array aus allen zur Elementeauswahl gehörenden Formularelementen.
Das Ergebnis kann als JSON-String weiterverarbeitet werden.
$.get(url, parameter, callback)
Initiiert einen GET -Request.
Zu übermittelnde Parameter können im URL oder im parameter -Feld übergeben.
Die callback -Funktion enthält die Response und den Status.
/* $.get("ajaxtest.php?"+$("input,select").serialize(), ... */
$.get("ajaxtest.php", $("input,select").serialize(), function(data) {
$("#output").html(data);
});
$.post(url, parameter, callback)
Initiiert einen POST -Request.
Zu übermittelnde Parameter werden im parameter -Feld übergeben.
Die callback -Funktion enthält die Response und den Status.
$.post("ajaxtest.php", $("input,select").serializeArray(), function(data) {
$("#output").html(data);
});
Datenformate für die Kommunikation
Die Antworten können in verschiedenen Formaten übermittelt werden. Die Auswahl eines geeigneten Formates ergibt sich aus den Anforderungen.- Text --- unstrukturierter Text oder Text mit HTML-Tags
- XML --- hierarchisch strukturierter Datensätze (http://de.wikipedia.org/wiki/Extensible_Markup_Language)
- JSON --- "leichtgewichtiges" Datenformat, ähnlich XML (http://www.json.org/)
JSONP (JSON mit padding) erzwingt die Bedingung der Same Origin Policy nicht!
Auswerten der übertragenen Daten
Text
Einfache Möglichkeit, Daten zu übermitteln. Strukturierung beispielsweise durch HTML-Tags. Direkte Darstellung von übermittelten HTML-Fragmenten. (z.B. Textausgaben oder<option>
-Tags für <select> -Elemente)
XML
Als Format für die Übermittelung hierarchisch strukturierter Daten. Die übermittelten Daten werden im Browser geparst und als DOM dargestellt. Der Zugriff auf die Elemente erfolgt über die JavaScript-MethodengetElementById(), getElementByName(), getElementsByTagName(),
getElementsByTagNameNS().
JSON
JavaScript Object Notation mit nahezugleicher Funktionalität wie XML, dafür weniger komplex. jQuery stellt Methoden für die Übermittelung und Auswertung der Daten bereit. Notationsbeispiel:
{ "uid":"20934",
"gid":"4000",
"user_name":"Otto Normalverbraucher",
"home":"/afs/tu-chemnitz.de/home/urz/o/otto",
"shell":"/bin/bash",
"mail_addr": { "alias1":"otto@hrz.tu-chemnitz.de",
"alias2":"otto.normal@hrz.tu-chemnitz.de" }
}
$.getJSON(url, parameters, callback)
Die Methode getJSON() wird beim Abfragen von JSON -Daten eingesetzt.
In der callback -Funktion stehen die übermittelten Daten als Objekt (Array)
zur Verfügung. Die Daten werden mit der GET -Methode übermittelt.Beispiel: Übermittle die Daten
user=otto an den URL json_data.php und
zeige die übermittelten Daten als Name:Value -Paare an.
$.getJSON('json_data.php', { user:'otto' }, function(data) {
$.each(data, function(n,v) {
$("#output").append(n+": "+v+"<br/>");
});
$("#output").append("Mail 1: "+data.mail_addr.alias1);
});
Steuerung von Ajax-Request
Die$.ajax -Methode stellte Optionen zur Steurung von Ajax-Requests bereit.
$.ajax({ url: 'request_url',
type: 'POST',
dataType: 'text',
timeout: 3500,
data: { Parameter, Request Data },
beforeSend: function() {
do_anything_before_send(); },
error: function() {
handle_errors(); },
success: function(data) {
handle_response_data(); }
});
$.ajaxSetup(options)
Festlegen von Standardeinstellungen für alle folgenden Ajax-Requests.
$.ajaxSetup({ type: 'POST',
dataType: 'xml',
timeout: 3500,
error: function(xhr) {
$("#debug").html("Fehler: "+xhr.statusText);
}
});
ajaxStart(callback)
ajaxSend(callback)
ajaxSuccess(callback)
ajaxError(callback)
ajaxComplete(callback)
ajaxStop(callback)
Registrieren von Funktionen für Ajax-Events. Siehe auch http://api.jquery.com/category/ajax/.
