Avatar billede alm7100 Nybegynder
02. maj 2009 - 11:55 Der er 5 kommentarer og
1 løsning

Hjælp med ajax programmering..

Hejsa.
Jeg er total ny i js og ajax, kan do lidt js.

Nu mit problem.
Jeg har en embettedwebserver, hvor i jeg kan uploade html filer.
Det virker fint :-)
Denne webserver har nogle tags, f.eks %F10 blive erstattet af teksten On eller Off an på tilstanden på en af dens port bits.
Denne tekst bruger jeg til at hente et billede ind, og få det vist på en html side, dette virker også fint.
Men
Ja her kommer det, for at kunne overvåge tilstandet af denne port er jeg nødt til at reloade siden, (alså selv lade browserne reloade siden), dette kunne jeg godt tænke mig at kunne lave med Ajax i JS, så det kun er billedet der skifter. Og ikke helesiden der skiftes / blinker hvergang den genindlæses.

Det er vigtigt at løsningen fylder så lidt som mulig, da jeg kun har begrændste plads til html filerne i denne webserver.

Håber der er en / flere venlige sjæle der vil hjælpe mig med dette problem.
MVH
Allan
Avatar billede Hardball21 Nybegynder
02. maj 2009 - 21:51 #1
ok, dette kan gøres på flere måder og Jeg kender ikke din side struktur (er den bygger i tabeller, <DIV>'s ....) men her er et par punkter som du kan tænke over:

- hvert billede skal findes i et definerbart område på siden (f.eks. <div></div>)
- området skal være unikt navngivet med et ID=
- det fylder ikke meget at tilføje AJAX til en side, kan nemt gøres med 10 linier JS. Der kommer også noget extra JS på hvert af dine links (f.eks. onClick="return IndlaesBillede(123);")


Giv mig lidt mere information at tygge på, så kan Jwg forhåbentligt pege dig i den rette retning.
Avatar billede alm7100 Nybegynder
03. maj 2009 - 09:27 #2
Hejsa Hardball21

Min data ud, ser sådan ud.
function showdoorstatus()
{
dw('<table border=1>');
dw('<tr><th colspan=2>Status: Døre.</th></tr>');
dw('<tr><td width=80>'+navnF0+'</TD><TD><img src="door%f10.gif" border=0></TD></tr>');
dw('<tr><td>'+navnF1+'</TD><TD><img src="door%f11.gif" border=0></TD></tr>');
dw('<tr><td>'+navnF2+'</TD><TD><img src="door$f12.gif" border=0></TD></tr>');
dw('<tr><td>'+navnF3+'</TD><TD><img src="door$f13.gif" border=0></TD></tr>');
dw('<tr><td>'+navnF4+'</TD><TD><img src="door$f14.gif" border=0></TD></tr>');
dw('<tr><td>'+navnF5+'</TD><TD><img src="door$f15.gif" border=0></TD></tr>');
dw('<tr><td>'+navnF6+'</TD><TD><img src="door$f16.gif" border=0></TD></tr>');
dw('<tr><td>'+navnF7+'</TD><TD><img src="door$f17.gif" border=0></TD></tr>');
dw('</table>');
}


der er det at $f17 enten kan være on eller off alså så grafikbilledet kommer til at hedde dooron.gif eller dooroff.gif

Så det er det jeg gerne vil have til at forandre sig, og kun det, så hele siden ikke skal indlæses hvergang.
MVH
Allan
Avatar billede Hardball21 Nybegynder
03. maj 2009 - 13:40 #3
ok, så hvis Jeg forstår det korrekt er det kun et billede ad gangen der skal ændres (f.eks. door$f17.gif)?

Næste spørgsmål: hvordan bliver ændringen sat i gang? skal du trykke på et link eller har du en anden trigger?

Du kan jo bruge AJAX på flere måder - f.eks. som en del af brugerfladen afhængig af hvad brugeren gør .. eller hvor du konstant har en asynkron forbindelse til et andet script som løbende føder siden med informationer.
Avatar billede alm7100 Nybegynder
03. maj 2009 - 16:35 #4
Hejsa

Nej jeg ved ikke hvilket et af billederne der er blevet ændret, Det kan være fra $f10 til $f17 Det er der ingen der ved, kommer jo helt an på hvilken dør der aktuelt er åben/lukket.

Som jeg skrev i det første indlæg, er det en refrash der gen indlæser siden. Så det vil i praktisk sige at man egentligt kan "misse" en dør åbning / lukning, hvis ham der åbnet døren er hurtig nok. Så derfor kører jeg med en refresh af siden på 2 sekunder.

MVH
Avatar billede Hardball21 Nybegynder
03. maj 2009 - 20:46 #5
så faldt 10´øren ...

Det er altså webserveren der erstatter $1x værdierne i HTML dokumentet.

For at kunne udnytte dette skal du lave en side som bare formaterer $ værdierne så kan du bruge ajax og js til at aflæse disse og agere derefter.

"status.html" kunne meget simpelt bare være:
<html><body>|$10|$11|$12|$13|$14|$15|$16|$17|</body></html>

Uden at skrive hele din JS (med mindre du kan vente et par uger før jeg er hjemme igen)
vil AJAX delen se ud nogenlunde som dette:

<script language="JavaScript" type="text/javascript">
<!--
// ----- opsaetning af ajax ----------------
var xmlhttp = false;

// Check om vi bruger IE.
try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
    try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
        xmlhttp = false;
    } // catch
} // catch

if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    xmlhttp = new XMLHttpRequest();
} // if
// ----- opsaetning af ajax ----------------


var Status = '';

// ----- selve ajax rutinen ----------------
function IndlaesStatus() {

    // aabner forbindelsen til status siden
    xmlhttp.open("GET", 'status.html');

    // dette er en callback rutine som venter paa status siden er klar
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            Status = xmlhttp.responseText;
        } // if
    } // function

    // luk ajax
    xmlhttp.send(null);

} // IndlaesStatus
// ----- selve ajax rutinen ----------------

//-->
</script>


ok, det er jo klar der mangler noget :)
-- en js rutine til at klippe "Status" i stykker med split()
  og løbe gennem værdierne for at se hvad er ændret og
  så ændre billederne
-- en timer rutine som starter hele processen hvert andet sekund



må jeg være nysgerrig og spørge hvad det er for en enhed du roder med?



mvh
Avatar billede alm7100 Nybegynder
04. maj 2009 - 00:14 #6
Hejsa

Vil kikke lidt på det du har skrevet der.

Den jeg roder med er en SBC65EC fra modtronix.com

MVH
Allan
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester