# Inhalt aktualisieren nach 10 sek ohne reload



## =fire= (11. Februar 2008)

bitte löschen!


----------



## hans jörg (11. Februar 2008)

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.


----------



## hans jörg (11. Februar 2008)

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?


----------



## FipsTheThief (11. Februar 2008)

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:

```
/**
* 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.


----------



## hans jörg (11. Februar 2008)

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.
> 
> ...



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.


----------



## FipsTheThief (11. Februar 2008)

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


----------



## Chaosengel_Gabriel (11. Februar 2008)

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?


----------



## FipsTheThief (11. Februar 2008)

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.


----------



## FipsTheThief (12. Februar 2008)

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.


```
<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
    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.


----------



## FipsTheThief (12. Februar 2008)

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.


----------



## FipsTheThief (12. Februar 2008)

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.


```
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);
```


----------



## FipsTheThief (12. Februar 2008)

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


----------



## FipsTheThief (13. Februar 2008)

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 


```
<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.


----------



## FipsTheThief (13. Februar 2008)

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.

```
/*
* 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.


----------



## Chaosengel_Gabriel (14. Februar 2008)

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?


----------



## FipsTheThief (14. Februar 2008)

Okay Firesymon hier noch einmal für Dich nun.

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


```
/**
* 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 


```
<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.



Chaosengel_Gabriel hat gesagt.:


> 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...
> 
> ...



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 


```
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.


----------



## Chaosengel_Gabriel (15. Februar 2008)

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!?


----------



## FipsTheThief (16. Februar 2008)

Chaosengel_Gabriel hat gesagt.:


> 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.


```
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


```
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 


```
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 .


----------



## FipsTheThief (19. Februar 2008)

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.


----------



## Chaosengel_Gabriel (25. Februar 2008)

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!?


----------



## Chaosengel_Gabriel (29. Februar 2008)

a)Es gibt reichlich Tutorials im Web...

b)Das Hauptsächliche wurde bereits genannt...

c)Ist das was du machen willst mit dem testen der SQL IST PHP...

d)Einfacher Weg: Client(nach neuen Daten guggen) -> Server(überprüfe die Datenabnk nach neuen Daten IF(neue Daten vorhanden) {den ganzen Rotz nochmal ausgeben} else{nichts tun und nichts ausgeben}) ->neue Daten an den Client -> Client(Input verarbeiten IF(neue Daten){ändern der Elemente} else{nichts tun})


----------

