Datenbank ohne Refresh auslesen

[Rente]

Hey ihr.
Ich habe eine Frage. Ich programmiere gerade an einer Seite, die ich jedoch gerne etwas dynamisch gestalten würde (Interesse + Kenntniserweiterung).

Ich beschreibe mal die Situation: Der User gibt in ein <input> Feld einen Wert ein, dieser Wert soll nun nach der Eingabe (also ohne noch aus dem Feld auf ein anderes Feld klicken zu müssen) in der Datenbank gesucht und dann wird ein anderer Wert aus der Datenbank ausgegeben:
Beispiel: Ich tippe ins Feld "Berlin" ein, und dann erscheint in einem Text der darunter steht: Wir leben in Berlin . Also der Wert sollte ohne Refresh ausgegeben werden und am liebsten in einer Variable gespeichert sein.

Wie ist so etwas möglich. Ich hatte mal was von cgi, oder ajax in dem Bezug gehört. Würde mich auch über ein gutes Tutorial freuen, da mich der ganze Themenbereich rund ums dynamische Programmieren reizt.

Vielen Dank für eure Antworten.

 

[Sven Mintel]

Moin,

AJAX ist dafür das richtige Stichwort...diese Technik ist Javascript-basiert.
Damit ist es möglich, HTTP-Anfragen an eine bestimmte Adresse(bspw. ein PHP-Skript) zu senden, und erhält als Antwort die Ausgabe des Skriptes.
Dabei ist es möglich, der Anfrage auch Parameter per GET oder POST mitzugeben.

Das ganze funktioniert im Hintergrund, sichtbare Auswirkungen hat es erst, wenn du die Antwort wiederum per Javascript verarbeitest....z.B.in der Seite ausgibst.

Ein Einsteiger-Tutorial dazu findest du bspw. bei Galileo Computing

Die meisten Javascript-Frameworks beinalten natürlich Methoden, um soetwas ohne viel Aufwand zu implementieren, bspw. jQuery.load oder der AJAX.updater von prototypejs

 

[Rente]

Okay, vielen Dank. Also ich habe mich jetzt da mal ein wenig reingelesen und verstehe das jetzt glaube ich nur halb, wenn überhaupt. Ich sag einfach mal, was ich weiß, und wie mir dann geholfen werden kann:

Also ich habe verstanden, dass ich mit dem ajax update automatisch eine Datenbankabfrage durchführen kann. Ich glaube aber, dass es Ressourcensparender wäre, wenn man das nur macht, wenn man die Eingabe im Feld beendet hat.

Frage: Welchen JavaScript Befehl benutzte ich, um das Ajaxframe am besten auszulösen, gibt es da sowas wie onclick, oder ich meine es gibt doch sogar so etwas wie .. keine Ahnung, wie das jetzt heißt, aber wenn man die Taste gedrückt hat.

Dann wird verlinkt man die function auf eine andere Seite, die die Datenbank nach dem Ausdruck durchsucht, oder wie geht das. Kann man denn nicht die Suche irgendwie in die Funktion einbauen, oder so etwas?

Und dann stellt sich mir die Frage, wie ich das Ergebnis ausgeben kann. Ich habe gelesen, dass es etwas mit <div> zu tun hat, also habe ich mir gedacht, dass man einen Bereicht definiert, durch den Namen dann wohl, wo der Wert dann letztendlich ausgegeben wird. Doch wie diese dann eingebunden wird, frage ich mich.
Soll ich in dem PHPScript dann eine Variable festlegen, die dort dann ausgegeben wird? Aber wofür brauche ich dann noch <div>?

Wie man merkt, blicke ich noch nicht ganz durch, aber das grobe Konstrukt habe ich schon vor Augen.

 

[kuddeldaddeldu]

Hi,

ich versuche mal stückweise, Deine Fragen zu beantworten.

Also ich habe verstanden, dass ich mit dem ajax update automatisch eine Datenbankabfrage durchführen kann.

Zum besseren Verständnis: mit dem Ajax Update (oder auch jQuery.load()) kannst Du eine Resource vom Server anfordern und das Ergebnis in den von Dir angegebenen Container (HTML-Element) laden. Diese Resource kann alles mögliche sein. In Deinem Fall wäre das ein PHP-Script, dass die Datenbankabfrage durchführt und das Ergebnis ausgibt.

