Søg
Avatar billede wolfgang Praktikant
17. august 2006 - 11:42 Der er 11 kommentarer og
1 løsning

Hent og opdater indhold i DIV med AJAX

Hej Eksperter,

Jeg vil meget gerne kunne hente indhold fra en ASP-fil og ligge det i et DIV på min side. Derudover skal DIV'et også opdateres automatisk hvert 5 min., uden at reloade hele siden, men kun div'et.

Som jeg forstår det, vil AJAX-teknikken kunne løse ovenstående, men jeg har forgæves søgt på løsninger til mit problem.

Jeg håber der er nogle af jer, der kan hjælpe mig med lærer noget nyt.

Med venlig hilsen
Henrik
Avatar billede fennec Nybegynder
17. august 2006 - 11:53 #1
Har du tjekket tut'en på w3schools:
http://www.w3schools.com/ajax/
Avatar billede wolfgang Praktikant
17. august 2006 - 12:29 #2
Hej Fennec, Jeg har med stor interesse og nysgerrighed gennemset W3Schools materialet på emnet, men har ikke kunne den store hjælp omkring automatisk refresh/reload af den externe fil.

Har du et bud på en samlet løsningsmodel?

Med venlig hilsen
Henrik
Avatar billede fennec Nybegynder
17. august 2006 - 12:51 #3
Automatisk kørsel skal ske med setTimeout og et kald til egen funktion:

<div id="denneDiv"></div>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function doIt()
{
  dato = new Date()
  document.getElementById('denneDiv').innerHTML = dato.getSeconds()
  window.setTimeout("doIt()", 1000)
}
window.setTimeout("doIt()", 1000)
//-->
</SCRIPT>

Du skal så bare have sat timeren op (ændre 1000 til 300000), og have et AJAX script til at hente det der skal smides i div'en.
Avatar billede fennec Nybegynder
17. august 2006 - 12:52 #4
Mere rigtig er det at lave det sådan, så det er onLoad der starter funktionen:

<body onLoad="doIt()">
<div id="denneDiv"></div>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function doIt()
{
  dato = new Date()
  document.getElementById('denneDiv').innerHTML = dato.getSeconds()
  window.setTimeout("doIt()", 1000)
}
//-->
</SCRIPT>
Avatar billede olebole Juniormester
17. august 2006 - 13:18 #5
<ole>

Prøv at søge lidt på Google - der er mange andre tuts, der omhandler Ajax ... og de kan kun blive bedre. w3schools.com er generelt fyldt med fejl, mangler og udeladelser - og hans Ajax-tut er rent ud sagt elendig.

Hele idéen med Ajax er at hente de rå data på serveren (i XML- eller JSON-format) og derefter foretage al markup-formateringen på klienten. Der er forhåbentlig ingen andre, der sender en HTML-streng retur til klienten  ;o)

/mvh
</bole>
Avatar billede fennec Nybegynder
17. august 2006 - 13:59 #6
olebole >>
Jeg må nok inrømme at jeg en enkelt gang har lavet kode, som sender en HTML-streng retur. Skulle bruge det til en spas side, hvor jeg ændrede i en vens kode, så det blev lidt sjovere :o)

Vi kan så godt blive enige om, at det ikke er Ajax kode længere, men der er vel ikke noget galt i at benytte XMLHttpRequest til det.
Avatar billede wolfgang Praktikant
17. august 2006 - 14:16 #7
Hej, Jeg holder mig lige uden for denne debat...

-> Fennec, hvorledes skal jeg bringe XMLHttpRequest "funktionen" ind i dit forslag.
Jeg antager at det er den måde, min eksterne asp fil indlæses på.

Glæder mig til at høre nærmere.

MVH
Henrik
Avatar billede olebole Juniormester
17. august 2006 - 14:55 #8
fennec >> Nej, der er absolut intet i vejen for at bruge XMLHttpRequest - det er faktisk det X'et i Ajax står for (Asynchronous JavaScript And XMLHttpRequest) ... så det må nærmest betegnes som en nødvendighed  ;o)

Når man returnerer data, kan disse til gengæld returneres enten som XML - eller som JSON (JavaScript Object Notation), som jeg langt foretrækker, da det er direkte anvendeligt i JS.
Mere om JSON: http://www.json.org/
Avatar billede olebole Juniormester
17. august 2006 - 15:09 #9
Man kan f.eks. også lave en ASP-fil, som man kalder som en JS-fil:

<script type="text/javascript">
var oScriptLoader = oHead = null;
function loadScript() {
    if (oScriptLoader) oHead.removeChild(oScriptLoader);
    oScriptLoader = document.createElement("script");
    oScriptLoader.setAttribute("type", "text/JavaScript");
    oScriptLoader.setAttribute("src", "http://www.domain.dk/fil.asp");
    oHead.appendChild(oScriptLoader);
}
function write2div(myArgument) {
    // Kode, der skriver data ind i div'et
}

window.onload = function(){
    oHead = document.getElementsByTagName("head")[0];
    setInterval("loadScript()", 10000); // Kald hvert 10. sekund
}
</script>

- i dokumentet 'fil.asp', skrives så et kald til funktionen 'write2div' - som forsynes med f.eks. et data-array som argument. Funktionen 'write2div' skriver så data ind i div'et.

Funktionen 'loadScript', som henter javascriptet, køres hvert 10. sekund.
Avatar billede wolfgang Praktikant
17. august 2006 - 15:43 #10
Hej OleBole, Tak for dit forslag.

Hvis jeg, som test, blot vil udskrive now() - altså dato/tid, hvordan skal dette så placeres i min fil.asp og mit hoveddokument?

Glæder mig til at høre fra dig.
Avatar billede wolfgang Praktikant
19. august 2006 - 10:51 #11
Hej igen, Jeg har selv fundet en yderst brugbar løsning på min udfordring.

function getInfo(){
   
        var request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); 
        request.onreadystatechange = function()
            {
            if(request.readyState == 4)
                {
                document.getElementById('theid').innerHTML = request.responseText;
                }
            }
        request.open("GET", "getTime.asp", true);
        request.send(null);
        setTimeout("js_getInfo()",3000);
    }


<script>getInfo()</script>
Avatar billede olebole Juniormester
21. august 2006 - 13:56 #12
Ja, det kan du også ... men der er ingen grund til at bruge XMLHttpRequest, når der ikke er specifik grund til det.

F.eks. er kun de aller seneste Opera'er i stand til at bruge XMLHttpRequests - hvorimod du skal rigtig langt tilbage, før du støder ind i en browser, der ikke kan indskrive et script-element via DOM  ;o)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 01:57 Tjek alle checkbox i form Af bsn i ASP
I går 21:35 Lidt simpel (håber jeg) Photoshop hjælp Af fcs i Billedbehandling
16/0516:04 Canon printer vil ikke udskrive farver Af mort1 i Printere
16/0514:50 Hvilket fabrikat af Mesh systemer virker? Af fkj i Wifi
15/0513:45 AJAX kode -javascript Af Asky i Programmeringsværktøjer
White papers
Flere white papers »