Avatar billede miwu.tk Nybegynder
03. marts 2009 - 18:03 Der er 13 kommentarer og
1 løsning

Opdatering af div vha. AJAX

Jeg har brugt noget tid på at læse lidt om AJAX, og hvordan man evt. benytter det, men har fundet det utrolig svært. Det har hovedsagelig skyldtes at jeg ikke kender meget til JavaScripting, og mest interesserer mig for design frem for de tekniske finesser bag webdesign.

Ikke desto mindre håber jeg, at der stadig findes folk herinde, som vil give en hjælpende hånd.

Gennem diverse AJAX-relaterede spørgsmål på eksperten, har jeg kunne læse mig frem til, at en dårlig skrevet kode kan belaste andre brugere på mit webhotel og evt belaste serveren unødvendigt. Desuden får jeg også indtryk af (det Olebole har skrevet forskellige steder), at det er uhyr vigtigt med en velskrevet AJAX-kode. Jeg vil derfor gerne bede om hjælp til flg:

Jeg kunne godt tænke mig, at når jeg klikker på et "opdatér"-link, så bliver 1 div opdateret. Noget a la det her:

javascript.js:
function indhold (){
"det nødvendige script til AJAX"
}}

index.asp:
<html>
<head>
<script type="text/javascript" src="javascript.js"></script>
</head>

<body>

<a href="java script:indhold('data.asp'),('content');">opdatér</a>
<div id="content">
<!--#include file="data.asp"--> 
</div>

</body>
</html>

Jeg er godt klar over at det, jeg har skrevet ikke er "grammatisk korrekt", men forhåbentlig giver det en idé af, hvad jeg vil. Jeg ved desuden også at der opstår et problem i forbindelse med søgemaskiner, men det er ikke væsentlig for mig.
Avatar billede fizk Nybegynder
03. marts 2009 - 18:15 #1
Jeg sad engang og skulle bruge det samme...

function ajaxFunction(pageAndString, targetHTML)
{
var xmlHttp;
try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
catch (e)
    {
    // Internet Explorer
    try
    {
        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {

    switch(xmlHttp.readyState)
        {
            case 0: { break }//The request is not initialized
            case 1: { break }//The request has been set up
            case 2: { break }//The request has been sent
            case 3: { break }//The request is in process
            case 4: { document.getElementById(targetHTML).innerHTML = xmlHttp.responseText; break } // The request is ok
            default: { break }
        }
    }
  xmlHttp.open("GET",pageAndString,true);
  xmlHttp.send(null);
}

Kort fortalt, så tager funktionen to argumenter. Hvilken side der skal loades og hvilken div (id'et på div'en) der skal fyldes ud med det svar der kommer tilbage.
Som sagt, så er det noget tid siden jeg har brugt det og har fundet ud af det ikke er verdens mest elegante kode, men den virker til husbehov :)
Avatar billede majbom Novice
03. marts 2009 - 19:41 #2
du bør ikke bruge innerHTML men DOM:

document.getElementById('DIN_DIV').firstChild.nodeValue=xmlHttp.responseText;

i stedet for:

document.getElementById('DIN_DIV').innerHTML

innerHTML er ikke og har aldrig været en del af nogen gældende standarder inden for www

og så kig evt. på denne artikel:

http://dengodekode.dk/artikler/ajax/xmlhttprequest_wrapper.php

den er lidt mere tidsvarende :)
Avatar billede andreas13_fam Nybegynder
03. marts 2009 - 20:06 #3
hvis du sender med post efter du har læst dengodekode skal du huske at der skal være en
_oHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
for at det virker.
Avatar billede miwu.tk Nybegynder
03. marts 2009 - 20:54 #4
Hvordan får jeg sat den til at loade data.asp fra start? Dvs. når man besøger siden, så åbner den automatisk data.asp til at starte med.
Avatar billede miwu.tk Nybegynder
03. marts 2009 - 20:58 #5
Splazz > Når jeg bruger DOM... hvad gør jeg så fx, hvis jeg gerne vil åbne et nyt indhold i en helt 3. div?

document.getElementById('DIN_DIV').innerHTML

Det ser jo ud til at man skal fastsætte en bestemt div, hvor man vil benytte Ajax. Jeg har derfor lidt svært ved at gennemskue hvis man nu vil benytte køre med to forskellige divs.
Avatar billede miwu.tk Nybegynder
03. marts 2009 - 21:13 #6
jeg fandt selv svaret på hvordan jeg skal bære mig ad med at få den til at loade selv fra start. Man indsætter vel bare:

<script type="text/javascript" src="javascript.js">
pageFunction('data.asp', 'content')
</script>

Men det lader til at den html som min ASP generer ikke bliver vist. I stedet fremviser den bare noget, der kunne ligne kildekoden til den html, som min ASP-fil har lavet. Jeg ved ikke om det giver mening?

Min data.asp henter data fra min access database og printer den ud på siden, hvorefter jeg har tilført lidt forskellige class og styles på. Jeg ved ikke om det spiller en betydende rolle?
Avatar billede olebole Juniormester
03. marts 2009 - 22:58 #7
<ole>

