AJAX-Anfänger hat ein paar Fragen...

BartTheDevil89 · 06.02.2009, 22:11

Hallo,

ich habe mich jetzt endlich mal an Ajax herangewagt und mit Hilfe eines Tutorials, das eine Shoutbox beschreibt. Mein Wunschziel ist ein kleiner Notizblock, wo man also Notizen eintragen kann und sie wieder löschen kann.
Allerdings habe ich ein paar Probleme:

1. Ist derzeit eine Funktion drin, die alle 5 Sekunden die Shoutbox neu lädt. Ich hingegeben möchte allerdings, dass sie einfach neu geladen wird, nachdem ein neuer Eintrag war. Mein Versuch war dieser hier:

Code:

function saveData()
{
if (xmlHttp) {
    xmlHttp.open('POST', 'setdata.php');
    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlHttp.send('name='+document.frmshoutbox.txtname.value+'&message='+document.frmshoutbox.txtmessage.value);
}

// Message-Eingabefelder leeren und Focus setzen
document.frmshoutbox.txtmessage.value = '';
document.frmshoutbox.txtmessage.focus();
loadData();//Hier werden jetzt die Daten neu geladen.....
}

....und oben eben das setInterval("loadData()",5000); wieder raus.

Aber das läuft einfach nicht.

2. Möchte ich die Löschfunktion noch bei [Loeschen] reinsetzen. Dafür muss ja wieder in der shoutbox.js ne Funktion einbauen, die mir dann ne neue php-Seite aufrufen und dort eben den DB-Eintrag löscht und wie schon bei Problem 1 dann die Shoutbox neu lädt. Aber wie muss dann der Link ausschauen, dass die entsprechende Funktion aufgerufen wird?

Das komplette Script (wenn auch nicht ganz, da ich ja schon bisschen was geändert habe) findet ihr hier am Ende des Tutorials zum Download:

devblog.de Tutorial: Shoutbox als AJAX-Anwendung

Dankeschön

David · 06.02.2009, 22:36

Zitat:

Zitat von BartTheDevil89

Ich hingegeben möchte allerdings, dass sie einfach neu geladen wird, nachdem ein neuer Eintrag war.

Also nur wenn der Benutzer eine neue Eingabe gemacht hat und diese an den Server gesendet wird gleich die zwischenzeitlich eingetroffenen Nachrichten abholen?

BartTheDevil89 · 06.02.2009, 22:43

Zitat:

Zitat von David

Also nur wenn der Benutzer eine neue Eingabe gemacht hat und diese an den Server gesendet wird gleich die zwischenzeitlich eingetroffenen Nachrichten abholen?

Ja, wenn halt was neues eingetragen wird, soll er danach direkt neu laden, sodass eben der neue Eintrag drin ist.

David · 06.02.2009, 23:16

Bin mir nicht sicher, ob wir aneinander vorbeischreiben.

Benutzer X, Y und Z, melden sich alle um 11:59:00 an.
11:59:05 X schickt Nachricht (a) ab.
12:01:07 Y schickt Nachricht (b) ab.
Z wartet nur.

Was soll dann Deiner Vorstellung nach wann bei wem passieren?

BartTheDevil89 · 06.02.2009, 23:37

Zitat:

Zitat von David

Bin mir nicht sicher, ob wir aneinander vorbeischreiben.

Benutzer X, Y und Z, melden sich alle um 11:59:00 an.
11:59:05 X schickt Nachricht (a) ab.
12:01:07 Y schickt Nachricht (b) ab.
Z wartet nur.

Was soll dann Deiner Vorstellung nach wann bei wem passieren?

Grundsätzlich soll das ne Funktion für einen einzelnen sein....also das soll keine Onlineversion oder so sein. Ein Benutzer nutzt den Notizblock und deswegen brauch er das nicht immer neu überprüfen. Einfach nach der Eingabe anzeigen und gut....

David · 07.02.2009, 09:40

Dann lass doch direkt als Antwort auf die Anfrage die neuen Daten liefern.

Code:

function saveData() {
  xmlHttp.open...
  xmlHttp.setRequestHeader...
  xmlHttp.onreadystatechange = processNewData;
  xmlHttp.send....
}

function processNewData(xmlHttp) {
  // hier die neuen Daten verarbeiten.
}

siehe https://developer.mozilla.org/En/Using_XMLHttpRequest

BartTheDevil89 · 07.02.2009, 10:49

Hmh....versteh leider nicht ganz, wie du das meinst. Denn hier ist die Funktion, die die Daten einträgt:

Code:

