Inhalt aktualisieren nach 10 sek ohne reload

Genau alle 10 Sekunden wäre nun pollen. Das Ajax selber sendet im Moment einmal einen Request und bekommt eine Antwort.

Wenn Du pollen möchtest dann rufst alle 10 sekunden einen neuen Request auf , dafür empfehle ich dann die Window.setTimeout() Methode. window.setInterval() ginge auch aber sobald man mehere Intervalle am laufen hat kommen die Intervalle durch einander.

Dies könnte zum Beispiel nun so aussehen.

Code:
function sendValueToServer () {
    // welchen Wert 
    var value = document.getElementById('meinWert').value; // falls es ein Input feld ist   
    var ajaxConf = {
         method:'POST',
         path:'index.php',
         params:{
              post_var_name:value
         }
    }    

    var load = new Load.ajaxContent(ajaxConf);
         load.initLoad(null,allDone);    

    function allDone () {
        // es ging alles gute nun sende einen neuen Request
        delete load;
        delete ajaxConf;
        window.setTimeout(sendValueToServer,10000); 
    }
}
window.setTimeout(sendValueToServer,10000);
 
Naja bei window.setTimeout gibt an einen Wert an nachdem er die Funktion aufrufen soll und zwar in Millisekunden.

Somit sind 10.000 Millisekunden = 10 Sekunden also müssten frei nach Adam Riese 15.000 Millisekunden = 15 Sekunden sein etc usw ;)

MfG
 
Ein wenig solltest Dich schon mal damit beschäftigen ist ja nun auch keine Raktentechnik, ganz ehrlich das ist kein "Macht ihr mal für mich coole Sachen Forum".

Also den Code wo var Load = {...} steht den packst in eine Datei ich hab sie halt Load.class.js genannt.

dann kommt im Head die Anweisung

HTML:
   <head>
        <script type="text/javascript" src="meinejavascriptdatei.js"></script>
        <script type="text/javascript">
              //weiterer JavaScript Code
        </script>
   </head>
   <body>
   </body>

Das wäre es auch schon gewesen um dieses dann einzubinden.
 
Ich seh schon ich hatte in der ersten Quellcode angegeben wie man es zum Beispiel
aufrufen kann und da noch nen Fehler drinnen welchen du gleich mit kopiert hast.

Such das und lösch es aus der Load.class.js , der Fehler ist Load.imageFiles das müsste Load.imageFile heissen dann normal.
Code:
/*
* Aufruf
* Bilder vorladen
*/
var loadImg = new  Load.imageFiles('bild.jpg'); // oder halt nen ganzes Bilder Array reinjagen
loadImg.initLoad(null,bildersindda);

function bildersindda() {
   alert("bild geladen");
}

/*
* Aufruf
* Ajax senden
*/
var ajaxConf = {
      path:'test.php',
      method:'POST',
      params:{
            name:'test',
            id:15
      }
}
var loadAjax = new  Load.ajaxContent(ajaxConf);
loadAjax.initLoad(null,ajax_ready);

function ajax_ready (rv) {
   alert(rv);

}

Des weiteren hast gar keinen setTimeout drinnen in der test.html.
Da kann gar nix in irgend einer Schleife ablaufen.
 
Bei mir gehst um nen BrowserGame, dass ich versuche zu basteln, demnach werd ich also wohl JS nehmen, da die PHP-Skripte reagieren sollen, wenn der User was macht...

Ich hab da dann nur noch nen Problem mit der Flexibilität...

So wie ich AJAX verstehe, müsste ich theoretisch für jeden Request nen AJAX-Skrpt bauen...
Ich würde aber lieber nur eine JS-Funktion für den Request benutzen, der je anchdem was ihm gefüttert wird den entsprechenden PHP-Skript ansteuert und die Antwort entsprechend verarbeitet...

