CSS, HTML und Javascript mit {stil}

Jacascript-Librarys :: Ajax mit jQuery

Ajax und AHAH mit jQuery

Der asynchrone XMLHttp-Request steuert die Zusammenarbeit zwischen einem Script auf dem Server und dem Front-End – dem Browser des Benutzers.

Der XMLHttp-Request ist nicht gerade ein intuitives Verfahren – obendrein funktionierte der XMLHttp-Request in IE7 und IE8 nicht wie in 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.

AHAH: HTML-Fragemente laden

Das Nachladen von Informationen – einfacher Text oder Bilder – entlastet die Übertragung vom Transfer unnötiger Daten und hält den HTML-Code übersichtlich.

AHAH (Asynchronous HTML and HTTP) lädt HTML-Fragmente – ähnlich wie Server Side Includes, aber erst bei einer Anforderung durch den Benutzer.

pharao
cairo

$.load() ist eine Vereinfachung von $.ajax() und lädt HTML-Fragmente in die Seite, ohne dass wir uns um die Optionen und Details von Ajax kümmern müssen.

<div class="slides">
   <div><a href="pharao.html"><img src="pharao.jpg"></a></div>
   <div><a href="cairo.html"><img src="cairo.jpg"></a></div>
   <div class="detail"></div>
</div>
$(document).ready(function (e) {
    $('.slides').find('a').on('click', function (e) {
        e.preventDefault(); // Folgen des Links verhindern

        switch ($(this).attr('href')) {
            case 'pharao.html' :
                $('.detail').load('pharao.html');
                break;
            case 'cairo.html' :
                $('.detail').load('cairo.html');
                break;
        }
    });
});

cairo.html und pharao.html sind die HTML-Fragmente, die als Dateien gespeichert sind. $('…').load lädt nicht nur HTML-Dateien. Es könnten auch Javascript-Dateien oder sogar PHP sein, das ausgeführt wird und HTML zurückgibt.

Daten aus XML-Datei einfügen

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

Viele Aufgaben brauchen eine Anwendung auf dem Server, die 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.

Formulare mit jQuery

Bei umfangreichen oder rechenintensiven Formularen oder serverseitigen Anwendungen kann es Sinn machen, mit den einzelnen Eingaben des Benutzers sofort per Javascript in das Formular einzusteigen.

Wenn Javascript die Eingabewerte an die serverseitige PHP-Anwendung mit jQuery post weiterleitet, besteht der Aufruf von post aus drei Teilen:

  • die URL der serverseitigen Anwendung (hier form.php),
  • die Eingabewerte des Formulars (hier 'bin' und 'dist'),
  • die Funktion, in der die Rückgabewerte der serverseitigen Anwendung verarbeitet werden (function(data){}).
<form action="form.php" method="post" id="form">
   <input type="text" name="bin" id="bin" value="" />
   <select id="dist">
      <option value="10">10</option>
      <option value="20">20</option>
      …
    </select>
    <input type="submit" value="Entfernung berechnen" />
</form>
script.js
         +---- jQuery post-Funktion
         |
         |      +---- PHP-Script für die Formularbearbeitung
         |      |
jQuery.post ( form.php , 
    { hier: jQuery('#bin').val(), dist: jQuery('#dist').val() } , 
       |              |
       |              +----> Wert des Eingabefeldes "bin"
       |            
       +----> $_POST['bin'];
       
        function(data) {
        … Verarbeiten der Rückgabe data
        }
});