dynamische html Seite mit Ajax

[erdmulch]

Hallo zusammen,
ich bin absoluter Ajax bzw Jqery Anfänger. Habe folgendes Problem: Ich würde gerne daten aus einer Datenbank auslesen und diese auf einer html Seite darstellen. Kann mir jemand sagen was ich dazu alles benötige? brauche ich da einen Webserver? oder geht es auch ohne? wie gesagt, die daten sollten alle 5sec akualisiert werden und an einer Weboberfläche dargestellt werden

 

[FoXMorayn]

dazu benötigst du einen fachmann ;)

eine alternative dazu wär sich ein wenig mit den grundlagen zu beschäftigen. dazu solltest du klären was html,javascript,css,php und mysql ist. das sind die klassichen mittel für so ein vorhaben.

gruß

 

[erdmulch]

darum frag ich ja :-)
mal im ernst, kennt jemand vielleicht ein gutes Buch oder einen guten Link?
hab selber auch schon geschaut, leider ohne den gewünschten erfolg

 

[bodil]

In aller Kürze: Dein Ajax läuft im Browser des Seitenbesuchers. Es kann auf Daten zugreifen, die der Server in aufbereiteter Form (xml? json?) zur Verfügung stellt. Das muss der selbe Server sein, der auch den Rest der Website zur Verfügung stellt. Zum Zurverfügungstellen der Daten brauchst du eine Sprache, die auf dem Server läuft, z.B. php.
Den Wert dann alle 5 Sekunden zu aktualisieren, machst du dann wieder im Browser mit js also ggf. mit jquery.
Wenn du in deinem Browser nach "jquery ajax" googelst, bekommst du ganz gute Links ...

 

[scbawik]

Eine ganz einfache Variante mit jQuery (aber nicht unbedingt optimale):

Du erstellst eine Seite mit PHP und HTML die die Daten ausgibt. Jetzt nimmst du einfach die jQuery-Funktion 'load' (.load() – jQuery API) her und lädst den Teil der Seite, der die dynamischen Daten enthält und ersetzt deinen 'alten' Inhalt damit. Dabei kannst du auch den 'aktuellen' Inhalt der Seite laden, auf der du dich gerade befindest. So zB:

HTML:

<div id="wrapper">
     <div class="content">Ich bin dynamischer Inhalt!<br />Stand: <?= date('H:i:s') ?></div>
</div>

jQuery:

$('#wrapper').load(window.location + ' .content',function () {});

Wenn du die 'load'-Funktion jetzt noch in einen Intervall mit 5 Sekunden packst, sollte das Div-Element '.content' ungefähr alle 5 Sekunden aktualisiert werden.

Habe den Code jetzt nicht getestet aber sollte korrekt sein.

Hoffe du kannst etwas damit anfangen. Ansonsten wie @bodil sagte, frag Google mal nach 'ajax jquery'. Ich kann dir allgemein bei der Weiterbildung außschließlich Google (oder Bing wenn's dir lieber ist ;) ) ans Herz legen. In den ersten 10 Ergebnissen findest du immer eine Hilfe. Maßgeschneiderte Lösungen darfst du dir eben nicht erwarten.

PS: Aus Büchern konnte ich nie lernen, meist waren diese technisch veraltet kurz nachdem ich sie gekauft habe, oder sie enthielten keine praxisnahen Beispiele.

 

[erdmulch]

Hallo zusammen,
ich bin gerade dabei eine Wetterstation zu bauen. Ein Microcontroller sendet die Daten an eine Datenbank. Die Daten werden dann von einem Python
Programm ausgelesen und auf einer Webseite dargestellt, was auch sehr gut funktioniert. Nun ändern sich die Temperaturen. Bisher ist es so, dass ich die
Internetseite neu aktualisieren muss. Nun will ich dies mit Ajax oder Jquery umgehen. Hab da auch schon etwas programmiert wie man unten sehen kann.
Leider wird die Seite nicht aktualisiert kann mir jemand sagen was ich falsch mache? wäre für jeden Hinweis sehr dankbar :-)
mit der setInterval("handleContent();", 2000); Methode müsste doch die Datenbankabfrage alle 2sec erfolgen oder?

