Suggest mit PHP und MySQL - AJAX (Asynchronous JavaScripting and XML) Forum

The_Fritz · 22.05.2007, 12:18

Hallo,

die Umsetzung von Suggest ist sehr einfach. Ich will mal versuchen, ob ich es schaffe, eine leicht verständliche Beschreibung zu erstellen.

Was passiert: JavaScript liest den Inhalt eines Eingabefelds bei jedem Tastendruck, übergibt diese Zeichenkette einem XMLHttpRequest-Objekt. Das XMLHttpRequest-Objekt ruft mit der Zeichenkette als Parameter eine PHP-Funktion auf. Die PHP-Funktion fragt nach Einträgen in der Datenbank, in der diese Zeichenkette vorkommt und gibt sie an das XMLHttpRequest-Objekt zurück. JavaScript ändert den Inhalt des Ausgabefelds.

Um komfortabel mit dem XMLHttpRequest-Objekt umgehen zu können, verwende ich die Ajax-Klasse, die Denny Carl in seinem Buch Praxiswissen Ajax beschreibt. Bitte als ajax.js abspeichern!

Code:

function Ajax() {
  //Eigenschaften deklarieren und initialisieren
  this.url="";
  this.params="";
  this.method="GET";
  this.onSuccess=null;
  this.onError=function (msg) {
    alert(msg)
  }
}

Ajax.prototype.doRequest=function() {
  //Ueberpruefen der Angaben
  if (!this.url) {
    this.onError("Es wurde kein URL angegeben. Der Request wird abgebrochen.");
    return false;
  }

  if (!this.method) {
    this.method="GET";
  } else {
    this.method=this.method.toUpperCase();
  }

  //Zugriff auf Klasse für readyStateHandler ermoeglichen  
  var _this = this;
  
  //XMLHttpRequest-Objekt erstellen
  var xmlHttpRequest=getXMLHttpRequest();
  if (!xmlHttpRequest) {
    this.onError("Es konnte kein XMLHttpRequest-Objekt erstellt werden.");
    return false;
  }
  
  //Fallunterscheidung nach Uebertragungsmethode
  switch (this.method) {
    case "GET": xmlHttpRequest.open(this.method, this.url+"?"+this.params, true);
                xmlHttpRequest.onreadystatechange = readyStateHandler;
                xmlHttpRequest.send(null);
                break;
    case "POST": xmlHttpRequest.open(this.method, this.url, true);
                 xmlHttpRequest.onreadystatechange = readyStateHandler;
                 xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                 xmlHttpRequest.send(this.params);
                 break;
  }  

  //Private Methode zur Verarbeitung der erhaltenen Daten
  function readyStateHandler() {
    if (xmlHttpRequest.readyState < 4) {
      return false;
    }
    if (xmlHttpRequest.status == 200 || xmlHttpRequest.status==304) {
      if (_this.onSuccess) {
        _this.onSuccess(xmlHttpRequest.responseText, xmlHttpRequest.responseXML);
      }
    } else {
      if (_this.onError) {
        _this.onError("["+xmlHttpRequest.status+" "+xmlHttpRequest.statusText+"] Es trat ein Fehler bei der Datenbertragung auf.");
      }
    }
  }
}

//Gibt browserunabhaengig ein XMLHttpRequest-Objekt zurueck
function getXMLHttpRequest() 
{
  if (window.XMLHttpRequest) {
    //XMLHttpRequest fuer Firefox, Opera, Safari, ...
    return new XMLHttpRequest();
  } else 
  if (window.ActiveXObject) {
    try {   
      //XMLHTTP (neu) fuer Internet Explorer 
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {        
        //XMLHTTP (alt) fuer Internet Explorer
        return new ActiveXObject("Microsoft.XMLHTTP");  
      } catch (e) {
        return null;
      }
    }
  }
  return false;
}

Eine einfache HTML-Seite als "Schauplatz" könnte so aussehen:

HTML-Code:

<html>
<head>

<style type="text/css"><!-- 
 a:link{color:#000;}
 a:visited{color:#ff0;}
 a:hover{color: red;}
 a:active{color:#f00;}
--></style>
</head>


<title>Suggest </title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="suggest.js"></script>

</head>

<body>

<input type="text" size="20" id="eingabe" onkeyup="load()"> 

<div id="text">Bitte Suchbegriff eingeben!</div>

</body>
</html>

Das CSS im head-Bereich erzeugt einen Rollover-Effekt.

Der wichtigste Teil kommt jetzt: Die JavaScript-Datei suggest.js. Sie erzeugt eine Instanz der Klasse Ajax, gibt ihr Daten mit und platziert den Text, den sie von ihr zurück bekommt, im Bereich "text".

Code:

//Instanz der Klasse Ajax erzeugen und mit der Datenuebertragung starten
function load()
{

  var eingabe=document.getElementById("eingabe").value;
    
  with (new Ajax()){
  
    url="text.php";
    method="POST";
    params="eingabe="+eingabe;
    onSuccess=successHandler;
    onError=errorHandler;
    doRequest();
  }
  
  
//Den Text in die Seite einfuegen
function successHandler(txt,xml){
  document.getElementById("text").innerHTML=txt;
  
}

//Fehler
function errorHandler(msg){
  document.getElementById("text").innerHTML=msg;
}

}

Last, but not least, das PHP-Skript, das die Datenbank befragt und das Ergebnis als normalen Text ausgibt.
Bitte als text.php abspeichern.

Bitte auch darauf achten, dass das richtige Feld abgefragt wird und "Titel" ersetzen.

PHP-Code:


			
<?php

$eingabe=$_POST["eingabe"];

//Bitte die richtigen Zugangsdaten einfügen:
$conn = @mysql_connect("localhost", "root","") 
      or die("Verbindung zu Datenbank fehlgeschlagen");
  
//Datenbank auswählen:
$rs = @mysql_select_db("datenbank", $conn) 
    or die("Auswahl der Datenbank fehlgeschlagen");

$liste="";

if (!get_magic_quotes_gpc()) 
$eingabe = addslashes($eingabe);

$frage=mysql_query("SELECT * from Datenbanktabelle WHERE Titel LIKE '%$eingabe%'");
  
  while ($antwort=mysql_fetch_array($frage)){  
  
  
  $liste.= '<a href="#">'.$antwort["Titel"].'</a><br>';
   
    
  }
  
echo $liste;
  
?>

Waldgeist · 23.05.2007, 13:01

Super...

Habe mich schon länger gefragt wie das geht.
Vor ein paar Tagen habe ich dann mal angefangen mich mit AJAX zu beschäftigen. Und jetzt weiß ich dank deinem Beitrag wie das ganze genau auszushene hat

.

Werde das ganze bei Zeiten mal testen.

ravo · 23.06.2007, 14:46

Gratuliere, The Fritz!
das ist das beste Einführungsbeispiel in Ajax, das ich bisher gesehen habe.
Wenn Du noch erwähnt hättest, dass die php-Datei unter dem Namen text.php abgespeichert werden muss, würden es Anfänger noch leichter haben.

Man sieht an dem Beispiel aber auch, dass der Einstieg in Ajax doch einige Vorkenntnisse erfordert, in Deinem Beispiel HTML, Javascript, PHP und SQL, in etwas komplexeren Beispielen sind noch Kenntnisse des DOM-Modells erforderlich.

Sehr gut. Hast Du noch mehr Beispiele?

ravo

Teambyte · 27.06.2007, 15:47

Hallo,

habe es genau so gemacht .

Aber es passiert bei mir nichts ??

Ich geben was ein und nur der TExt "Bitte Suchbegriff eingeben!" verschwindet.

Und jetzt???

Gruß

Gert

NiteStyle · 27.06.2007, 23:17

dann ist bei irgendwas falsch... dann sollte normalerweise die liste kommen aus der php datei...
guck mal ob bei dir überhaupt ein request anlegt..

sag mal du benutz doch prototype oder sehe ich das falsch...
falls ja, sollte es erwähnt werden...
für user die kaum oder gar nix mit ajax zutun hatte

Koala · 30.06.2007, 23:18

Zitat:

Zitat von NiteStyle

sag mal du benutz doch prototype oder sehe ich das falsch...
falls ja, sollte es erwähnt werden...
für user die kaum oder gar nix mit ajax zutun hatte

hm .... ist das Prototype ? :

Zitat:

verwende ich die Ajax-Klasse, die Denny Carl in seinem Buch Praxiswissen Ajax beschreibt

mano · 05.07.2007, 20:32

Ja schönes Beispiel.

Wo kann ich allerdings hierbei, geschickt mein Ajax loading.gif unterbringen, sodass dieses bei jeder Anfrage vorher angezeigt wird? [readyState < 4]

segovax · 08.07.2007, 07:31

@mano:
bau auf deiner seite ein unsichtbares div/img ein, dass du dann mit js vor dem ladevorgang auf sichtbar und danach wieder auf unsichtbar änderst:

HTML-Code:

<div id="loadingimg" style="visibility: hidden;"><img src="loading.gif"></div>

Code:

function toggleImg(sowhat){
img = document.getElementById("loadingimg");
img.style.visibility = sowhat;
}

mit toggleImg("visible"); innerhalb der doRequest-funktion wird das ding sichtbar, mit toggleImg("hidden"); innerhalb der readyStateHandler-funktion wieder unsichtbar.

ich hab das ganze nicht getestet, wäre also schön wenn ich eine antwort erhielte ob es so geht.

mano · 09.07.2007, 20:34

Warum funktioniert folgendes nicht? Was mache ich falsch?

Zitat:

if(XMLHttpRequest.readyState < 4) {
_this.onSuccess(_this.indicator);
}

if(XMLHttpRequest.readyState == 4) { // rest }

Für die Klasse wird dazu noch folgendes übergeben:

Zitat:

indicator = "<img src='images/ajax_loading.gif'>";

andste72 · 12.07.2007, 13:40

Hallo, ich bin absoluter AJAX und Javascript Neuling. Habe das mit dem Suggest-Formular soweit nachvollziehen können.
Ich würde gern den ausgewählen Wert dann per Mausklick in das Textfeld schreiben lassen, könnte mir da vielleicht jemand helfen?

Danke
Andreas

23.06.2007, 14:46	#3 (permalink)
ravo Neuer Benutzer Registriert seit: 23.06.2007 Ort: Nürnberg Beiträge: 1	Suggest mit PHP und mySQL - Das beste Beispiel für den Ajax-Einstieg Gratuliere, The Fritz! das ist das beste Einführungsbeispiel in Ajax, das ich bisher gesehen habe. Wenn Du noch erwähnt hättest, dass die php-Datei unter dem Namen text.php abgespeichert werden muss, würden es Anfänger noch leichter haben. Man sieht an dem Beispiel aber auch, dass der Einstieg in Ajax doch einige Vorkenntnisse erfordert, in Deinem Beispiel HTML, Javascript, PHP und SQL, in etwas komplexeren Beispielen sind noch Kenntnisse des DOM-Modells erforderlich. Sehr gut. Hast Du noch mehr Beispiele? ravo

27.06.2007, 23:17	#5 (permalink)
NiteStyle Neuer Benutzer Registriert seit: 14.05.2007 Beiträge: 1	dann ist bei irgendwas falsch... dann sollte normalerweise die liste kommen aus der php datei... guck mal ob bei dir überhaupt ein request anlegt.. sag mal du benutz doch prototype oder sehe ich das falsch... falls ja, sollte es erwähnt werden... für user die kaum oder gar nix mit ajax zutun hatte Geändert von NiteStyle (27.06.2007 um 23:20 Uhr)

08.07.2007, 07:31	#8 (permalink)
segovax Neuer Benutzer Registriert seit: 10.12.2006 Beiträge: 25	@mano: bau auf deiner seite ein unsichtbares div/img ein, dass du dann mit js vor dem ladevorgang auf sichtbar und danach wieder auf unsichtbar änderst: HTML-Code: <div id="loadingimg" style="visibility: hidden;"><img src="loading.gif"></div> Code: function toggleImg(sowhat){ img = document.getElementById("loadingimg"); img.style.visibility = sowhat; } mit toggleImg("visible"); innerhalb der doRequest-funktion wird das ding sichtbar, mit toggleImg("hidden"); innerhalb der readyStateHandler-funktion wieder unsichtbar. ich hab das ganze nicht getestet, wäre also schön wenn ich eine antwort erhielte ob es so geht. __________________

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
AJAX Suggest - div. Fragen	lrtc	JavaScript	1	21.05.2007 08:34
Ajax suggest im Shop implementiert	Newbie	Schaufenster	5	18.05.2007 08:29
Suggest Problem mit Internet Explorer	Meccan	Serverseitige Skriptsprachen	2	16.12.2006 08:45
Ajax Suggest Beispiel	funky	Sonstige Probleme	4	09.09.2006 17:48
In ASP classic google suggest nachbilden	funky	Sonstige Probleme	7	08.03.2006 16:41

23.05.2007, 13:01	#2 (permalink)
Waldgeist Neuer Benutzer Registriert seit: 17.05.2007 Beiträge: 22	Super... Habe mich schon länger gefragt wie das geht. Vor ein paar Tagen habe ich dann mal angefangen mich mit AJAX zu beschäftigen. Und jetzt weiß ich dank deinem Beitrag wie das ganze genau auszushene hat . Werde das ganze bei Zeiten mal testen.

27.06.2007, 15:47	#4 (permalink)
Teambyte Neuer Benutzer Registriert seit: 27.06.2007 Beiträge: 1	Hallo, habe es genau so gemacht . Aber es passiert bei mir nichts ?? Ich geben was ein und nur der TExt "Bitte Suchbegriff eingeben!" verschwindet. Und jetzt??? Gruß Gert

05.07.2007, 20:32	#7 (permalink)
mano Neuer Benutzer Registriert seit: 12.03.2007 Beiträge: 2	Ja schönes Beispiel. Wo kann ich allerdings hierbei, geschickt mein Ajax loading.gif unterbringen, sodass dieses bei jeder Anfrage vorher angezeigt wird? [readyState < 4]

12.07.2007, 13:40	#10 (permalink)
andste72 Neuer Benutzer Registriert seit: 12.07.2007 Beiträge: 1	Hallo, ich bin absoluter AJAX und Javascript Neuling. Habe das mit dem Suggest-Formular soweit nachvollziehen können. Ich würde gern den ausgewählen Wert dann per Mausklick in das Textfeld schreiben lassen, könnte mir da vielleicht jemand helfen? Danke Andreas

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen