JSON-foto's laden

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.

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.

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.

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.

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.

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.

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!

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.