function saveData()
{
 if (xmlHttp) {
     xmlHttp.open('POST', 'setdata.php');
     xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     xmlHttp.send('name='+document.frmshoutbox.txtname.value+'&message='+document.frmshoutbox.txtmessage.value);
 }
 document.frmshoutbox.txtmessage.value = '';
 document.frmshoutbox.txtmessage.focus();
}

Die passende Funktion fürs neue Laden der Daten ist

Code:

loadData();

Aber wo müsste ich dir jetzt in der Funktion mit einbauen, dass die also am Ende geladen wird?

Danke

David · 07.02.2009, 13:50

Musst Du die Daten extra nochmal mit einem neuen Request abholen? Warum schickt Dir der Server nicht einfach gleich als Antwort auf die Anfrage in saveData() die neuen Daten?

BartTheDevil89 · 07.02.2009, 14:15

Zitat:

Zitat von David

Musst Du die Daten extra nochmal mit einem neuen Request abholen? Warum schickt Dir der Server nicht einfach gleich als Antwort auf die Anfrage in saveData() die neuen Daten?

Ähm...ja wie würdest du denn die saveData() ändern, dass er es macht? Wie gesagt ich bin noch recht Frischling in dem Gebiet....

David · 07.02.2009, 14:38

Zum Ausprobieren:

PHP-Code:

  <?php
if ( isset($_POST['nd']) ) {
  // Ajax-Request mit neuen Daten
  // Daten verarbeiten
  // Ergebnis senden
  echo date('H:i:s') . ': '. $_POST['nd'];
}
else {
  // kein Ajax-Request. HTML-Gerüst ausgeben
?>
<html>
  <head>
    <title>ajax test</title>
    <script type="text/javascript">
      function foo() {
        var req = new XMLHttpRequest();
        req.open('POST', '?', true);
        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        req.onreadystatechange = bar;
        req.send("nd="+escape(document.getElementById("xyz").value));
      }
      
      function bar(aEvt) {
        var req = aEvt.target;
        if (req.readyState == 4) {  
          if(req.status != 200) {
            alert("Fehler");
          }
          else {
            var d = document.createElement('div');
            d.appendChild( document.createTextNode(req.responseText) );
            document.body.appendChild(d);
          }
        }
      }
    </script>
  </head>
  <body>
    <input type="text" id="xyz" />
    <button onclick="foo()">submit</button>
  </body>
</html>
<?php
}
?>

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

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Hab paar grundsätzliche fragen	basti0681	PHP Tipps 2009	20	29.01.2009 06:27
Anfänger und Mysql... Paar Fragen!	Finaldragon	PHP Tipps 2008	40	03.05.2008 10:28
Ein paar Fragen	robydog	PHP Tipps 2008	7	23.04.2008 11:45
2 Fragen zu AJAX	Freeaak	HTML, Usability und Barrierefreiheit	11	22.02.2007 18:29
habe ein paar fragen zu REGEX	imported_kremser	PHP Tipps 2006	11	31.01.2006 15:30
ein paar Fragen	Da-JS	PHP Tipps 2006	1	08.01.2006 16:36
Ein paar Fragen	Diego1978	PHP Tipps 2005-2	2	13.08.2005 00:57
Paar Fragen zum Formmailer	c-f-g	PHP Tipps 2005	8	09.05.2005 11:14
[Erledigt] Anfänger Fragen		HTML, Usability und Barrierefreiheit	13	24.02.2005 19:59
mal ein paar fragen zu login und "communitysytem"	Fraylman	PHP Tipps 2004-2	10	30.12.2004 17:32
[Erledigt] Allgemeine Anfänger Fragen		PHP Tipps 2004-2	5	20.12.2004 14:57
[Erledigt] Ein paar Fragen! HELP!		Off-Topic Diskussionen	9	07.12.2004 13:15
ein paar fragen!		PHP Tipps 2004-2	18	16.11.2004 12:59
Ein Paar Fragen		PHP Tipps 2004-2	6	10.11.2004 19:21
[Erledigt] Lamp unter Suse 9.1 / Paar Fragen!		Server, Hosting und Workstations	2	21.08.2004 22:53

