Stil mit {stil}

Sep 2008

Jacascript-Librarys :: Ajax mit jQuery

Die Zusammenarbeit zwischen einem Script auf dem Server und dem Front-End – dem Browser des Benutzers – wird in Javascript mit dem asynchronen XMLHttp-Request gesteuert.

Der XMLHttp-Request ist nicht gerade ein intuitives Verfahren – obendrein funktioniert diese Technik in Internet Explorer nicht so wie bei standard-konformenen Browsern.

Die Ajax-Schnittstelle von jQuery bringt eine schnelle Entwicklung in Programmierstübchen. In der einfachsten jQuery-Variante ist keine Erfahrung mit der herkömmlichen Programmierung des XMLHttp-Requests erforderlich.

Die XML-Datei auf dem Server

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <data>
    Dies sind Daten aus einer XML-Datei …
  </data>
</root>

Das Javascript mit jQuery für Ajax

$(document).ready(function() {	
   $.get("data.xml", function(data) {
      var myData = data.getElementsByTagName('data')[0].firstChild.nodeValue;

      $("#insert").click(function() {
         $('#data').append(myData).show('slow');
      });
   });
});

Ajax mit jQuery: $.post

Für viele Aufgaben wird eine Anwendung auf dem Server benötigt, die z.B. Daten aus einer Datenbank ausliest oder – wie hier – einfach die Dateien eines Verzeichnisses anliefert.

Die Ajax-Funktion $.post bindet Daten, die das Skript von einem PHP-Programm holt, in ein HTML-Dokument ein.

Beispiel | In der einfachsten Form einer kleinen stets aktuellen Online-Gallerie holt das PHP-Programm die JPEG-/GIF-Dateien eines Verzeichnisses und übergibt sie als Komma-getrennte Liste dem Script in der HTML-Seite. Javascript nimmt die Adressen der Bilder in Empfang und baut daraus img-Elemente, die in ein div-Tag eingesetzt werden.

<?php 
$resp = '';
$fh = opendir("galerie"); //Verzeichnis 
$dirc = array(); 
while (true == ($file = readdir($fh))) {
   if ((substr(strtolower($file), -3)=="jpg") or (substr(strtolower($file), -3)=="gif")) {
      $dirc[] = $file; 
   }
} 

for($i=0; $i<count($dirc); $i++) { 
	$resp .= $dirc[$i] . ',';
} 
echo $resp;
?>

Das PHP-Skript wird als lib-backend.php auf dem Server gespeichert.

Der Code in $(function() { … } wird ausgeführt, sobald das HTML-Dokument geladen ist. So muss das Skript nicht warten, bis sämtliche Elemente des HTML-Dokuments geladen sind.

<script type="text/javascript">
$(function() {
   $.post("lib-backend.php", function(data){
      var text = "";
      var elems = data.split(',');
      for (var i=0; i<(elems.length-1); i++) {
         text += elems[i] + "\n";
         $("<img src='" + elems[i] + "' />").appendTo("div#gal");
       }		
   });
});
</script>

Im HTML-Dokument existiert ein div-Element mit id="gal", in das die Bilder vom Server mit der jQuery-Methode appendTo("div#gal") geladen werden.

Jesse Skinner hat eine kurze, aber prägnante Übersicht über Ajax in jQuery geschrieben.