Um AJAX an sich zu benutzen brauch man ja nur nen kleinen Code-Schnipsel...
Aber wie mach ich den Flexibel... Sodass ich über diesen EINEN Code, VERSCHIEDENE Request absetzen kann, die VERSCHIEDENE Fensterteile ändern und dementsprechend auch UNTERSCHIEDLICHE PHP-Skripte(*.php-Files) ansprechen?
 
Okay Firesymon hier noch einmal für Dich nun.

pack den Code hier in die Load.class.js oder in eine Datei deiner Wahl.

Code:
/**
* Load Object
* um Bilder , Ajax oder XML Datein zu laden
* XML Datein hab ich dann erstmal bleiben lassen also mehr oder weniger 
* ungetestet
*/
var Load = {
    send:true,
    imageFile:function(object) {
        var lIF_Values = new Array();
        var lIF_onProcess = false;
        var lIF_inProgress = null;
        var lIF_loaded   = null;
        var lIF_pS       = null;
        var lIF_pI       = null;
        var callback     = null;
        var returnparams = null;
        
        if(typeof object == 'string') 
            lIF_Values.push(object);
        else 
            for(var i = 0 ; i < object.length ; i++) lIF_Values.push(object[i]);

        function loadSingleImage () {            
            var imgFile = new Image(); 
                imgFile.onload = function () {                
                    if(lIF_Values.length > 1) { 
                        lIF_Values.shift();
                        window.setTimeout(loadSingleImage,25);
                    } else {
                        if(lIF_pS) Element.unlink(lIF_pS);
                        
                        if(callback) callback.call(callback,object,(returnparams)?returnparams:null);
                    } 
                    imgFile.onload = function () {};               
                }   
            imgFile.src = lIF_Values[0];
        }
                                
        this.initLoad = function (preloadlayer,cb,rp) {
            returnparams = rp;
            callback     = cb;
            lIF_pS       = preloadlayer;
            loadSingleImage();
        }
    },
    ajaxContent:function (configFile) {    
        var config       = configFile;
        var callback     = null;
        var lAC_pS       = null;
        var returnparams = null;
        var http_request = null;
        
        function addPostParams(paramsObj) {
            var postParams = null;
            
            for(key in paramsObj) {
                if(!postParams) 
                    postParams = key+"="+encodeURIComponent(paramsObj[key]);
                else 
                    postParams += "&"+key+"="+encodeURIComponent(paramsObj[key]);
            }                
            return (postParams)?postParams:'';
        }
               
        function addGetParams (paramsObj) {
            var getParams = null;
        
            for(key in paramsObj) {
                if(!getParams) 
                    getParams = "?"+key+"="+encodeURIComponent(paramsObj[key]);
                else value_param1
                    getParams += "&"+key+"="+encodeURIComponent(paramsObj[key]);
            }            
            return (getParams)?getParams:'';
        }
        
        function getAjaxContent() {        
            if(window.XMLHttpRequest)     
                http_request = new XMLHttpRequest();
            else 
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
                        
            if(config.method == 'POST') {
                http_request.open(config.method,config.path,true);
                http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
                http_request.setRequestHeader("accept-charset","UTF-8;");
                http_request.send(addPostParams(config.params));
            } else {
                var getParams = addGetParams(config.params);value_param1
                
                /*
                                            * IE Fix:
                                             * Der Internet Explorer cacht die Datei und lŠd sie neu so das die HTTP XML Request nie 
                                             * ausgeführt wird. Somit noch einen Timestamp mit anhŠngen so das die Seite jedesmal
                                             * neu geladenwird
                                             */
                if(navigator.appName == 'Microsoft Internet Explorer') {  
                    var t = new Date();                        
                    if(getParams || config.path.match(/\?/gi)) {
                        getParams += '&'+Element.generateId(10)+'='+t.getTime();
                    } else {
                        getParams += '?'+Element.generateId(10)+'='+t.getTime();
                    }
                }
                
                http_request.open('GET',config.path+''+getParams,true);
                http_request.send(null);
            }
            
            http_request.onreadystatechange = function () {
                try {
                    if(http_request.readyState == 4) {   
                        if(http_request.status == 200) {
                            var requestVal = http_request.responseText;             
                            
                            /*Preloader entfernen soweit vorhanden */
                            if(lAC_pS) { 
                                Element.unlink(lAC_pS); 
                                lAC_pS = null;
                            }
                            
                            if(callback) {
                                callback.call(callback,requestVal,returnparams);
                            }
                        }
                    }
                } catch (e) {
                    //sollte der Request abgegbrochen werden über http_request.abort( )
                    //wirft der FF aktuell eine Exception die wir hier mal gekonnt abfangen
                }
            }
        }
        
        this.cancelRequest = function () {
            if(lAC_pS) {
                Element.unlink(lAC_pS);
                lAC_pS = null; 
            }
            http_request.abort();
            http_request = false;
        }
        
        this.initLoad = function (preloadlayer,cb,rp) {
            callback     = cb;
            returnparams = rp;
            lAC_pS       = preloadlayer;
            getAjaxContent();
        }
    },
    XMLDocument:function (file,callback) {    
        try {
            var xmlFile = new XMLHttpRequest();
        } catch (e) {
            try {
                var xmlFile = new ActiveXObject("Msxml2.XMLHttp");
            } catch (e) {
                try {
                    var xmlFile = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {
                    var xmlFile = null;
                }
            }
        }     
        
        if(xmlFile) {
            xmlFile.onreadystatechange = function () {
                if(xmlFile.readyState == 4) {
                    callback.call(null,xmlFile);
                }
            }
            xmlFile.open('GET',file,true);
            xmlFile.send(null);
        } else {
            alert('Ihr Browser kann leider keine XML Datein öffenen');
        }
    }
}

Nun die HTML Datei

Code:
<html>
    <head>
        <script type="text/javascript" src="Load.class.js"></script>
        <script type="text/javascript">
            function setRequest () {
                var ajaxConfig = {
                    method:'GET',        // wie senden
                    path:'index.php',     // wohin senden
                    params:{              // weitere Parameter
                           section:'displayNames'  // $_GET['section'] = 'displayNames'
                           // weitere Parameter                           
                    }                
                }
                
                var load = new Load.ajaxContent(ajaxConfig); // Configuration mit geben
                      load.initLoad(null,allDone);      // kein Preload Layer 
                                                                  // callback funktion         
                                                                  
                /**
                * fängt Ajax Request auf
                *@param String requestvalue
                */
                function allDone (requestvalue) {
                  // hier beliebiger JS Code
                  //nun rufen wir die funktion setRequest wieder auf
                  window.setTimeout(setRequest,10000); // und zwar in ca 10 sekunden 
                }
            }
            
            window.onload = function () {
                setRequest();
            }        
        </script>
    </head>
    <body>
        <div id="testlayer">
        </div>
    </body>
</html>

Also mehr kann/will ich da nun auch nicht mehr machen , entweder bau es so ein , änder es ab oder mach etwas anderes damit. Wenn Du Ajax benutzen willst brauchst halt doch ein paar Grundlagen sonst wird das nichts.

Bei mir gehst um nen BrowserGame, dass ich versuche zu basteln, demnach werd ich also wohl JS nehmen, da die PHP-Skripte reagieren sollen, wenn der User was macht...

Ich hab da dann nur noch nen Problem mit der Flexibilität...

So wie ich AJAX verstehe, müsste ich theoretisch für jeden Request nen AJAX-Skrpt bauen...
Ich würde aber lieber nur eine JS-Funktion für den Request benutzen, der je anchdem was ihm gefüttert wird den entsprechenden PHP-Skript ansteuert und die Antwort entsprechend verarbeitet...

Um AJAX an sich zu benutzen brauch man ja nur nen kleinen Code-Schnipsel...
Aber wie mach ich den Flexibel... Sodass ich über diesen EINEN Code, VERSCHIEDENE Request absetzen kann, die VERSCHIEDENE Fensterteile ändern und dementsprechend auch UNTERSCHIEDLICHE PHP-Skripte(*.php-Files) ansprechen?

Naja man kann in JavaScript OOP Programmieren wenngleich sich da die Meinungen scheiden, also Funktionen leiten sich von Object ab , somit sind Funktionen auch Funktionsobjekte.

Mit var xyz = new Functionname(); machst Du aus der Funktion eine Konstruktorfunktion und speicherst eine Instanz von der Funktion ab. Das ist das gleiche was in meinen Script oben passiert , nur das dieses etwas kompakter ist auch schon älter naja.

Mit new Load.ajaxContent() bilde ich eine Instanz von dem Funktions Objekt ajaxContent() welche im Object Load liegt.
Ich habs nur Load genannt da es mehere Dinge zusammen fasst wie ein Container.
Was das Load.ajaxContent() erwartet ist wieder rum ein Object , dort gebe ich an was wichtig zu wissen ist für den Ajax Request. Wohin soll es gehen (path) , wie soll es gesendet werden (method) , welche Parameter (Object params).

in Form eines Objekts

Code:
var ajaxConf = {
    method:'GET',
    path:'index.php', // das ginge auch path:'buxtehude.php?name=dieter&xyz=3'
    params:{
         section:'displayNames',
         id:2
    }
}

Was dann ankommt kann man sich ungefähr so vorstellen.

index.php?section=displayNames&id=2

Davon kann ich mir nun x beliebig viele erstellen.

Mit Load.ajaxContent().initLoad() starte ich das ganze dann. in der Methode gebe ich noch zusätzlich eine Callback Methode an (da muss man in der Doku mal nach function.call() suchen ).

Das soll heissen ist mein Ajax Request gesendet und PHP hat mir die notwendigen Daten gesendet , startet er die Callback methode das kann eine Funktion sein die man frei definiert hat und dem übergebe ich dann noch die Rückgabe Werte von PHP.Die Funktion muss auch nicht immer den selben Namen haben. Da kannst sonstwas rüber schubsen.

Somit könntest Du x beliebig viele Instanzen der Funktion haben und jede hätte ihre eigenen Werte.Er würde das dahin schicken wohin du sagst er soll es dort hin schicken sofern es sich auf deinen eigenen Webserver befindet. Andere Server kann man mit Ajax nicht kontaktieren.

Gibt es auch einiges lesenswertes dazu OOP in JavaScript , bei Wikepedia hab ich was gefunden und auf einschlägigen Webseiten. Einfach mal OOP Javascript bei Google reinwerfen.
 
Zuletzt bearbeitet:
Ahh... Thx Flips ich schau da ma nach...
Parallele zu dem was ich weiß is die OOP in PHP mit verwendung von Klassen...
Und da die syntaktische Logik bei Programmiersprachen immer sehr ähnlich ist, werd ich das wohl hinbekommen ;)

Im endeffekt bastel ich mir dann ja auch nen eigenes AJAX Framework!?
 
Ahh... Thx Flips ich schau da ma nach...
Parallele zu dem was ich weiß is die OOP in PHP mit verwendung von Klassen...
Und da die syntaktische Logik bei Programmiersprachen immer sehr ähnlich ist, werd ich das wohl hinbekommen ;)

Im endeffekt bastel ich mir dann ja auch nen eigenes AJAX Framework!?

Naja JavaScript ist da nen bissel speziell man darf das nicht mit dem üblichen OOP vergleichen wie von PHP / Java / C++ oder sowas, also prinzipiell gilt jedes Objekt erbt von Object. Array , Date , Math etc ... auch Funktionen.

Darum kann man diese Dinge auch über prototype erweitern da dieses von Object vererbt wird.Gibt da noch mehr Eigenschaften die von Object vererbt werden aber das ist erstmal nebensächlich.

Crashkurs hier mal flott.

Code:
function meineFunc () {

   alert(this.constructor); // gibt  meine Func aus

   //private methode 
   function methode1 () {
   }

   // privilegierten Methode sowas wie public
   this.methode2 = function () {
   }

}

// nicht privilegierte Methode
meineFunc.prototype.methode3 = function () {
}

// meine Func wird nun zu einer Konstruktor Funktion.
var mf = new meineFunc(); 
mf.methode2(); // klappt
mf.methode1(); // klappt nicht methode1 ist nicht sichtbar

//methode3 brauch keine Instanz von meineFunc
meineFunc.prototype.methode3(); // klappt

Vererbung falls notwendig bei der kleinen Ajax Funktion wohl eher nicht

Code:
function meineFunc () {
    function meineFunc1() {
    }

    this.meineFunc2 = function () {
    }
}

function subFunc1 () {
} 
/*
* subFunc hat nun Zugriff auf alle previligierten Eigenschaften 
* Methoden.
* Achtung ! meine Func wird aber nun genau einmal ausgeführt
*/
subFunc1.prototype = new meineFunc();

var subF = new subFunc1();
subF.meineFunc2();

Überschreiben kannst Methoden in der Kindklasse indem Du in der Kind Methode eine öffentliche Methode der Elternklasse überschreibst. Wie üblich halt ;)

Konstruktor

Code:
function meineFunc1 () {
}

/**
* subFunc2 kennt alle öffentlichen Methoden / Eigenschaften 
* meineFunc1
* constructor verweist  auf meineFunc1
*/
function subFunc1 (param1,param2) {
   alert(param1+"    "+param2);
}
subFunc1.prototype = new meineFunc1();

/**
* subFunc2 kennt alle öffentlichen Methoden / Eigenschaften 
* von subFunc1 und meineFunc1
* constructor verweist auf meineFunc1
*/
function subFunc2 (p1,p2) {
   this.constructor(p1,p2);
}
subFunc2.prototype = new subFunc1();

/*
* p1 und p2 werden niemals in subFunc1 ankommen
* der Konstruktor ist das meineFunc1 somit muss man den 
* Konstruktor überschreiben
* Google Prototypen Kette
*/
subFunc2.prototype.constructor = subFunc1;

Das mit der Prototypen Kette muss man sich so vorstellen , subFunc2.prototype verweist auf subFunc1.
subFunc1.prototype auf meineFunc1.
meineFunc1.prototype auf Object

Object ist das Ende der Nahrungskette und die Konstruktor Funktion ist jene die auf Object verweist und über Object ist nix mehr.

Nen eigenens Framework baust damit nun nicht gleich , ich mein es kommt natürlich darauf an wie komplex du das nun machst , Prototype Framework und wie sie alle heißen können schon ein wenig mehr ;).
 
Zuletzt bearbeitet:
Naja das POST oder GET ist nur die Art der Übertragung , GET ist sozusagen alles was über die URL mitgeliefert wird nach dem ?foo=bar&x=y... etc.

Bei Post werden die Daten direkt mit über den Header versand soweit ich weiß , bietet somit eine größere Datenmenge zur Übertragung an des weiteren ist POST auch sicherer da man die Werte nicht direkt sieht so genau kenn ich mich nun mit POST auch nicht aus wollte mich demnächst aber mal damit beschäftigen ;) .

Wie du es sendest ist eigentlich egal , nur solltest dann auf PHP Seite auch nach den richtigen Wert schaun.
 
Setz dazu doch einfach den Request mit Ajax ab und lass durch den Request dann den PHP-Skript ansprechen, der die MySQL prüft... Wenn der PHP-Skript was neues findet, dann holt er es und schickt es mit den Request zurück, wo JS es dann verarbeitet, ansosnten kommt nix zurück und nix passiert ^^

Is doch nicht sonderlich kompliziert, oder!?
 
Zurück