Ich glaube aber, dass es Ressourcensparender wäre, wenn man das nur macht, wenn man die Eingabe im Feld beendet hat.

Die Frage ist, wie Du das entscheiden willst, wenn man nicht auf einen Button klicken müssen soll.

Frage: Welchen JavaScript Befehl benutzte ich, um das Ajaxframe am besten auszulösen, gibt es da sowas wie onclick, oder ich meine es gibt doch sogar so etwas wie .. keine Ahnung, wie das jetzt heißt, aber wenn man die Taste gedrückt hat.

Ja, es gibt keydown-, keypress- und keyup-Events. Aber die feuern dann natürlich auch bei jedem Zeichen, das Du in das Feld tippst. Du hast hier, wie gesagt, das Problem zu entscheiden, wann kein weiteres Zeichen mehr kommt.

Dann wird verlinkt man die function auf eine andere Seite, die die Datenbank nach dem Ausdruck durchsucht, oder wie geht das.

Man fordert per HTTP-Request eine Resource vom Server an. S.o.

Kann man denn nicht die Suche irgendwie in die Funktion einbauen, oder so etwas?

In welche Funktion? Die Javascript-Funktion, die aufgerufen werden soll, wenn man einen Begriff eingegeben hat? Diese läuft auf dem Client, also im Browser lokal auf dem Rechner des Benutzers. Die Datenbank liegt aber auf dem Server, also muss per HTTP eine Resource abgerufen werden, die die Suche erledigt. S.o.

Und dann stellt sich mir die Frage, wie ich das Ergebnis ausgeben kann. Ich habe gelesen, dass es etwas mit <div> zu tun hat, also habe ich mir gedacht, dass man einen Bereicht definiert, durch den Namen dann wohl, wo der Wert dann letztendlich ausgegeben wird.

Genau, wobei das Element nicht zwingend ein Div sein muss. Wenn die Resource z.B. lauter Listitems (<li>) liefert, ergibt ein Div natürlich keinen Sinn, da wäre <ol> oder <ul> angebracht.
Man gibt dem Element, in das das Ergebnis geschrieben werden soll, übrigens in der Regel eine id, da diese ein Universalattribut ist (im Gegensatz zu name) und dokumentweit eindeutig sein muss (auch im Gegensatz zu name).

Doch wie diese dann eingebunden wird, frage ich mich.
Soll ich in dem PHPScript dann eine Variable festlegen, die dort dann ausgegeben wird? Aber wofür brauche ich dann noch <div>?

Hier wird's wieder konfuser. Das PHP-Skript weiß rein gar nichts von Deiner HTML-Seite und kann das Dokument auch nicht selbst manipulieren (PHP läuft auf dem Server). Es bekommt einen Parameter übergeben (die Eingabe aus dem Feld), tut damit, was immer es tut und gibt dann eine Zeichenkette aus. Diese Zeichenkette muss dann in der Javascript-Funktion, die den Request gestartet hat und den Response (die Zeichenkette) empfängt, verarbeitet werden. Im einfachsten Fall schreibt man sie einfach in das entsprechende HTML-Element.

Man kann diese Anforderung (und noch viel mehr) natürlich sehr bequem mit den von Sven genannten JS-Frameworks erledigen. Ich würde Dir allerdings für's Grundverständnis empfehlen, zumindest dieses einfache Beispiel einmal "zu Fuß" zu realisieren, wie es in dem Galileo Openbook beschrieben ist. Am besten schaust Du es Dir nochmal an, vielleicht ist es jetzt etwas klarer. Probier das Beispiel dort einfach mal aus und versuche dann, es auf Deinen Fall anzupassen.

LG

 

[Rente]

Vielen Dank für deine Hilfe. Ich habe mich damit jetzt einige Zeit beschäftigt und vor allem der Tipp mit dem "zu Fuß" gefiel mir gut, das werde ich jetzt erst mal machen. Immerhin durchblicke ich die Vorgänge jetzt ganz. Vielen Dank für deine Unterstützung.
Und der Unterstützung von Sven natürlich auch.