JavaScript Ajax Beispiel 3: POST-Request

Neben der Möglichkeit, Parameterdaten per GET-Methode an einen Webservice zu senden, gibt es auch eine POST-Variante. Die Parmeterdaten, die an den Webservice geschickt werden, werden bei einem POST-Request nicht über die URL verschickt, sondern über das Request-Objekt des Aufrufs. Das auf dieser Seite folgende Ajax-Beispiel soll diese Vorgehensweise kurz demonstrieren.

Ein Teil der unten stehenden Funktionen entspricht dabei denen des letzten Beispiels. Die Ausgabe der abgerufenen Nutzdaten erfolgt auch hier wieder über einen Dialog des Window-Objekts, genauer gesagt mit Hilfe der JavaScript-Methode Alert().

Im Gegensatz zum GET-Beispiel werden hier aber nicht die Zeichenketten der URL und der Parameter miteinander verknüpft und in der URL an den Server übertragen, sondern separat über das Request-Objekt versendet. Dazu sind zwei Schritte nötig: Zum Einen wird in der Funktion sendPostRequest der Content-Type entsprechend eingestellt, und im darauf folgenden Schritt werden die Parameterdaten an die XMLHttpRequest-Methode send übergeben und durch diese im Request-Objekt an den Webserver verschickt.

Zum Abbruch eines evtl. noch laufenden Ajax-Request wird, im Falle eines vorzeitigen Schließens des Browserfensters, auch hier wieder das Schwester-Event des onLoad-Event genutzt, um die laufende Anfrage zu beenden.

<a href="javascript:sendPostRequest ('name=Wilhelm&alter=52')" title="">POST Request senden</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion erzeugt, in Abhängigkeit des benutzten Browsers, ein
// XMLHttpRequest-Objekt.
function getRequestObject () {
  // Wenn es sich bei dem vom Benutzer verwendeten Browser
  // um einen Internet Explorer handelt, wird das Request-Objekt
  // per ActiveX geholt.
  if (navigator.appName == "Microsoft Internet Explorer")
    return new ActiveXObject ("Microsoft.XMLHTTP");
  else
    // Bei anderen Browsern liegt das Request-Objekt direkt
    // unterhalb des Window-Objekts.
    return new XMLHttpRequest ();
}

// POST-Request an einen Webservice senden.
function sendPostRequest (parameter) {
  // POST-Verbindung zum Webservice öffnen
  // Erster Parameter der Methode ist auch hier wieder die Übertragungsmethode.
  // Als zweiten Parameter erwartet die Methode die URL zum Webservice.
  // Der dritte Parameter schaltet die asynchrone Übertragung ein.
  httpRequestObject.open ('POST', 'httprequesttest.php', true);
  // Event-Handler zur Reaktion auf Statusänderungen während des
  // Requests einsetzen.
  httpRequestObject.onreadystatechange = handleResponse;
  // Content-Type für Parameterübertragung per POST setzen
  httpRequestObject.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded');
  // POST Request abschicken
  // Die Parameter werden der Send-Methode des Request-Objekts zur
  // Übertragung übergeben.
  httpRequestObject.send (parameter);
}

// Aufgabe der Funktion handleResponse, dem für Statusänderungen zuständigen Event-Handler,
// ist es die vom Webservice gelieferten Daten auszugeben.
function handleResponse () {
  // Wurde der Request inzwischen erfolgreich (readyState 4) abgeschlossen und
  // hat der Server mit OK (Status 200) geantwortet?
  if (httpRequestObject.readyState == 4 && httpRequestObject.status == 200) {
    // Vor Server gelieferte Daten in Variable speichern...
    var response = httpRequestObject.responseText;
    // und dann in einem Alert-Fenster ausgeben.
    alert (response);
  }
}

// HttpRequestObject per oben definierter Funktion erzeugen und
// in der Variablen speichern, damit künftig auf das Objekt zugegriffen
// werden kann.
var httpRequestObject = getRequestObject ();

// Wenn das Dokument geschlossen wird, müssen noch nicht beendete
// Requests abgebrochen werden.
window.onunload = httpRequestObject.abort ();
// -->
</script>

POST Request senden

Letzte Posts aus unserem Forum

Script Schrift vergrößern

Hallo wollte gerade das Script für die Schriftvergrößerung testen, aber irgendwie bekomme ich das nicht hin. Habe eine Joomla Website und dort die ... » mehr

von Gast am Donnerstag, 22. April 2010 13:32 in JavaScript - bisher 1 Antwort
Letzter Beitrag: Donnerstag, 22. April 2010 18:05 von alm

Hallo, damit kann man nicht allzu viel anfangen. Soviel ich weiss kann es zuweilen Probleme mit Tabellen-Layouts geben. Dort werden die ... » mehr

Javascript Schriftengröße: Problem bei URL-Übergabe im IE8

Hallo, ich hab eben das Javascript zur Schriftengröße eingebaut, klappt auch wunderbar auf Firefox, aber der IE 8 hat folgendes Problem: - wenn ich ... » mehr

von horst1234 am Dienstag, 23. Februar 2010 13:06 in JavaScript - bisher 1 Antwort
Letzter Beitrag: Dienstag, 23. Februar 2010 14:07 von horst1234

Ich hab das charset im Header geändert (wie in der beispiel.html), und schon klappt es ... » mehr

Dynamisches einfügen von Zeilen in eine Spalte

Hallo, ich möchte gerne eine Zeile zwischen zwei andere Zeilen einfügen. Leider klappt folgender Versuch noch nicht so richtig. Vielleicht kann mir ... » mehr

von Bluecaspar am Mittwoch, 10. Februar 2010 18:09 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Donnerstag, 11. Februar 2010 10:37 von Bluecaspar

Ja genau, das war der Fehler. Vielen Dank Alex. Hier der korrigierte Code: <html> <head> <title> Test ... » mehr

Fenster in Frame erzeugen

Hallo, ich würde gerne ein Fenster in einer Webseite erzeugen. Das Fenster sollte dabei auf ein Frame begrenzt sein, sich also nicht aus diesen ... » mehr

von Bluecaspar am Dienstag, 9. Februar 2010 13:57 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Mittwoch, 10. Februar 2010 09:32 von Bluecaspar

Ja hervorragend, dass ist genau das was ich möchte. Danke ... » mehr

Problem: Kombination mit Lightbox 2

Hallo, ich bin gerade dabei die Galerie mit der Lightbox 2 zu verknüpfen, da ich die Bilder im Vollformat gerne in diesem schicken aufpoppenden ... » mehr

von GoPeter am Montag, 16. November 2009 23:38 in JavaScript - bisher 16 Antworten
Letzter Beitrag: Mittwoch, 18. November 2009 00:32 von GoPeter

Soo...hat lange gedauert...aber jetzt ist es endlich ... » mehr



¬ Insolvenzrecht