Sonntag, 12. Juni 2011

Kleinigkeiten: Ajax

Es mutet heutzutage fast unheimlich an: Ajax funktioniert auch ohne JQuery oder andere Bibliotheken. Und gerade für sehr einfache Anwendungen möchte man nicht immer ein entsprechendes Paket einbinden.

Das notwendige JavaScript ist einfach und hunterfach im Internet dokumentiert, deshalb hier nur als kurze Gedächtnisstütze - eben in der Rubrik "Kleinigkeiten". Einzig ein manchmal fehlender Hinweis beim Versenden via POST läßt etwas Spannung aufkommen wenn Ajax dadurch partout nicht funktionieren will.

Als erstes benötigen wir ein Objekt der dafür zuständigen Klasse "XMLHttpRequest" und eine Funktion die Inhalte via GET oder POST an eine empfangende Webseite auf dem Server senden kann.
Bei POST werden alle Wertpaare der Methode "send" übergeben. Wichtig ist die Einstellung über die Methode "setRequestHeader" ohne die Ajax über POST nicht funktioniert.
Die Methode "open" enhält neben dem Paramter "POST" die aufzurufende Webseite auf dem Server und den Wert "true" für einen sinnigerweise asynchronen Aufruf. Bei der Angabe von "false" würde die Seite auf eine Rückmeldung aktionslos warten.
<script type="text/javascript">
var MeinAjax = new XMLHttpRequest();

function sendeAjax() {
  MeinAjax.open('POST', 'ajax.php', true);
  MeinAjax.onreadystatechange = empfangeAjax;
  MeinAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  MeinAjax.send('MeinWert=irgendetwas&Heute=Sonntag');
}
</script>   
Versenden wir Daten via GET, werden die Wertpaare in den Aufruf der empfangenden Seite übergeben. Die Methode "send" wird nur mit "null" aufgerufen. Wirklich schön ist das nicht.

function sendeAjax(){
  MeinAjax.open('GET', 'ajax.php?MeinWert=etwasanderes', true);
  MeinAjax.onreadystatechange = empfangeAjax;
  MeinAjax.send(null);
}
Der Aufruf des JavaScripts erfolgt direkt über die benannte Methode.

<div id="Inhalt" onClick="javascript: sendeAjax()">Klick!</div>    
Eine einfache Seite die alle übergebenen Werte liest und wieder ausgibt sieht mit PHP beispielsweise so aus:

<?php
print_r($_REQUEST);
echo '<br>'.date('Hms');
?>
Bleibt nur noch auf die Rückmeldung der angesprochenen Seite zu reagieren. Die Grundlage haben wir bereits mit "MeinAjax.onreadystatechange = empfangeAjax;" gemacht. Konkret sieht die Funktion wie folgt aus und reagiert auf jede Statusänderung. Uns interessiert konkret aber nur ein Abschluß "4" mit dem Status "200": Die Seite hat ihre Rückmeldung vollständig beendet und war tatsächlich erreichbar.
function empfangeAjax()
{
  if(MeinAjax.readyState==4 && MeinAjax.status==200 ){
    document.getElementById('Inhalt').innerHTML = MeinAjax.responseText; 
  }
}
Das war es auch schon. Niemals vergessen, dass zu jeder Art von Kommunikation eine gute Portion Paranoia gehört - alle Eingaben, auch via Ajax können böse sein und müssen überprüft werden.

Keine Kommentare:

Kommentar veröffentlichen