spiralen

JSON-foto's laden

met AJAX

stap 1: de opdracht toegelicht (00:02:57)

AJAX staat voor Asynchronous JavaScript And XML. Behalve XML-data kun je via deze techniek verschillende data-typen in een document laden (zoals platte tekst, html en json), zonder dit document te moeten herladen.
Dit bespaart bij het updaten van de pagina een aantal http-requests en data-verkeer. Vooral bij het maken van apps is dit een broodnodige techniek.
Het is in JavaScript goed toepasbaar binnen hetzelfde domein van de webpagina, maar met jQuery is het ook mogelijk soms daarbuiten te werken.

De foto's en de service worden beschikbaar gesteld door Flickr.com.

Wat je leert

  • een eenvoudige AJAX-request: het $.ajax()-object;
  • nog eens werken met jQuery;
  • een event voor de enter-toets maken;
  • data uit een array verwerken naar DOM-elementen;
  • werken met object-structuur;
  • willekeurige afbeeldingen vormgeven met CSS. Onderzoek hiervoor ook de mogelijkheden van Masonry en eventueel zelfs horizontale Masonry: https://designshack.net/articles/css/masonry/
  • jQuery object en jQuery methods maken en gebruiken;
  • modulair werken: er worden meerdere scripts gebruikt en het eigenlijke modulaal-venster script is een script, dat een venster oproept met verschillende inhoud en afmetingen.

AJAX met jQuery stap 2:
het zoekvenster (00:05:39) ˆ

In dit deel koppelen we het jQuery-script aan het html-document.
Na (de gebeurtenis) dat het document geladen is, wordt een variabele aangemaakt voor de zoekterm. Nadat er op de zoek-knop is geklikt, krijgt die variabele de waarde van het zoekvenster en wordt dat als test met een alert gemeld.

AJAX met jQuery stap 3:
met de Enter-toets opdracht versturen (00:05:16) ˆ

Het is voor veel gebruikers prettig als het invoervenster bevestigd wordt met de Enter-toets. Hiervoor wordt de event-handler keydown(function(e) {}) gebruikt. Als e.keyCode==13 is, dan kunnen dezelfde handelingen binnen het if-statement gebruikt worden. Tot slot wordt de alert-opdracht in een functie haalFotos() geplaatst. Daar komen in de volgende video's meerdere opdrachten in. Binnen de beide events staat nu -naast de toekenning van de zoekTerm variabele- alleen het aanroepen van de functie.

AJAX met jQuery stap 4:
ophalen van JSON-data met $.ajax() (00:09:00) ˆ

ophalen van JSON-data met $.ajax() (00:09:00) ˆ In deze video worden de gegevens echt opgehaald. Eerst wordt het adres onderzocht: http://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=lente&jsoncallback=?
Daarin wordt via de methode GET een aantal parameters met het adres meegegven. In dit voorbeeld zie je &tags=lente staan. Daardoor wordt er dus gefilterd op lente.
Met een variabele wordt dit adres in 3 stukken geknipt: het eerste deel tot lente, vervolgens de zoekterm en daarna het resterende deel van de URL.
Daarna kan het ajax-commando gegeven worden. Deze heeft veel mogelijke parameters.
Voor dataType geven we 'json', voor method geven we 'GET', voor url onze variabele met het webadres en tot slot success de functienaam, die moet worden aangeroepen als de data met succes geladen zijn.
Deze functie wordt alvast gemaakt met als argument bijvoorbeeld data.

Als test geven we een console.log(data). Als het goed gaat zien we het data-object dat onder andere een Array items bevat met daarin weer 20 objecten.

AJAX met jQuery stap 5:
data uit het json-Object halen (00:07:07) ˆ

Door het json-Object te bestuderen, zie je welke eigenschappen het heeft. Om de afbeeldingen eruit te halen, moet je de items-array in, daarin in een van de objecten gaan, daarin weer media object de m-waarde opvragen.

Dit moet voor alle afbeeldingen gebeuren. Dit doen we daarom met een for-lus statement.

Van elke foto.items[i] wordt de media.m waarde genomen en dat in de src waarde van de img-tag geplaatst. Vervolgens wordt deze html-code toegevoegd met .append() aan de code die tot toe staat in de div-tag met id foto.

AJAX met jQuery stap 6:
meer informatie bij de foto's (00:06:19) ˆ

In deze video halen we uit de items-objecten meer informatie: de koppeling naar de Flickr-pagina met foto en de titel van de foto.

Ze zijn te halen uit de eigenschappen van het json-object. We breiden de html-code regel in ons script met die gegevens uit. Daarbij is het goed te realiseren dat er een string wordt uitgebreid, losgeknipt om de waarden van de variabelen er tussen te kunnen voegen.

AJAX met jQuery stap 7:
pagina opmaken (00:10:55) ˆ

In deze video wordt de pagina vormgegeven. Daarvoor wordt er om de gelinkte foto nog een div met klasse afbeelding gemaakt. Deze is er voor om de foto's op de pagina, dezelfde afmetingen te geven.

Verzorg de opmaak naar eigen inzicht! Misschien is Masonry hier een goede oplossing!

Om deze div en het bijbehorende bijschrift komt nog een div met de klasse houder. In dit filpje heb ik deze een breedte te geven en een float:left; komen de foto's naast elkaar op de pagina te staan. Maar display:inline-table is ook het uitproberen waard!

AJAX met jQuery stap 8:
broninformatie toevoegen (00:06:11) ˆ

Tot slot kunnen we in het json-object ook informatie vinden over de hele aanvraag. Die verwerken we ook onderaan onze html-pagina.

We kijken dan niet in een van de items-objecten, maar in de eigenschappen van het overkoepelende object.

Dit is een mooie afsluiting van onze tutorial, waarbij de de bronvermelding toevoegen.
Deze kan immers pas toegevoegd worden, nadat het zoekvenster ingevuld is en het ophalen geslaagd is.

De footer kun je aanvullen met de validatie-code.
Omdat de pagina soms leeg en soms gevuld is, maak je de footer 'sticky'. In deze link vind je een oplossing met Flexbox, maar er zijn ook 'klassieke' oplossingen.


Inleveren ˆ