AJAX-POST mit Form-Daten
Kürzlich stand ich vor dem Problem, eine laenger dauernde Aktion auf dem Webserver auszuführen. Die Aktion dauert bis zu einer Minute, den User so lange auf das Resultat warten zu lassen war also keine Option.
Die Lösung war ein Script auf dem Server das im Hintergrund mit AJAX aufgerufen wird. Das ist an sich einfach zu realisieren.
Damit das Script kein Unheil anrichtet wenn es mal per GET aufgerufen wird, checkt es ob es per POST aufgerufen wird. Wenn das nicht der Fall ist, dann tut es einfach nichts. Zudem benötigt es einige Parameter um zu bestimmen was es genau tun soll.
Beispiele für POSTs mit AJAX findet man zu tausenden im Web, aber wie die Daten übergeben sollen steht meist nicht dabei. Wenn man etwas länger sucht, findet man auch Beispiele für die Datenübergabe, aber ein komplettes Beispiel das beides kombiniert habe ich gar nicht gefunden.
Als das Projekt sauber funktionierte, habe ich den Code aufs Wesentliche konzentriert und poste es hier als Referenz für später.
HTML-Seite mit dem Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Post with AJAX</title>
<script>
function statechange()
{
if( this.readyState == 4 )
{
// Das echte Programm macht natürlich kein alert
if( this.status == 200 )
alert( "Success" ) ;
else
alert( "Failure" ) ;
}
}
function startscript( name, key )
{
var xmlhttp = new XMLHttpRequest() ;
xmlhttp.onreadystatechange = statechange ;
xmlhttp.open( "POST", "script.php" ) ;
xmlhttp.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ) ;
xmlhttp.send( "name=" + encodeURIComponent(name) + "&key=" + encodeURIComponent(key) ) ;
}
</script>
</head>
<body>
<h1>Using AJAX to post data to a PHP Script</h1>
<input type="button" onclick="startscript('Susi','streng geheim')" value="Post">
</body>
</html>
Spezialitäten beim POSTen
- Essenziell ist die Angabe von "POST" bei der open-Methode
- Der Content-Type Header ist nötig damit das Script die Daten erkennt
- Die Parameter werden mit Namen versehen, gefolgt von einem Gleichheitszeichen
- Die Daten müssen URL-Encoded werden (die Namen eigentlich auch, aber hier habe ich darauf geachtet dass keine Sonderzeichen darin vorkommen)
- Das Trennzeichen für die Parameter ist das &
Fazit
Eigentlich nicht kompliziert, wenn man ein gutes Beispiel hat.