Seite neuladen per AJAX

  • Seite neuladen per AJAX

    Hallo zusammen,

    ich bin gerade dabei für meine Website einen Chat zusammen zu basteln.

    Zum Reload hab ich mir einen Codeschnippsel ausm Internet gesucht (tfonfara.de/ajax-seiteninhalt-…ktualisieren-jquery.xhtml), aber irgendwie bin ich zu blöd, den zu benutzen.

    Den Code selber einbinden ist kein Problem (also den JS-Teil). Allerdings versteh ich das mit dem "<div id=\"refresh\"></div>" nicht ganz.. was gehört den da rein?
    Die Datenbankabfrage hab ich auf eine extra Seite gepackt und dann

    Quellcode

    1. <script type="text/javascript">
    2. $(document).ready(function() {
    3. $("#refresh").load("data/templates/function/chat.php");
    4. var refreshId = setInterval(function() {
    5. $("#refresh").load("data/templates/function/chat.php");
    6. }, 1000);
    7. });
    8. </script>


    eben darauf hin umgeschrieben.

    Allerdings ist die Anzeige leer. Da passiert überhaupt nichts.

    Kann mir da jemand weiter helfen?
    Und dann vllt. auch, mit der Chatnachricht absenden? Da steh ich auch ncoh komplett aufm Schlau.

    Danke schonmal

    LG

    Fipsi

  • Moin!

    Vorerst einmal die folgende Frage: Warum baust du den Chat auf Ajax auf und nicht auf WebSocket?
    Der Vorteil dabei ist einfach, dass du nicht in einem bestimmten Zyklus nach neuen Einträgen fragen musst sondern diese quasi per Push zum Browser-JS kriegst.

    Das, was du aktualisieren willst, ist wohl die Historie, nicht? Also den Verlauf. Also würde es Sinn machen, wenn du ein PHP-Script hast, das nur den Verlauf mit HTML ausgibt.
    Was passiert denn, wenn du "data/templates/function/chat.php" im Browser öffnest?

    Zum Thema neue Nachrichten: Du hast 2 Möglichkeiten. Entweder du machst es neumodisch mit WebSockets oooooder altmodisch mit Ajax. Das ganze würde mit Ajax dann so aussehen, dass du einen HTTP-Request an einen PHP-Script schickst und die Eingaben des Users als POST-Data mitgibst. Dann kannst du innerhalb des PHP-Scripts den Eintrag in der DB anlegen, der dann beim nächsten aktualisieren deines bestehenden Verlaufes erscheint.

    Klar soweit? :)

    Grüße,
    Bodo06

  • Servus,

    mit AJAX dachte ich deshalb, weil ich mich bei JS kaum auskenn, aber bei sockets noch viel weniger und ich nicht wusste, dass es auch den weg per Sockets gibt.
    Ich war zwar schon 100x am überlegen, ob es und wie es geht, dass der Server des einfach schickt, ohne dass die Seite aktualisiert wird, aber ich weiß/wusste einfach nicht wie.

    Ich glaube, dass ich mich dan wohl in das Theme Socket ein bisschen einlesen muss. Mal schaun, ob ich was finde.. oder hast du vllt. nen guten Link?

    LG
    Fipsi

  • Moin!

    Eine gute Einführung in WebSockets findest du hier:
    html5rocks.com/de/tutorials/websockets/basics/ (GrundTutorial)
    websocket.org/ (Demos;APIs; Protokoll; Zusätzliche Infos)

    Für's Backend kannst du überlegen, womit du den Server baust. Du hast die Möglichkeit, eine sehr sehr gute Implementation in Java zu Benutzen (github.com/TooTallNate/Java-WebSocket) oder in node.JS (Tutorial mit Client-Server Kommunikation hier: martinsikora.com/nodejs-and-websocket-simple-chat-tutorial . Sehr gute Tutorial mit einer sehr einfachen und simplen Server-Client Kommunikation. Du kannst das ganze natürlich auch mit einem PHP-Deamon machen. Oder mit Python. Oder mit Ruby. Oder mit was auch immer du willst.

    Wenn du Fragen und/oder Probleme bei dem Thema hast, melde dich ruhig direkt bei mir. :)

    Grüße und viel Erfolg!
    Alex

  • Öhm.. ja, das wird guter Lesestoff sein, glaub ich lol, da bin ich beschäftigt^^

    Danke dir, ich meld mich, wenns harkt (wird sicher ned lang dauern, so wie ich mich kenn..)

    Edit:

    ok, jetzt gleich noch ne Frage: gibts das auch für php? Ich versteh wzar manche JS-Teile, aber anfangen kann ich nichts damit.. hab das Thema heir eröffnet, weil ich erst per AJAX das ganze bedachte.

  • Alles Klar, back to oldschool Ajax. :)

    Wie ich bereits zum erstellen neuer Beiträge sagte:

    Bodo06 schrieb:

    Das ganze würde mit Ajax dann so aussehen, dass du einen HTTP-Request an einen PHP-Script schickst und die Eingaben des Users als POST-Data mitgibst. Dann kannst du innerhalb des PHP-Scripts den Eintrag in der DB anlegen, der dann beim nächsten aktualisieren deines bestehenden Verlaufes erscheint.


    Jetzt zur Frage, warum nichts angezeigt wird:
    - Hast du Chat Einträge in der Datenbank, die angezeigt werden können?
    - Was passiert, wenn du die Verlaufs-PHP-Seite direkt im Browser aufrufst? Irgendwelche Exceptions? Fehler?
    - Wird dein DIV #refresh angezeigt? Vielleicht hier Größe des DIVs 0x0 Pixel?

    LG Alex

  • Dann zu den antworten:

    - Ja, eine Nachricht is drin
    - Dann passiert nichts.. auch obwohl ich jez extra gleich auf echo gestellt hab, wird nichts angezeigt
    - Wenn ich im Broswer den Quelltext öffne, wird der Teil angezeigt, und nirgends ist eine größe dafür angegeben

    Edit: Zu antwort 2: Jetzt wird was angezeigt.. hatte mich mit meinen eigenen Sicherheitsvorkehrungen ausgesperrt lol

  • Also wird die Nachricht auch angezeigt wenn du das Ausgabe-Script direkt im Browser aufrufst?
    Wenn Nein, poste doch mal den Quelltext des PHP Scriptes.

    Ich würde dir für sowas die Entwickler-Tools von Google Chrome oder Firebug für Firefox empfehlen.
    Ansonsten versuch es doch mal mit folgendem:

    Quellcode

    1. <div id="refresh" style="width: 100px; height: 100px;">text text text</div>


    Wenn dein JavaScript funktioniert, müsstest du zu Anfang das "text text text" sehen, das dann durch deinen Verlauf ersetzt wird.

  • Ja, dann wird die nachricht angezeigt.

    Und das text text text bleibt da, das verschwindet nich.. egal, auf was ich auch die Zeit stell.. da rührt sich nichts.

    Edit:

    Wen ich FireBug bemüh und dann den JS-Teil durchcheck, dann streicht er mit in der ersten Zeile bei

    Quellcode

    1. $(document).ready(function() {

    das $ an (Exception: $ is not defined; @Scratchpad:11)

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Fipsi ()

  • Sry für Tripplepost, but:

    Quellcode

    1. $seiten_inhalt .= "<form action=\"\" method=\"POST\">\r\n";
    2. $seiten_inhalt .= "<br />Ihre Nachricht: <input type=\"text\" name=\"massage\" size=\"75\" maxlenght=\"255\" /> <input type=\"submit\" value=\"Senden\" />\r\n";
    3. $seiten_inhalt .= "</form>\r\n";
    5. if ($_SERVER['REQUEST_METHOD'] == "POST")
    6. {
    7. $massage = text_input_check($_POST['massage']);
    8. $time = date("H:i:s");
    9. $date = date("Y.m.d");
    11. $sql = "INSERT INTO `chat`
    12. SET
    13. massage = '$massage',
    14. userid = '$user->id',
    15. username = '$user->username',
    16. time = '$time',
    17. date = '$date'";
    18. $mysqli->query($sql);
    20. $datei_open = fopen("data/templates/txt/protokoll/chat.txt", "a");
    21. fwrite($datei_open, "[".$date.", ".$time."] (".$user->id.") ".$user->username.": ".$massage."\r\n");
    22. fclose($datei_open);
    23. }
    Alles anzeigen


    Diesen Teil hab ich in der Datei stehen, die die andere Datei immer wieder nach lädt.
    Wenn ich da jetzt eine neue Nachricht schreib, und absende, dann wird diese Datei immer neu geladen.. wie kann ichs machen, dass das nicht passiert? Mir jetzt prinzipiel egal, ob ich dafür eine 3 Datei anlege oder in die dauernt nachgelandene Datei noch was rein schreibe, aber die Datei, in der alles angezeigt wird, soll nicht immer wieder neu aufgerufen werden, die soll bleiben.

  • Ja ne, die chat.php ruft ja die "data/templates/function/chat.php"-Datei, in der die db-abfrage steht, alle 1,5 sek immer wieder auf, das funktioniert ja.

    Ich versteh nich ganz.. wieso unter GET und POST unterscheiden? Da ist doch nur der unterschied, obs per URL übergeben wird, oder "intern". Da hab ich ja POST. Aber das hat doch nichts damit zu tun, ob die Seite neu geladen wird, oder nich? Muss ja doch sowieso?

  • Nein, das ist soweit auch richtig.

    Was du willst, ist den If-Block über Ajax aufzurufen, um den neuen Datensatz zu stellen. Und dazu brauchst du auch wieder einen Ajax Request.

    Damit du dabei aber nicht das Formular ausgibst (Unnötige Bandbreiten Belastung), kannst du zwischen den GET- und POST-Requests unterscheiden. ;)