JQuery - Ett mer omfattande AJAX-exempel
I föregående aktivitet tittade vi på hur man kan använda sig av jQuerys kortkommandon avsedda för AJAX-anrop. Dessa förenklar AJAX-anropen något, men som vi kommer att se här så är det inte så komplicerat att använda de fullödiga AJAX-metoderna. Dessa ger oss även mer kontroll över hur anropen ska ske, faktum är att det finns väldigt många saker man kan ändra på. Oftast är dock de flesta defaultvärdena väl valda och man behöver sällan gå in och ändra på dessa.
Riksdagens öppna data
Vi ska ta och undersöka "Riksdagens öppna data" lite närmare. Här finns en hel del olika typer av data som handlar om Riksdagen och dess olika utskott. Du kan använda deras data i stort sett hur du vill. Dock måste du lämna en källhänvisning som talar om varifrån datan har hämtats. Om du ska använda deras data kan det vara en bra idé att läsa igenom deras användningsvillkor.
Ledamöter
I vårt exempel ska vi läsa ut data som innehåller personlig information om riksdagsledamöterna. Under "ledamöter hittar du diverse information om de som jobbar i och kring riksdagen. Du kan få fram information såväl om nuvarande som tidigare ledamöter (från och med 1991 och framåt). Datasamlingens uppbyggnad och API:et för att komma åt dem är väl dokumenterat.
Det finns en utmärkt undersida där man får hjälp med att bygga upp sin fråge-URL. För vårt exempel skapade vi en fråga som plockar ut nuvarande ledamöter som sitter i Utbildningsutskottet och som är med i Moderaterna. Då får vi ett litet urval av data som vi lätt kan hantera i vårt exempel.
Vår exempelkod
Först ska vi titta på HTML-delen av koden.
HTML
I detta exempel ska vi skapa en tabell i vilken vi listar data som handlar om de personer som matchar våra sökkriterier. Vi skapar grundtabellen och sätter tabellhuvudselementen så de återspeglar vad som kommer att finnas i respektive kolumn. Sist av allt lägger vi med en länk som talar om varifrån vi hämtat vår data.
CSS
Vår CSS är inte så jättespeciell. Först av allt gör vi en enkel reset. Sen anger vi kanter till vår tabell. Vi sätter lite padding så att inte saker och ting blir att se alltför hopptryckt ut. Den intressantaste biten är färgsättningen av tabellen. Först sätter vi en grundfärg, så att allt i tabellen blir orange. Vi använder sedan tr:nth-child(2n)-selektorn för att välja ut varannan rad (de jämna raderna) och sätter dessa till gula. Sist av allt väljer vi ut enbar th-elementen och färgar dem grå. Detta gör att det blir relativt lättläst då varannan rad är olikafärgad.
JavaScript
Nu kommer vi till den intressanta biten. Här har vi en hel del nytt!
Vi definierar upp en funktion som ska hämta vår data och kallar på denna. I den utförs några olika delmoment.
Parametrar till API:et
I hämtaLedamöter börjar vi med att skapa ett objekt som innehåller de parametrar vi vill skicka med i URL:en. Tidigare har vi "hårdkodat" in dessa i vår URL, men det är mer flexibelt att göra så här. Då kan man lätt gå in och ändra parametrarna och låta jQuery bygga upp slutsträngen för oss. Det är även mer lättläst än när man har en massa extratext längt bak i en URL. Självklart är det även en fördel om vi vill sätta någon av parametrarna dynamiskt. Då kan vi helt enkelt lägga till de värden vi vill ändra i objektet.
I parametrar anger vi att vi vill ha tillbaka resultatet i form av JSON. Vi anger att vi ska söka ut de ledamöter som tillhör m, vilket förstås motsvarar Moderaterna. Sist anger vi vilket utskott som vi är intresserade av, i detta fall Utbildningsutskottet.
$.ajax
Tidigare har vi använt oss av kortkommandot get för att hämta våra AJAX-källor. Nu ska vi använda oss av den "fullständiga" versionen av jQuerys AJAX-hantering. Detta startas med metoden $.ajax(). Som inparametrar skickar vi in ett objekt som innehåller alla inställningar och parametrar som behövs. Det finns en uppsjö av möjligt alternativ att ange här! Kolla mer på jQuerys dokumentation om du vill gå in på djupet.
Vi sätter först den grund-URL som leder till vår datakälla. Detta är alltså den URL som leder till Riksdagens API som tillhandahåller ledamots-data. Därefter skickar vi in data som innehåller de parametrar som ska läggas till i slut-URL:en när vi väl anropar den. jQuery kommmer dynamiskt att bygga upp en korrekt GET-URL åt oss. Sist av allt talar vi om att vi vill hämta JSON-data. Detta kommer att inverka såväl på hur jQuery hämtar datan som hur den behandlar den mottagen data.
Sist av allt så kopplar vi till en funktion som körs om anropet går bra och en som körs om det går mindre bra.
AjaxFel
AjaxFel visar enbart ett kort meddelande som talar om att något gick fel.
AjaxKlar
AjaxKlar körs när all data har laddats ned. Vi vill då gå igenom alla personposter som vi läst in. Detta gör bi med en forEach-loop och för varje post vi går igenom så skickar vi den till visaPerson.
visaPerson
I visaPerson lägger vi till en ny rad i tabellen, som innehåller den information som stämmer för den person vi just behandlar.
Mallsträngar
För att göra det intressant och kompakt så använder vi oss av en finess ifrån JavaScript2015, nämligen "template strings". Det vill säga mallsträngar. Dessa inleds med `-tecknet (backtick på svengelska). Till skillnad mot vanliga strängar så kan dessa sträcka sig över många rader. Så gott som allt som finns inom backtickarna tolkas rakt av som text och alla mellanslag, radbrytningar osv som förekommer kommer att inkluderas i den slutgiltiga strängen.
I mallsträngar kan vi även lägga med sektioner som kommer att köras och vars innehåll kommer att läggas in i strängen. Detta görs via ${}. Det som står inom klamrarna kommer att utvärderas och resultatet kommer att infogas istället för ${}. I vårt fall har vi t.ex. <td>${p.efternamn}</td>, här kommer JavaScript att plocka ut det värde som variabeln p.efternamn inneråller och lägga in det i den strängen som skapas. Vi slipper alltså skriva saker som; <td>" + p.efternamn + "</td> eller liknande. Detta blir kompaktare, snyggare och mer lättläst.
Det finns mycket mer...
Det finns många andra varianter på vilka du kan hämta och skicka data. Vi spar dock dessa till sektionen om hur man skapar webbapplikationer. Där kommer vi att använda oss mer av AJAX och hantera mer vettig data.
Detta var allt vi tänker presentera angående jQuery just nu. Vi kommer att fortsätta använda det i kommande sektioner och aktiviteter. Vill du veta mer om jQuery så kan du gå till deras projekt sida, jQuery.com och läsa mer. Det finns långt mycket mer i jQuery än det vi hunnit gå igenom här!
Nästa aktivitet
Detta var slutet på vår sektion om jQuery. Dock kommer följande sektioner att innehålla mer jQuery. Men nu är du mogen att gå vidare med sektionen som handlar om hur man skapar webbapplikationer!