03. marts 2009 - 18:03Der 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" }}
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.
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 :)
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.
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.
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?
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.
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.
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.
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)
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.
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.
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.
Synes godt om
Ny brugerNybegynder
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.