Ajax - Asynchronous JavaScript + XML

Ajax, eine neues Schlagwort, das JavaScript wieder salonfähig gemacht hat und neue Formen der Nutzerführung für einige Webanwendungen erlauben soll. Ajax steht für Asynchronous JavaScript + XML, es bezeichnet also die Kombination von JavaScript und XML.

Nachfolgend ein Beispiel, dass Sie auch downloaden können, ein Glossar mit Ajax:
Geben Sie eines der folgenden Wörter ein und achten Sie auf die Ausgabe während Sie schreiben. JavaScript muss natürlich im Browser aktiviert sein!
(JavaScript, Java, Ajax, PHP) Link zum Download

Anwendungsbeispiel

Das Beispiel besteht aus einem Textfeld. Wenn der Benutzer dort einen Buchstaben eintippt, werden im serverseitigem Skript alle passenden Begriffe aus einem Glossar geholt und dank Ajax ohne Neuladen der Seite angezeigt.

In diesem Beispiel sind die Schlagwörter des Glossars der Einfachheit halber in einem Array versammelt. In der Praxis könnten diese auch aus einer Datenbank oder einer Datei stammen. Der gesuchte Begriff wird von der Ajax-Anwendung als URL-Parameter übergeben. Aus diesem Grund liest ihn das serverseitige Skript mit $_GET['q'] aus.

Anschließend sucht es die Schlagwörter des Glossars, die mit dem Suchbegriff übereinstimmen, und speichert diese in einem Array. Dieses Array wird mit implode() in einen String umgewandelt und ausgegeben. Diese Ausgabe ist es, was die Ajax-Anwendung als Antwort erhält.

Um eine Ajax-Verbindung zu erhalten, erstellen wir zuerst eine Variable für das XMLHttpRequest-Objekt:
var xmlHttp = null;
Anschließend müssen wir uns um die unterschiedlichen Browser kümmern. Mit einer Fallunterscheidung und den entsprechenden Browserobjekten werden wir dem gerecht.

clientseitige Datei für das Ajax-Glossar (ajax.html):

Das Ereignis onkeyup im Textfeld ruft jedes Mal, wenn wir einen neuen Buchstaben eingeben, die Funktion glossar() auf und übergibt den Wert des Textfelds. Die Funktion glossar() ist also das Herzstück. Hier wird als erstes das XMLHttpRequest-Objekt initialsiert. Danach folgt die Ajax-Anfrage.

Die URL, die angefragt wird, ist das serverseitige Skript. Zusätzlich wird als URL-Parameter der Wert (Suchbegriff) des Textfeldes übergeben. Mit escape() wird dieser in ein URL-kombatibles Format umgewandelt. Um die Verarbeitung der Rückgabe kümmert sich die Funktion daten() als Event-Händler.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AjAx Beispiel</title>
<script type="text/javascript"><!--
        var xmlHttp = null;
        function glossar(wert) {
          if (window.ActiveXObject) {
            try {
              xmlHttp= new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
              try {
                xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
              } catch (e) {
              }
            }
          } else if (window.XMLHttpRequest) {
            try {
              xmlHttp= new XMLHttpRequest();
            } catch (e) {
            }
          }

          if (xmlHttp) {
            xmlHttp.open('GET', 'ajax_server.php?q=' + escape(wert), true);
            xmlHttp.onreadystatechange = daten;
            xmlHttp.send(null);
          }
        }

        var text = '';
        function daten() {
          if (xmlHttp.readyState == 4) {
            text = 'Gefundene Begriffe: <br \/>' + xmlHttp.responseText;
            document.getElementById('output').innerHTML = text;
          }
        }
//--></script>
</head>
<body onload="javascript:glossar()">

<h1>Glossar mit AJAX</h1>

<p>Nachfolgend ein Beispiel, dass Sie auch downloaden können, ein <strong>Glossar mit Ajax</strong>:<br />
Geben Sie eines der folgenden Wörter - JavaScript, Java, Ajax, PHP - ein und achten Sie auf die Ausgabe während Sie schreiben. 
JavaScript muss natürlich im Browser aktiviert sein!</p>
     
       <form action="">
        <input type="text" id="suchfeld" name="suchfeld" onkeyup="glossar(this.value)" />
        <div id="output" style="margin-top:20px;"></div>
       </form>
</body>
</html>

Serverseitige Datei für das Ajax-Glossar (ajax_server.php):

<?php
 $schlagwoerter 
= array('Ajax' => 'eine Technologie f&uuml;r asynchrone Aufrufe',
                        
'JavaScript' => 'eine clientseitige Skriptsprache',
                        
'Java' => 'eine Programmiersprache, die nichts mit JavaScript zu tun hat',
                        
'PHP' => 'eine serverseitige Programmiersprache');
 
$ergebnisse    = array();
 
$suchbegriff   = isset($_GET['q']) ? $_GET['q'] : '';
 
 foreach (
$schlagwoerter as $schlagwort => $wert) {
   
$teilstring substr($schlagwort0strlen($suchbegriff));
   if (
$teilstring == $suchbegriff && $teilstring!="") {
     
$ergebnisse[] = "<b>$schlagwort</b>: $wert";
   }
 }
 
sort($ergebnisse);
 echo 
implode($ergebnisse'<br />');
 exit();
?>

W3C Validator | W3C CSS-Validator