Tuesday, September 30, 2008 10:45 PM
Vimpyboy
Utnyttja jQuery för enkla Ajax-anrop
Med jQuery så kan man på ett otroligt smidigt sätt använda Ajax. Jag kommer att gå igenom hur man gör för att skriva en enkel sida som hämtar in olika sidor med Ajax-anrop, samtidigt som den gamla texten suddas bort med en animering.
När man använder javascript - och därmed jQuery – så bör man alltid se till så att koden är semantiskt korrekt innan man applicerar javascripten. Koden bör vara så ren som möjligt och HTML-koden bör innehålla just HTML och inget annat.
HTML-koden jag kommer att använda ser ut som sådan:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title>jQuery Demo</title>
5: <link href="style.css" rel="Stylesheet" type="text/css" />
6: <script src="scripts/jquery-1.2.6.js" type="text/javascript"></script>
7: <script src="scripts/menu.js" type="text/javascript"></script>
8: </head>
9: <body>
10: <div id="mainContainer">
11: <h1>
12: jQuery Demo
13: </h1>
14: <ul id="menu">
15: <li><a href="#" class="menu-startpage">Startsidan</a></li>
16: <li><a href="#" class="menu-aboutme">Om mig</a></li>
17: <li><a href="#" class="menu-other">Annat</a></li>
18: </ul>
19: <div id="main">
20: </div>
21: </div>
22: </body>
23: </html>
Det är alltså helt vanlig XHTML. Jag har inga javascript eller annat i koden, utan allt kommer att läggas i menu.js.
Det vi kommer att göra i javascriptet är att vi kommer att sätta ett onclick-event på alla länkar under #menu li där vi använder klassnamnet för att visa vilken sida som skall hämtas. När vi sedan klickar på en länk så kommer div-elementet med id:t “main” att försvinna med en animering, fyllas på med HTML genom ett Ajax-anrop och sedan visas igen med en liknande animering.
Javascriptet i sin helhet ser ut på detta sätt:
1: $(document).ready(function() { Initialize(); });
2:
3: function Initialize() {
4: SetupMenu();
5: $('#main').hide();
6: $('.menu-startpage').click();
7: }
8:
9: function SetupMenu() {
10: $('#menu li a').click(function() { LoadPage(this); });
11: }
12:
13: function LoadPage(e) {
14: var page = e.className.split(' ')[0];
15: $('#menu li a').removeClass('active');
16: $(e).addClass('active');
17: $.ajax({
18: method: "get",
19: url: "LoadPage.aspx",
20: data: "page=" + page,
21: beforeSend: function() { $('#main').hide('slow').fadeOut(); },
22: complete: function() { $('#main').show('slow').fadeIn(); },
23: success: function(result) { $("#main").html(result); }
24: });
25: }
Vi börjar med att anropa metoden Initialize() när DOM:en är redo för förändringar. Som jag har skrivit i ett tidigare blogginlägg så är det inte detsamma som window.load då den sistnämnde även väntar på att alla bilder och annat skall laddas.
I Initialize() så börjar vi med att köra metoden SetupMenu() där vi sätter ett onclick-event på alla länkar under #menu li. När användaren klickar på en länk så skall LoadPage(e) köras där e är en referens till elementet. Efter det så gömmer vi div-elementet då vi inte har någon information att visa än, och efter det trigga click-eventet för startsidan så att den skall laddas in när besökaren går till sidan.
Än så länge är det inga konstigheter, utan det är just när användaren klickar på en länk som det magiska sker. Det som händer då är att LoadPage(e) körs, och där så börjar vi med att plocka fram första klassen för elementet då den aktuella länken blir tilldelad klassnamnet “active”. Sedan tar vi bort klassen “active” från alla länkar för att kunna sätta den igen på länken som det har klickats på.
Nästa steg är att köra ajax-metoden. jQuery har en metod som heter just ajax och som tar emot en anonym funktion. I den funktionen som i själva verket är en Json-sträng anger vi olika properties för Ajax-anropet. Att tilldela properties på detta sätt är standard i jQuery och används av de flesta funktioner där. Det går även att använda när man skriver egna funktioner för jQuery.
De metoder vi använder här är:
- method – Anger vilken metod som skall användas vid anropet. Vi använder här get, men skulle lika gärna kunna använda post.
- url – URL till sidan som skall anropas. Här anropar vi LoadPage.aspx som returnerar olika texter beroende på vad som skickas in till sidan. Det här kan vara vilken typ av sida som helst, och returnera antingen HTML, XML eller Json. Sedan tar jQuery hand om outputen och parse:ar den om så behövs.
- data – Här anger vi datan som skall skickas. Då vi kör med get som metod så skickas den som en querystring till sidan som vi har angett.
- beforeSend – Funktion som skall köras innan datan skickas. Här gömmer vi undan den gamla informationen med dels hide(‘slow’) som “viker ihop” elementet, och sedan fadeOut() som gör att opaciteten sänks för elementet.
- complete – Det här körs när datan är hämtad. Här väljer vi att visa div-elementet igen på samma sätt som vi nyss gömde det på.
- success – När vi har hämtat datan så kör vi en funktion som tar emot datan som parameter. Det vi gör här är att sätta HTML-koden för elementet genom metoden html().
När vi nu kör sidan så kommer den att ladda in startsidan och sedan visa informationen där. När vi sedan klickar på en länk så försvinner den gamla informationen samtidigt som den nya laddas in och sedan visas. Vi kan alltså med så lite som 25 rader kod göra ett Ajax-anrop och dessutom animera div-elementet och sätta klasser på länkarna! Det här är en av anledningarna till varför jQuery har blivit så populärt bland utvecklare som det är, och det är dessutom anledningen till varför Microsoft valde att ha med detta i de kommande versionerna av ASP.NET.
Jag har även lagt upp ett demo där du kan se hur det fungerar.
Filed under: Javascript, jQuery