06.02.2009, 22:11
BartTheDevil89 Erfahrener Benutzer Registriert seit: 09.05.2005 Beiträge: 561	AJAX-Anfänger hat ein paar Fragen... Hallo, ich habe mich jetzt endlich mal an Ajax herangewagt und mit Hilfe eines Tutorials, das eine Shoutbox beschreibt. Mein Wunschziel ist ein kleiner Notizblock, wo man also Notizen eintragen kann und sie wieder löschen kann. Allerdings habe ich ein paar Probleme: 1. Ist derzeit eine Funktion drin, die alle 5 Sekunden die Shoutbox neu lädt. Ich hingegeben möchte allerdings, dass sie einfach neu geladen wird, nachdem ein neuer Eintrag war. Mein Versuch war dieser hier: Code: function saveData() { if (xmlHttp) { xmlHttp.open('POST', 'setdata.php'); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlHttp.send('name='+document.frmshoutbox.txtname.value+'&message='+document.frmshoutbox.txtmessage.value); } // Message-Eingabefelder leeren und Focus setzen document.frmshoutbox.txtmessage.value = ''; document.frmshoutbox.txtmessage.focus(); loadData();//Hier werden jetzt die Daten neu geladen..... } ....und oben eben das setInterval("loadData()",5000); wieder raus. Aber das läuft einfach nicht. 2. Möchte ich die Löschfunktion noch bei [Loeschen] reinsetzen. Dafür muss ja wieder in der shoutbox.js ne Funktion einbauen, die mir dann ne neue php-Seite aufrufen und dort eben den DB-Eintrag löscht und wie schon bei Problem 1 dann die Shoutbox neu lädt. Aber wie muss dann der Link ausschauen, dass die entsprechende Funktion aufgerufen wird? Das komplette Script (wenn auch nicht ganz, da ich ja schon bisschen was geändert habe) findet ihr hier am Ende des Tutorials zum Download: devblog.de Tutorial: Shoutbox als AJAX-Anwendung Dankeschön


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

06.02.2009, 23:16
David Erfahrener Benutzer Registriert seit: 05.09.2007 Beiträge: 5.044	Bin mir nicht sicher, ob wir aneinander vorbeischreiben. Benutzer X, Y und Z, melden sich alle um 11:59:00 an. 11:59:05 X schickt Nachricht (a) ab. 12:01:07 Y schickt Nachricht (b) ab. Z wartet nur. Was soll dann Deiner Vorstellung nach wann bei wem passieren?

07.02.2009, 09:40
David Erfahrener Benutzer Registriert seit: 05.09.2007 Beiträge: 5.044	Dann lass doch direkt als Antwort auf die Anfrage die neuen Daten liefern. Code: function saveData() { xmlHttp.open... xmlHttp.setRequestHeader... xmlHttp.onreadystatechange = processNewData; xmlHttp.send.... } function processNewData(xmlHttp) { // hier die neuen Daten verarbeiten. } siehe https://developer.mozilla.org/En/Using_XMLHttpRequest

07.02.2009, 10:49
BartTheDevil89 Erfahrener Benutzer Registriert seit: 09.05.2005 Beiträge: 561	Hmh....versteh leider nicht ganz, wie du das meinst. Denn hier ist die Funktion, die die Daten einträgt: Code: function saveData() { if (xmlHttp) { xmlHttp.open('POST', 'setdata.php'); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlHttp.send('name='+document.frmshoutbox.txtname.value+'&message='+document.frmshoutbox.txtmessage.value); } document.frmshoutbox.txtmessage.value = ''; document.frmshoutbox.txtmessage.focus(); } Die passende Funktion fürs neue Laden der Daten ist Code: loadData(); Aber wo müsste ich dir jetzt in der Funktion mit einbauen, dass die also am Ende geladen wird? Danke

07.02.2009, 13:50
David Erfahrener Benutzer Registriert seit: 05.09.2007 Beiträge: 5.044	Musst Du die Daten extra nochmal mit einem neuen Request abholen? Warum schickt Dir der Server nicht einfach gleich als Antwort auf die Anfrage in saveData() die neuen Daten?

07.02.2009, 14:38
David Erfahrener Benutzer Registriert seit: 05.09.2007 Beiträge: 5.044	Zum Ausprobieren: PHP-Code: <?php if ( isset($_POST['nd']) ) { // Ajax-Request mit neuen Daten // Daten verarbeiten // Ergebnis senden echo date('H:i:s') . ': '. $_POST['nd']; } else { // kein Ajax-Request. HTML-Gerüst ausgeben ?> <html> <head> <title>ajax test</title> <script type="text/javascript"> function foo() { var req = new XMLHttpRequest(); req.open('POST', '?', true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.onreadystatechange = bar; req.send("nd="+escape(document.getElementById("xyz").value)); } function bar(aEvt) { var req = aEvt.target; if (req.readyState == 4) { if(req.status != 200) { alert("Fehler"); } else { var d = document.createElement('div'); d.appendChild( document.createTextNode(req.responseText) ); document.body.appendChild(d); } } } </script> </head> <body> <input type="text" id="xyz" /> <button onclick="foo()">submit</button> </body> </html> <?php } ?>