var xmlHttpObject = false; 
if (typeof XMLHttpRequest != 'undefined')  
{ 
    xmlHttpObject = new XMLHttpRequest(); 
} 
if (!xmlHttpObject)  
{ 
    try 
      { 
        xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    catch(e)  
    { 
        try  
        { 
            xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        catch(e)  
        { 
            xmlHttpObject = null; 
        } 
    } 
} 
 function handleContent() 
{ 
    if (xmlHttpObject.readyState == 4) 
    { 
        document.getElementById('myContent').innerHTML = xmlHttpObject.responseText; 
    } 
} 
 setInterval("handleContent();", 2000); 
 
 
 
{% for article in latest_articles_list %} 
   
      
      {{article.title}} 
      
   
{%endfor%}

 

[Tronjer]

Hast du mal mit alert überprüft, ob dein setInterval() überhaupt funktioniert?

Ich selber nutze für Intervalle den rekursiven Aufruf der Funktion mit setTimeout()

function myFunction ()
{
   // tu was
   ..............

   setTimeout("myFunction()",2000);
}

 

[bodil]

Ich würde auch setTimeout benutzen. Und ich würde »window.« davorschreiben:

window.setTimeout("handleContent();", 2000);

 

[erdmulch]

hallo nochmals,
wie es aussieht habe ich irgendwo einen kleinen syntax Fehler und komme nicht drauf.
es sieht so aus, als würde er die Funktion nur einmal aufrufen, kann aber nicht sagen warum :-(
vielleicht kann mir doch noch jemand helfen
vielen Dank im voraus

 

[bodil]

Hast du nochmal ne aktuelle Version deines Codes für uns? Oder gar ne Fehlermeldung?

 

[erdmulch]

Hier ist nochmals der Code

var xmlHttpObject = false; 
if (typeof XMLHttpRequest != 'undefined')  
{ 
    xmlHttpObject = new XMLHttpRequest(); 
} 
if (!xmlHttpObject)  
{ 
    try 
      { 
        xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    catch(e)  
    { 
        try  
        { 
            xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        catch(e)  
        { 
            xmlHttpObject = null; 
        } 
    } 
} 
function handleContent() 
{ 
    if (xmlHttpObject.readyState == 4) 
     { 
        document.getElementById('myContent').innerHTML = xmlHttpObject.responseText; 
    } 
} 
window.setTimeout("handleContent();", 2000); 
 
 
 
 
 
{% for article in latest_articles_list %} 
   
      
      {{article.title}} 
      
   
{%endfor%}

 

[FoXMorayn]

mit phyton kenn ich mich nicht so genau aus, aber wenn das javascript auf einer webseite laufen soll, vermisse ich irgendwie den event listener onreadystatechange und ein open.

xmlHttpObject.open("POST", "daten.py", true);
xmlHttpObject.onreadystatechange = handleContent();

edit: das setInterval sollte auch als listener gehen, habs bisher noch nicht so gesehen.

 

[Tronjer]

es sieht so aus, als würde er die Funktion nur einmal aufrufen, kann aber nicht sagen warum :-(

Weil du setTimeout() nicht rekursiv aufrufst. Dein Code führt die Funktion nach zwei Sekunden einmal aus.

 

[erdmulch]

mal ein ganz andere bzw. grundsätzliche frage, muss ich eine py datei oder aber die html Seite aufrufen?

 

[bodil]

Die Seite, auf der die Daten stehen, die du abrufen willst ...
Was ich überhaupt nicht verstehe: Warum baust du da dieses try-catch-Geraffel ein? Dafür gibt es doch eigentlich Frameworks (z. B. jquery) die sehr sicher laufen und dir all das abnehmen. Dann ist dein Code noch ein Dreizeiler. Das vereinfacht auch das Debugging, nicht nur für dich, auch für alle anderen, die versuchen dir zu folgen ...
(Also nicht dass das falsch verstanden wird: Meine Hochachtung für alle, die aus dem Ärmel schütteln, wie das JS der einzelnen Browser so tickt. Aber wer sich das nur c&p ins Skript holt ohne es zu verstehen, ist mit jquery vermutlich besser bedient. Und alle anderen doch eigentlich auch, oder?)