Inhalt aktualisieren nach 10 sek ohne reload

Hallo,

das funktioniert mit Ajax. Vom Prinzip her schauts so aus - du schickst mit Javascript einen http Request ab - wertest die Antwort aus - und änderst mittels Javascript Dom das Aussehen deiner Seite. Zum Glück gibt es zahlreiche AJAX Frameworks, die dir den großteil der Programmierarbeit abnehmen. Einfach mal danach googeln, dann findest du sicher etwas für deine Anforderungen passendes.
 
Hallo,

ich glaube (fürchte) nicht, dass ich dich falsch verstanden habe. Wenn du den den Inhalt deiner Seite wirklich alle 10 Sekunden aktualisieren (neue Daten anzeigen zb. aus einder Datenbank) willst ohne diese neu zu laden, funktioniert das leider nur so umständlich wie ichs dir beschrieben habe - und hier bist du einfach viel schneller wenn du so ein AJAX Framework verwendest. Man kann natürlich auch alles selbst coden, das braucht allerdings relativ lange.
Nicht so kompliziert ist es wenn du deinen Inhalt alle 10 Sekunden ändern willst und alle Inhalte schon zum Zeitpunkt des Seitenaufrufes bekannt sind. - Meinst du vielleicht das?
 
Naja da brauch man nicht wirklich gleich nen komplettes JavaScript Framework wegen so nen bissel.

Fakt ist man muss dann alle 10 sekunden einen Request zum Server senden. B man brauch Ajax.

Aber nen Framework für 80 - 100 Zeilen Code ? Das halte ich dann wirklich langsam für Übertrieben.
Will hier nun nicht sagen das die Frameworks schlecht sind , aber da sollte man wirklich den Nutzen abwägen den man davon hat.

Ich selber nutze diese Load Klasse die ich mir selber zusammen gebaut habe:
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 
                    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);
                
                /*
                                            * 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');
        }
    }
}

/*
* 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:'index.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);
}

Wesentlich schmaler und schlanker als nen ganzes Framework , oki nen Framework kann noch wesentlich mehr.Aber für normales Ajax/Bilder reicht mir das völlig aus Preloader hab ich dazu auch noch rumliegen.
 
FipsTheThief hat gesagt.:
Naja da brauch man nicht wirklich gleich nen komplettes JavaScript Framework wegen so nen bissel.

Fakt ist man muss dann alle 10 sekunden einen Request zum Server senden. B man brauch Ajax.

Aber nen Framework für 80 - 100 Zeilen Code ? Das halte ich dann wirklich langsam für Übertrieben.
Will hier nun nicht sagen das die Frameworks schlecht sind , aber da sollte man wirklich den Nutzen abwägen den man davon hat.
Zum Vergrößern anklicken....

Das sehe ich ähnlich wie du. Allerdings denke ich, dass jemand der mit Ajax bis lang noch nichts zu tun hatte mit einer Framework mit Dokumentation schneller geholfen ist. Schnellerer, schlankerer Code oder kürzere Entwicklungszeit ist glaub ich nicht so als allgemein richtig oder falsch in die eine oder die andere Richtung zu beurteilen, schon gar nicht wenn man die Vorkenntnisse des Programmierers nicht kennt.
 
Da geb ich Dir natürlich recht Hans Jörg , im Falle eines Programmieres welcher mit JavaScript nun gar nix zu tun hatte bisher ist das wohl der schnellste und effektivste Weg wobei die Frameworks auch nicht so ganz ohne sind.

Das Prototype Framework , Mojo und wie sie alle heißen sind wirklich nicht schlecht und können eine ganze Menge und spart in der Zeit. Aber es ist ein wenig so wenn ich ein Gästebuch brauch und gleich Typo 3 nehme dafür.

Der Puntk den ich mein Ajax Tutorials gibt es wirklich wie Sand am Meer inzwischen und die hat man in 1 - 2 Tagen durch geackert , da kann man sich für den Fall auch einfach das Tutorial Endprodukt nehmen und das rein kopieren würde auch erstmal klappen wenngleich es eine etwas unschöne Lösung ist, und so kompliziert ist das wirklich nicht , Ajax bietet einen ja nur eine Schnittstelle zum Server, das ganze drum herrum ist viel übler dann.

Für andere Dinge wie Warenkörbe die dynamisch sein sollen , oder Menus etc etc da könnte man das wirklich schon überlegen so ein Framework zu nutzen wenn man nicht selber die Erfahrung oder das Wissen in JS aufweist um das schnell fertig zu haben.

MfG
 
Zuletzt bearbeitet:
Mahlzeit...
Ich hab grad ma google zu dem Thema hier befragt, da ich ähnliches auch verwenden möchte...

Dabei bin ich auf !2! FrameWork Lösungen gestossen...
Eine auf JavaScript und eine auf PHP...

Wo liegen die Unterschiede und was ist besser?
 
Der wichtigste Unterschied ist folgender , PHP läuft auf dem Server und JavaScript auf dem Client.

Also man muss sich die Rheinfolge hier so vorstellen .

PHP -> HTML (DOM) -> JavaScript.

Wenn das Framework in PHP natürlich in der Lage ist an den Client eine Meldung zu senden "hey hier ist was neues" wäre das natürlich schon ziemlich cool , soweit ich weiß arbeiten sie an sowas im Ajax Bereich das der Server den Clienten anspricht und nicht umgedreht.

Aber meines Wissens geht dieses nun noch nicht im Bereich JavaScript/Ajax somit ist allso für diese Lösung die hier angestrebt wird ist das JavaScript Framework wohl eher die richtige Wahl, da der Client anfragen muss ob was neues da ist oder seine aktualisierten Daten an den Server senden muss.

Da dieses nur zur Laufzeit passieren kann ist PHP schon mal aus dem Spiel und JavaScript das Objekt unserer Begierde.
 
Mhm wie falsch bei mir klappt es immer prima ;)

Ich hab mir nun leider vor ca 3 Tagen Linux zum ersten mal installiert und schau da selber noch wie ein Schwein ins Uhrwerk , also hab ich nun leider noch keinen Server hier mit PHP.

Aber hier mal so wie ich das in der Regel dann mache.

Code: 
<html>
    <head>
        <script type="text/javascript" src="Load.class.js"></script>
        <script type="text/javascript">
            window.onload = function () {
                var ajaxConfig = {
                    method:'POST',        // wie senden
                    path:'index.php',     // wohin senden
                    params:{              // weitere Parameter
                           section:'displayNames',
                           parameter2:'irgendwas',
                           parameter3:'irgendwas2'	                
                    }                
                }
                
                var load = new Load.ajaxContent(ajaxConfig); // Configuration mit geben
                        load.initLoad(null,getAjaxContent);      // kein Preload Layer 
                                                                 // callback funktion                
            }        
            
            function getAjaxContent(returnvalue) {
                document.getElementById('testlayer').innerHTML = returnvalue;            
            }
        </script>
    </head>
    <body>
        <div id="testlayer">
        </div>
    </body>
</html>

und das ganze geht dann zu diesem PHP Script:

PHP: 
<?php
    if(isset($_POST['section'])) {
        switch($_POST['section']) {
            case 'displayNames':
                echo getNames();
            break;
            case 'dosomecoolstuff':
                echo "öhm naja was anderes halt";
            break;
            default:
                echo 'jo im Westen nix neues';
        }
    }
    
    
    function getNames () {
        $namen = array('Herbert','Dieter','Paul','Manfred');
        $list  = '<ul>';    
        for($i = 0;$i < count($namen);$i++) {
            $list .= '<li>'.$namen[$i].'</li>';
        }
        $list .= '</ul>';
        
        return $list;
    }
?>

So spontan nun ungetestet , aber das ist der übliche Weg wie ich das Script nutze.
 
Zuletzt bearbeitet:
Na ob Du es so lassen willst bleibt dir überlasen , natürlich aktualisiert die sich nun nicht automatisch. Alles was passiert ist folgendes , sollte das HTML Dokument fertig geladen worden sein wird ein Request an den Server gesendet.

Das PHP Script verarbeitet die POST Daten nun und gibt uns die zugehörigen Werte zurück , das alles trifft in der Callback Methode ein und wird dann in den DIV mit der ID testlayer eingefügt.

Das was du meinst ist dann pollen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück