JQuery - Ett mer omfattande AJAX-exempel - Versionshistorik

PGJ: /* JSONP */

2019-02-10T09:37:02Z

JSONP

← Äldre version		Versionen från 10 februari 2019 kl. 09.37
Rad 1:		Rad 1:
	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.		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.

	~~== JSONP ==~~
	Vi diskuterade tidigare [[Same-Origin Policy]] och hur denna kan förhindra AJAX-anrop till andra sajter. En metod som kan användas för att komma runt detta är JSONP. Denna typ av AJAX-anrop går runt [[Same-Origin Policy]] och är relativt lätta att utföra. Dock måste servern man anropar ha stöd för JSONP. Vilket långt ifrån alla har. Vi ska dock titta på en "öppen data"-källa som har JSONP-stöd...

	== [http://data.riksdagen.se/ Riksdagens öppna data] ==		== [http://data.riksdagen.se/ Riksdagens öppna data] ==

PGJ: /* Parametrar till API:et */

2019-02-10T09:36:42Z

Parametrar till API:et

← Äldre version		Versionen från 10 februari 2019 kl. 09.36
Rad 37:		Rad 37:
	I <code>hämtaLedamöter</code> 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 <code>hämtaLedamöter</code> 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 ~~JSONP~~. Vi anger att vi ska söka ut de ledamöter som tillhör <code>m</code>, vilket förstås motsvarar Moderaterna. Sist anger vi vilket utskott som vi är intresserade av, i detta fall Utbildningsutskottet.		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 <code>m</code>, vilket förstås motsvarar Moderaterna. Sist anger vi vilket utskott som vi är intresserade av, i detta fall Utbildningsutskottet.

	==== <code>$.ajax</code> ====		==== <code>$.ajax</code> ====

PGJ: /* $.ajax */

2019-02-10T09:36:23Z

$.ajax

← Äldre version		Versionen från 10 februari 2019 kl. 09.36
Rad 42:		Rad 42:
	Tidigare har vi använt oss av kortkommandot <code>get</code> 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 <code>$.ajax()</code>. 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å [http://api.jquery.com/jQuery.ajax/ jQuerys dokumentation] om du vill gå in på djupet.		Tidigare har vi använt oss av kortkommandot <code>get</code> 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 <code>$.ajax()</code>. 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å [http://api.jquery.com/jQuery.ajax/ 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 <code>data</code> 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 ~~JSONP~~-data. Detta kommer att inverka såväl på hur jQuery hämtar datan som hur den behandlar den ~~mottagna datan~~.		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 <code>data</code> 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.

	~~Liksom tidigare använder vi promise-metoden för att koppla oss till vad som ska hända när AJAX-anropet är avklarat. Märk dock att när man hämtar JSONP~~ så ~~är ''inte'' AJAX-anropet ansynkront. Vi~~ kopplar till en funktion som körs om anropet går bra och en som körs om det går mindre bra.		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.

	==== <code>AjaxFel</code> ====		==== <code>AjaxFel</code> ====

PGJ: /* Vår exempelkod */

2019-01-12T21:08:33Z

Vår exempelkod

← Äldre version		Versionen från 12 januari 2019 kl. 21.08
Rad 29:		Rad 29:
	=== JavaScript ===		=== JavaScript ===
	Nu kommer vi till den intressanta biten. Här har vi en hel del nytt!		Nu kommer vi till den intressanta biten. Här har vi en hel del nytt!
	<codepen pen="eJEQGQ" tab="js" height="900">		<codepen pen="eJEQGQ" tab="js,result" height="900">
	</codepen>		</codepen>

PGJ: /* Nästa aktivitet */

2016-01-14T20:19:48Z

Nästa aktivitet

← Äldre version		Versionen från 14 januari 2016 kl. 20.19
Rad 68:		Rad 68:
	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!		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!

	[[~~Node~~ - ~~En introduktion~~]]		[[Vad är webbapplikationer och -tjänster?]]

	[[Category: jQuery\|JD]]		[[Category: jQuery\|JD]]
	[[Category:JavaScript \| JD]]		[[Category:JavaScript \| JD]]

PGJ: /* Nästa aktivitet */

2016-01-14T20:19:11Z

Nästa aktivitet

← Äldre version		Versionen från 14 januari 2016 kl. 20.19
Rad 66:		Rad 66:

	== Nästa aktivitet ==		== Nästa aktivitet ==
	Nu är du mogen att gå vidare med sektionen som handlar om hur man skapar webbapplikationer!		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!

	[[Node - En introduktion]]		[[Node - En introduktion]]

PGJ: /* Nästa aktivitet */

2016-01-14T20:18:32Z

Nästa aktivitet

← Äldre version		Versionen från 14 januari 2016 kl. 20.18
Rad 67:		Rad 67:
	== Nästa aktivitet ==		== Nästa aktivitet ==
	Nu är du mogen att gå vidare med sektionen som handlar om hur man skapar webbapplikationer!		Nu är du mogen att gå vidare med sektionen som handlar om hur man skapar webbapplikationer!

			[[Node - En introduktion]]

	[[Category: jQuery\|JD]]		[[Category: jQuery\|JD]]
	[[Category:JavaScript \| JD]]		[[Category:JavaScript \| JD]]

PGJ: /* Ledamöter */

2016-01-14T20:17:41Z

Ledamöter

← Äldre version		Versionen från 14 januari 2016 kl. 20.17
Rad 9:		Rad 9:
	== Ledamöter ==		== Ledamöter ==

	I vårt exempel ska vi läsa ut data som innehåller personlig information om riksdagsledamöterna.		I vårt exempel ska vi läsa ut data som innehåller personlig information om riksdagsledamöterna. Under "[http://data.riksdagen.se/Data/Ledamoter/ 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.
	Under "[http://data.riksdagen.se/Data/Ledamoter/ 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 [http://data.riksdagen.se/Data/Ledamoter/Skapa-sokfraga-for-ledamotsdata/ 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.		Det finns en utmärkt [http://data.riksdagen.se/Data/Ledamoter/Skapa-sokfraga-for-ledamotsdata/ 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.

PGJ: /* Mallsträngar */

2016-01-14T20:14:47Z

Mallsträngar

← Äldre version		Versionen från 14 januari 2016 kl. 20.14
Rad 57:		Rad 57:

	==== Mallsträngar ====		==== 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 <code>`<code>-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.		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 <code>`</code>-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 <code>${}</code>. Det som står inom klamrarna kommer att utvärderas och resultatet kommer att infogas istället för <code>${}</code>. I vårt fall har vi t.ex. <code><td>${p.efternamn}</td></code>, här kommer JavaScript att plocka ut det värde som variabeln <code>p.efternamn</code> inneråller och lägga in det i den strängen som skapas. Vi slipper alltså skriva saker som; <code><td>" + p.efternamn + "</td></code> eller liknande. Detta blir kompaktare, snyggare och mer lättläst.		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 <code>${}</code>. Det som står inom klamrarna kommer att utvärderas och resultatet kommer att infogas istället för <code>${}</code>. I vårt fall har vi t.ex. <code><td>${p.efternamn}</td></code>, här kommer JavaScript att plocka ut det värde som variabeln <code>p.efternamn</code> inneråller och lägga in det i den strängen som skapas. Vi slipper alltså skriva saker som; <code><td>" + p.efternamn + "</td></code> eller liknande. Detta blir kompaktare, snyggare och mer lättläst.

PGJ: /* JavaScript */

2016-01-14T20:14:23Z

JavaScript

← Äldre version		Versionen från 14 januari 2016 kl. 20.14
Rad 30:		Rad 30:
	=== JavaScript ===		=== JavaScript ===
	Nu kommer vi till den intressanta biten. Här har vi en hel del nytt!		Nu kommer vi till den intressanta biten. Här har vi en hel del nytt!
	<codepen pen="eJEQGQ" tab="js" height="~~1000~~">		<codepen pen="eJEQGQ" tab="js" height="900">
	</codepen>		</codepen>