JQuery - AJAX - Versionshistorik

PGJ: /* getJSON */

2019-01-12T21:07:58Z

getJSON

← Äldre version		Versionen från 12 januari 2019 kl. 21.07
Rad 54:		Rad 54:

	Vi tar ett kort exempel igen:		Vi tar ett kort exempel igen:
	<codepen pen="WrOezE" tab="js" height="600">		<codepen pen="WrOezE" tab="js,result" height="600">
	</codepen>		</codepen>

PGJ: /* get */

2019-01-12T21:06:34Z

get

← Äldre version		Versionen från 12 januari 2019 kl. 21.06
Rad 19:		Rad 19:

	Bland det minimalaste AJAX-anropet vi kan göra ser ut så här:		Bland det minimalaste AJAX-anropet vi kan göra ser ut så här:
	<codepen pen="LGbrBW" tab="js" height="300">		<codepen pen="LGbrBW" tab="js,result" height="300">
	</codepen>		</codepen>

Rad 38:		Rad 38:

	Vårt exempel blir då att se ut så här:		Vårt exempel blir då att se ut så här:
	<codepen pen="zrzOoL" tab="js" height="400">		<codepen pen="zrzOoL" tab="js,result" height="400">
	</codepen>		</codepen>

Rad 45:		Rad 45:
	=== <code>always</code> ===		=== <code>always</code> ===
	Vi kan faktiskt hänga på ännu en funktion efter <code>get</code>. Det är <code>always</code> med denna metod lägger man till en funktion som ''alltid'' ska köras när hämtningen slutförts - oavsett vilket resultatet blev. Så här skulle det kunna se ut:		Vi kan faktiskt hänga på ännu en funktion efter <code>get</code>. Det är <code>always</code> med denna metod lägger man till en funktion som ''alltid'' ska köras när hämtningen slutförts - oavsett vilket resultatet blev. Så här skulle det kunna se ut:
	<codepen pen="zrzOoL" tab="js" height="400">		<codepen pen="zrzOoL" tab="js,result" height="400">
	</codepen>		</codepen>

PGJ: /* always */

2017-02-08T12:17:15Z

always

← Äldre version		Versionen från 8 februari 2017 kl. 12.17
Rad 44:		Rad 44:

	=== <code>always</code> ===		=== <code>always</code> ===
	Vi kan faktiskt hänga på en ~~till metod~~ efter <code>get</code>. Det är <code>always</code> med denna metod lägger man till en funktion som ''alltid'' ska köras när hämtningen slutförts - oavsett vilket ~~reslutatet~~ blev. Så här skulle det kunna se ut:		Vi kan faktiskt hänga på ännu en funktion efter <code>get</code>. Det är <code>always</code> med denna metod lägger man till en funktion som ''alltid'' ska köras när hämtningen slutförts - oavsett vilket resultatet blev. Så här skulle det kunna se ut:
	<codepen pen="zrzOoL" tab="js" height="400">		<codepen pen="zrzOoL" tab="js" height="400">
	</codepen>		</codepen>

	När <code>get</code> ~~gjort~~ utfört hämtningsförsöket kommer den antingen att kalla på <code>done</code> eller <code>fail</code> beroende på om hämtningen gick bra eller ej. Därefter kallar den på <code>always</code> och detta gör den alltså oavsett vilket resultatet av hämtningen blev.		När <code>get</code> utfört hämtningsförsöket kommer den antingen att kalla på <code>done</code> eller <code>fail</code>, beroende på om hämtningen gick bra eller ej. Därefter kallar den på <code>always</code> och detta gör den alltså oavsett vilket resultatet av hämtningen blev.

	== <code>getJSON</code> ==		== <code>getJSON</code> ==

PGJ: /* fail */

2017-02-08T12:15:54Z

fail

← Äldre version		Versionen från 8 februari 2017 kl. 12.15
Rad 41:		Rad 41:
	</codepen>		</codepen>

	Vår funktion <code>HanteraFel</code> kommer att köras om något går fel. Denna kommer då att rapportera att något gått åt pipan, samt att den visar upp det felmeddelande vi fick ifrån <code>get</code>. Inte världens bästa felhantering, men för detta syfte så duger ~~den~~.		Vår funktion <code>HanteraFel</code> kommer att köras om något går fel. Denna kommer då att rapportera att något gått åt pipan, samt att den visar upp det felmeddelande vi fick ifrån <code>get</code>. Inte världens bästa felhantering, men för detta syfte så duger det.

	=== <code>always</code> ===		=== <code>always</code> ===

PGJ: /* fail */

2017-02-08T12:15:29Z

fail

← Äldre version		Versionen från 8 februari 2017 kl. 12.15
Rad 35:		Rad 35:

	=== <code>fail</code> ===		=== <code>fail</code> ===
	Om något går fel, så kommer koden i föregående exempel inte att göra någonting. Vi vill självklart hantera fel på något bra sätt, så vi behöver utöka vårt exempel. Vi kan koppla till felhantering genom att ~~länka en~~ till metod efter <code>get</code>. I det här fallet vill vi använda <code>fail</code>. Vårt exempel blir då att se ut så här:		Om något går fel, så kommer koden i föregående exempel inte att göra någonting. Vi vill självklart hantera fel på något bra sätt, så vi behöver utöka vårt exempel. Vi kan koppla till felhantering genom att lägga till ännu metod efter <code>get</code>. I det här fallet vill vi använda <code>fail</code>.

			Vårt exempel blir då att se ut så här:
	<codepen pen="zrzOoL" tab="js" height="400">		<codepen pen="zrzOoL" tab="js" height="400">
	</codepen>		</codepen>

PGJ: /* getJSON */

2017-02-08T12:14:24Z

getJSON

← Äldre version		Versionen från 8 februari 2017 kl. 12.14
Rad 49:		Rad 49:

	== <code>getJSON</code> ==		== <code>getJSON</code> ==
	[[JSON]] är ett väldigt vanligt dataformat. J:et i det står faktiskt för JavaScript, så det är speciellt skapat för att användas i JavaScript-kod. Många datakällor levererar data i detta format. Du kommer att finna att de flesta "öppen data"-datakällor kan ~~leverera i~~ [[JSON]]. Eftersom det är ett så vanligt format, så har jQuery ett kortkommando som hämtar data och behandlar denna som JSON-data.		[[JSON]] är ett väldigt vanligt dataformat. J:et i det står faktiskt för JavaScript, så det är speciellt skapat för att användas i JavaScript-kod. Många datakällor levererar data i detta format. Du kommer att finna att de flesta "öppen data"-datakällor kan använda sig av [[JSON]]. Eftersom det är ett så vanligt format, så har jQuery ett kortkommando som hämtar data och behandlar denna som JSON-data.

	Vi tar ett kort exempel igen:		Vi tar ett kort exempel igen:

PGJ: /* get */

2017-02-08T12:13:06Z

get

← Äldre version		Versionen från 8 februari 2017 kl. 12.13
Rad 22:		Rad 22:
	</codepen>		</codepen>

	Exemplet kommer att kontakta <code>http://ajax.webbling.se</code> och hämta datan som finns i <code>/testdata1</code>~~. jQuery-metoden <code>get</code> är asynkron. Det innebär att programkörningen inte stannar och väntar på resultat, istället körs programmet vidare~~.
			Exemplet kommer att kontakta <code>http://ajax.webbling.se</code> och hämta datan som finns i <code>/testdata1</code>.

	<div class="well well-meadow">		<div class="well well-meadow">
			jQuery-metoden <code>get</code> är asynkron. Det innebär att programkörningen inte stannar och väntar på resultat, istället körs programmet vidare.
	</div>		</div>

PGJ den 8 februari 2017 kl. 12.09

2017-02-08T12:09:40Z

← Äldre version		Versionen från 8 februari 2017 kl. 12.09
Rad 4:		Rad 4:

	<div class="well well-meadow">		<div class="well well-meadow">
	Överhuvudtaget brukar det vara en bra idé att försöka förlita sig på de hjälpmedel som redan finns tillgängliga. Det rör sig ofta om beprövade lösningar som löst många av de småproblem som skulle ta dig mycket tid att både hitta och lösa. Likaså är oftast koden i dessa hjälpbibliotek rejält genomtestad, då de ~~används~~ av så många under en lång tid. Det gör att ~~många~~ buggar blivit hittade och fixade. Skapa nya, bra applikationer istället för att återuppfinna hjulet och återigen lösa problem till vilka det redan finns färdiga lösningar!		Överhuvudtaget brukar det vara en bra idé att försöka förlita sig på de hjälpmedel som redan finns tillgängliga. Det rör sig ofta om beprövade lösningar som löst många av de småproblem som skulle ta dig mycket tid att både hitta och lösa. Likaså är oftast koden i dessa hjälpbibliotek rejält genomtestad, då de använt av många under en lång tid. Det gör att de flesta buggar blivit hittade och fixade.

			Skapa nya, bra applikationer istället för att återuppfinna hjulet och återigen lösa problem till vilka det redan finns färdiga lösningar!
	</div>		</div>

PGJ: /* Det finns mycket mer... */

2017-02-01T07:44:35Z

Det finns mycket mer...

← Äldre version		Versionen från 1 februari 2017 kl. 07.44
Rad 58:		Rad 58:
	== Det finns mycket mer... ==		== 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.		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, [http://jquery.com 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 ==		== Nästa aktivitet ==

PGJ: /* get */

2017-01-29T20:58:13Z

get

← Äldre version		Versionen från 29 januari 2017 kl. 20.58
Rad 21:		Rad 21:

	Exemplet kommer att kontakta <code>http://ajax.webbling.se</code> och hämta datan som finns i <code>/testdata1</code>. jQuery-metoden <code>get</code> är asynkron. Det innebär att programkörningen inte stannar och väntar på resultat, istället körs programmet vidare.		Exemplet kommer att kontakta <code>http://ajax.webbling.se</code> och hämta datan som finns i <code>/testdata1</code>. jQuery-metoden <code>get</code> är asynkron. Det innebär att programkörningen inte stannar och väntar på resultat, istället körs programmet vidare.

			<div class="well well-meadow">

			</div>

	=== <code>done</code> ===		=== <code>done</code> ===