Det er i udgangspunktet en fejl at HTML-formatere data på serveren. Det er i allerbedste fald 4-5 gange så belastende for serveren som at udskrive XML eller JSON (JavaScript Object Notation - Se: http://json.org og måske: http://www.eksperten.dk/guide/227 ).

Når dine data vender tilbage til browseren, parser du responsen og indsætter resultatet med DOM. Det kan du enten gøre ved at opbygge HTML-strukturen i enkeltelementer, eller ved at klone en allerede bestående struktur og indsætte data i den.

Det er ikke noget, du lærer på en weekend - og slet ikke, hvis du ikke er godt hjemme i JS/DOM.

/mvh
</bole>
Avatar billede miwu.tk Nybegynder
04. marts 2009 - 14:22 #8
Hvis det som udgangpunkt er forkert, at html-formatere data på serveren, så er det jo i princippet forkert at bruge ASP eller PHP generelt? Sådan som jeg har forstået ASP, så gennemfører den vel en række handlinger client-side, hvorefter den spytter resultatet ud til browseren - som I langt det fleste tilfælde er html.

Men det er nu ikke det, som spørgsmålet handler om. Min intention var bare, at få et løsningsforslag til mit problem.

Jeg er som sagt bare en "grafiker"... men jeg arbejder pt. på at få bedre forståelse for de tekniske webfinesser - deriblandt også javascript m.m.
Avatar billede majbom Novice
04. marts 2009 - 15:07 #9
det er ikke forkert at bruge PHP eller ASP, da det er kode der bliver kørt på serveren og det er det du har brug for. serverside-kode outputter lige præcis det du be'r den om, hvad enten det er HTML, XML, JSON eller noget helt andet. men ideen er, som ole siger, at overføre rå data med ajax. det kan så gøres ved at få din ASP/PHP-kode til at outputte xml eller json, som derefter bliver parset af dit javascript.

det er derfor ikke forkert at lave html-formateret data med ASP eller PHP, til at vise i din browser, men det bør ikke bruges i AJAX.
Avatar billede olebole Juniormester
04. marts 2009 - 16:14 #10
Løsningen på dit problem er at lære noget mere JavaScript/DOM, før du kaster dig ud i Ajax. Du skulle f.eks. sikkert også lære noget mere anatomi, hvis du ville kaste dig ud i gynækologi  ;o)

Der findes forskellige native måder at formatere data på i PHP og under ASP. Disse metoder er langt hurtigere og mindre resourcekrævende end at udskrive HTML på serveren.

Det betyder ikke, man aldrig skal bruge PHP eller ASP til at formatere HTML på serveren. Det betyder bare, det er en rigtig dårlig idé i forbindelse med Ajax - og at dén fremgangsmåde da heller aldrig var i tankerne på de, der udviklede Ajax.

Hvis du ikke er god til JavaScript, kan du heller ikke blive god til Ajax. Er du dårlig til JavaScript, så regn ikke med, du får lært Ajax det første år eller to (i hvertfald)  ;o)
Avatar billede miwu.tk Nybegynder
04. marts 2009 - 20:43 #11
Ok, jamen mange tak for hjælpen. Jeg tror dog bare at jeg dropper det helt eller benytter en iframe-løsning i stedet. Før jeg skrev spørgsmålet havde jeg godt nok en idé om, at det ville blive en bøvlet fremgangsmåde at give sig i kast med.

Jeg vil egentlig bare designe hjemmesider, men desværre hænger design og funktion sammen, hvis et site kan gå op i en højere enhed. Hvis jeg skulle bruge 1-2 år for at kunne opdatere en div, så springer jeg hellere over på nuværende tidspunkt. For mig svare det til at studere spansk, fordi jeg gerne vil høre hvordan "hola" udtales på spansk.

men mange tak til Olebole og Splazz. I har ihvertfald givet mig et godt billede af, hvad jeg skal kunne, hvis jeg en dag skal bruge ajax.

fizk, du må gerne få point for dit svar selvom den ikke fungerer perfekt i forhold til mine behov. Fx ser det ud til at InnerHTML ikke er en særlig god idé at bruge, desuden viser den heller ikke æ,ø og å'er frem ordentligt. Men jeg synes i hvertfald du fortjener nogle point. Olebole og Splazz kan i princippet få point for at bruge tid på at svare på nogle af mine andre små spørgsmål.

Tak for jeres hjælp :)
Avatar billede majbom Novice
04. marts 2009 - 21:06 #12
velbekomme :)

det var ikke for at afskrække dig, og det er heller ikke fordi det ikke kan lade sig gøre på "din" måde. det er bare ikke hensigtsmæssigt at gøre det på den måde. der er mange der gør det forkert derude, men derfor behøves der jo ikke at komme flere :)

du kan jo, når du har tid/lyst, lave små projekter hvor du stiller nogle krav, som du så løser korrekt, forpå den måde at lære det. som ole siger er det ikke noget man lærer på en weekend, jeg har stadig meget at lære og er glad for at der findes et sted som dette, hvor der er kompetente folk som ole og andre (i mine øjne) rigtig dygtige programmører, der gider at bruge deres fritid på at lære os, knap så dygtige, om tingene.
Avatar billede miwu.tk Nybegynder
18. marts 2009 - 17:06 #13
Splazz, det ser ud til at de andre ikke ønsker point, men jeg sender bolden over til dig ihvertfald.

Lige et lille bonusspørgsmål: Kan man forvente at der kommer et alternativ til AJAX på et tidspunkt?
Avatar billede majbom Novice
22. marts 2009 - 21:00 #14
jamen jeg takker for point, selvom det er alt for meget med de 200.

jeg har ingen ide om der kommer et alternativ til AJAX.
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