AJAX-Anleitung (AJAX-Suchfunktion) [IE|M|O|G]

von: Werner Zenk

AJAX oder „Asynchronous Javascript and XML” ist keine Server-Plattform,
(auch kein Putzmittel ;) sondern vielmehr eine Ansammlung von Technologien für
anspruchsvolles Web 2.0 auf HTML-Oberflächen.

Ajax stellt eine Kombination aus bereits länger existierenden Technologien dar.
JavaScript wird benutzt um im Browser des Client eine Anfrage zum Server zu
stellen. Wenn diese Anfrage vom Server bearbeitet wurde (z.B.: über PHP, ASP,
CGI oder Perl), wird eine Funktion beim Client ausgeführt. Die Nachrichten die der
Server verschickt, sind hierbei oft in XML codiert.
Die Codierung in XML ist jedoch nicht zwingend erforderlich, es kann auch eine
Codierung als simpler Text erfolgen.

• Das folgende Demo zeigt eine mögliche Ajax-Anwendung.
Bei Eingabe einer Stadt oder Bundeslandes wird die Suchanfrage über ein JavaScript an eine PHP-Datei gesendet.
Wurde eine Übereinstimmung gefunden, sendet die PHP-Datei die gefundenen Daten zurück an das JavaScript, das dann wiederum die Daten anzeigt.

• XMLHttpRequest Objekt
Damit Ajax auf allen Browsern funktioniert, wird ein einheitliches XMLHttpRequest Objekt benötigt:

<script type="text/javascript">
var XMLHTTP = null;
if (window.XMLHttpRequest) {
  XMLHTTP = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  try {
    XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (ex) {
    try {
      XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (ex) {
    }
  }
}

• Daten senden
Diese JavaScript-Funktion sendet die Suchanfrage an die PHP-Datei „city.php”

function suche() {
 if (document.getElementById("sucheingabe").value.length >= 3) {
  var suchtext = document.getElementById("sucheingabe").value;
  XMLHTTP.open("GET", "city.php?s=" + suchtext, true);
  XMLHTTP.onreadystatechange = DatenAusgeben;
  XMLHTTP.send(null);
 }
}

• Daten emfangen
Diese JavaScript-Funktion empfängt die Daten von der PHP-Datei „city.php” ...

function DatenAusgeben() {
 if (XMLHTTP.readyState == 4) {
  document.getElementById("ausgabe").innerHTML = XMLHTTP.responseText;
 }
}
</script>

... und zeigt diese innerhalb des DIV-Tags an.

<form action="javascript:suche();">
<strong>Stadt oder Bundesland:</strong> <input type="text"
 id="sucheingabe" onKeyUp="suche();">
</form>

<div id="ausgabe"></div>

• Die Suchfunktion

PHP | 697 Bytes | 23 Zeilen | 31.10.2010

Quelltext: „city.php”

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <?php // Header senden (für deutsche Umlaute) header('Content-Type: text/html; charset=iso-8859-1'); error_reporting(0); // Suchanfrage über $_GET gesendet? if (isset($_GET["s"])) { // Daten einer externen Datei einlesen $daten = file("datenbank.txt"); // Schleife über alle Daten foreach ($daten as $element) { // Nach dem Suchbegriff suchen if (strstr(strtolower($element), strtolower($_GET["s"]))) { // Gefundene Daten ausgeben list($bezeichnung, $bundesland, $kfz) = explode("|", $element); echo "Bezeichnung: " . $bezeichnung . " - Bundesland: " . $bundesland . " - KFZ-Kennzeichen: " . $kfz . " "; } } } ?>

• Die Datenbank (Text-Datei „datenbank.txt”)
Hier ist das eigendliche Herzstück — die Datenbank.
Die Daten sind Zeilenweise getrennt, innerhalb einer Zeile sind diese nochmals
durch zwei Mittelstriche (|) voneinander getrennt.

Augsburg|Bayern|A
Aalen Ostalbkreis|Baden Württemberg|AA
Aschaffenburg|Bayern|AB
Altenburger Land|Thüringen|ABG
Aachen|Nordrhein Westfalen|AC
Auerbach|Sachsen|AE
Aichach-Friedberg|Bayern|AIC
Altenkirchen|Rheinland Pfalz|AK
Amberg|Bayern|AM
Ansbach|Bayern|AN
Annaberg|Sachsen|ANA
Angermünde|Brandenburg|ANG
Anklam|Meckl ....

... Text-Datei zum herunterladen: datenbank.zip

Tipp: Ein weiteres Beispiel finden Sie unter

AJAX ganz einfach!
oder

RSS Leser - Liest RSS Feeds von anderen Webseiten.

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Kommentare: 3 » aufmachen Mike: Danke für die tolle Erklärung. Ideal wäre die Anbindung an eine MySQL-Datenbank, aber zur Demo ist dieses Script perfekt Steffen.: Also, ich würde mich freuen, wenn man ein Script programmieren könnte (eventuell auch über einen Generator), der ein sicheres Suchergebnis leistet, welches sich hauptsächlich auf das jeweilige Internetangebot konzentriert. So zum Beispiel die Suchfunktion bei bibelserver.de > würde mich interessieren. Denn, wenn man ein Wort eingibt, so wird das nicht nur markiert, sondern, es erscheint auch an anderen Textstellen mit Markierung, wie man danach gesucht hat. Ist das möglich? Vielen herzlichen Dank. Werner: Siehe » Kleine Suchmaschine oder wie Mike schon geschrieben hat, suchen in einer MySQL-Datenbank (» Erster Eintrag in eine MySQL-Datenbank [mit einer Suchfunktion]). Um ein Wort innerhalb einer Textstelle zu markieren, kann folgendes JavaScript hilfreich sein » Text suchen und markieren mit JavaScript Semi: Hallo, vielen Dank für Ihre konstruktiven Informationen. Können Sie vielleicht noch ergänzen, wie es möglich ist, die Suchfunktion auf 100prozentige Treffer zu begrenzen. Also zum Beispiel bei der Stadtsuche nur Ausgabe "Augsburg", wenn dieses auch so abgefragt wurde. Das wäre klasse. Werner: In der Datei: "city.php" folgendes ändern: if (strstr(strtolower($element), strtolower($_GET["s"]))) { in: if (strtolower($element) == strtolower($_GET["s"])) {
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!