Universitätsrechenzentrum
jQuery

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

typische Probleme:

  • Zurück -Button
  • Polling durch Browser

Grundlagen

das Objekt XMLHttpRequest
  • Methoden:
    • abort() --- Anfrage beenden, noch ankommende Daten werden nicht ausgewertet
    • getAllResponseHeaders() --- alle vom Server gesendeten Headerfelder als String
    • getResponseHeader(name) --- liefert das mit name bezeichnetet Headerfeld
    • open(method, url, [asyncflag], [user], [password]) --- Parameter für Verbindungsdaten
    • send(content) --- Übermitteln der Anfrage, content enthält die zu übermittelnden Daten (nur bei POST -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. statusText als 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.

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-Methoden getElementById(), 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/.

TUCaktuell