Ankündigung

Einklappen
Keine Ankündigung bisher.

Ajax --- Nur einmal nachladen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Ajax --- Nur einmal nachladen

    Hallo,

    Ich habe heute angefangen mich sowohl mit Javascript als auch speziell mit AJAX auseinanderzusetzen

    Zum experimentieren wollte ich die "Shoutbox als AJAX-Anwendung" von devblog.de umwandeln zu einem kleinen Kontaktbuch.

    Die Javascript-Datei des Scripts sieht wie folgt aus:
    Code:
    // Quelle: http://www.devblog.de
    // "Shoutbox als AJAX-Anwendung"
    // Code darf frei verwendet werden
    
    // globale Instanz von XMLHttpRequest
    var xmlHttp = false;
    
    // XMLHttpRequest-Instanz erstellen
    // ... für Internet Explorer
    try {
        xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try {
            xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {
            xmlHttp  = false;
        }
    }
    // ... für Mozilla, Opera und Safari
    if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {
        xmlHttp = new XMLHttpRequest();
    }
    
    // aktuelle Daten laden
    loadData();
    
    // alle 5 Sekunden neue Daten holen
    setInterval("loadData()",5000);
    
    function loadData()
    {
     if (xmlHttp) {
         xmlHttp.open('GET', 'getdata.php', true);
         xmlHttp.onreadystatechange = function () {
             if (xmlHttp.readyState == 4) {
                 document.getElementById("asb_content").innerHTML = xmlHttp.responseText;
             }
         };
         xmlHttp.send(null);
     }
    }
    
    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();
    }
    Der Inhalt der Datenbank wird mittels
    Code:
    setInterval("loadData()",5000);
    aller 5 Sekunden neu geladen. Der Sinn von AJAX ist ja aber unter anderem den Datentransfer einer Website zu vermindern. Wie kann ich es machen das der Inhalt immer erst dann nachgeladen wird, wenn ein neuer Eintrag per saveData() hinzugefügt wurde?

    Der Aufruf der Funktionen erfolgt im Original Script wie folgt:
    Code:
    <form action="" name="frmshoutbox" onsubmit="saveData(); return false;">
    Meinerseits wurde er umgewandelt auf
    Code:
    <form action="" name="frmshoutbox" onsubmit="saveData(); setTimeout('loadData()',3000); return false;">
    und dafür das setinterval im Javascript auskommentiert.
    Doch nun wird garnix nachgeladen! Hat jemand einen Lösungsvorschlag?

    lg Flo
    "Je größer die Insel des Wissens, desto länger die Küste der Verzweiflung!"

  • #2
    Was sagt dir den Firebug dazu?
    [FONT="Book Antiqua"][I]"Nobody is as smart as everybody" - Kevin Kelly[/I]
    — The best things in life aren't things[/FONT]

    Kommentar


    • #3
      Also habe soeben Firefox 3.0.1 und Firebug installiert weiß aber ehrlich gesagt nicht wie ich da einen Fehler finden soll!? Mir fällt unter "DOM" nichts auffälliges ins Auge ...


      Zumal bei meiner Methode die Seite doch jedesmal neu geladen wird was sie ja eben nicht soll!
      "Je größer die Insel des Wissens, desto länger die Küste der Verzweiflung!"

      Kommentar


      • #4
        Dank Firebug habe ich nun herausgefunden, dass beim absenden des Formulars mit meinen Aufruf
        Code:
        <form action="" name="frmshoutbox" onsubmit="saveData(); setTimeout("loadData()",3000); return false;">
        meine Seite komplett neu geladen wird! Weiß jemand warum?
        Bin gerade in den Anfangszügen mit Javascript!
        "Je größer die Insel des Wissens, desto länger die Küste der Verzweiflung!"

        Kommentar


        • #5
          Wegen der doppelten Anführungszeichen bei "loaddata()".
          Für den Interpreter fängt der Code beim ersten doppelten Anführungszeichen an und ist bei zweiten doppelten Anführungszeichen zu Ende. Hier also
          onsubmit="saveData(); setTimeout("

          Kommentar

          Lädt...
          X