# Load()
De methode `load()` is de meest eenvoudige en tevens de meest gebruikte methode om HTML in de achtergrond op te halen.\
In tegenstelling tot alle andere AJAX-methodes wordt `load()` rechtstreeks aan een selector gekoppeld.
Response: met deze methode kunnen we enkel tekst en HTML ophalen.\
Syntax: `load(url [, data] [, callback])`
* **URL**:\
De URL van de op te halen pagina.
* **Data**:\
Een string (GET-request) of een map (POST-request) waarmee we de gegevens op de URL kunnen filteren. Aangezien we in dit hoofdstuk geen server-side script gebruiken, kunnen we deze parameter in dit hoofdstuk nog niet verwerken.
* **Callback**:\
Deze functie wordt uitgevoerd zodra alle gegevens zijn opgehaald.
## Load(): HTML zonder callback
{% hint style="success" %}
★ Open **ajaxLokaal/bloemen.html** en **ajaxLokaal/load1.html**.\
★ Bekijk de broncode en test het resultaat in een browser.
{% endhint %}
De pagina *bloemen.html* is een klassieke HTML-pagina. Elke article-tag heeft een uniek *id* en bevat informatie over één bloem.
```markup
Overzicht bloemen
Overzicht bloemen
...
...
...
...
...
```
De inhoud van de section-tag gaan we volledig tonen in de pagina *load1.html*.
```markup
...
```
{% hint style="success" %}
★ Open **load1.html** in een browser.
{% endhint %}
Bij het laden van de pagina wordt de volledige inhoud van *bloemen.html* ingelezen en verschijnt alle data binnen de section-tag van *bloemen.html* in *#data* van *load1.html*. De navigatie bovenaan de pagina heeft voorlopig nog geen invloed op het resultaat.
{% hint style="danger" %}
Merk op dat altijd de volledige HTML-code wordt ingelezen. De lay-out van *bloemen.html* (de CSS-eigenschappen) wordt nooit mee overgenomen. *Load1.html* bevat eigen stijlregels om de ingelezen data opnieuw te formatteren.
{% endhint %}
Meestal hebben we niet de volledige inhoud van een externe pagina nodig, maar enkel een bepaald deel. Het deel dat we willen ophalen, gaan we dan afbakenen met een *id*. Op *bloemen.html* heeft elke bloem reeds een uniek id. Indien we enkel de gegevens van *#Roos* willen tonen, moeten we het juiste *id* aan de URL toevoegen.
{% hint style="success" %}
★ Pas de code aan en test het resultaat in een browser.
{% endhint %}
```javascript
$(function() {
$('#data').load('bloemen.html #Roos');
});
```
Het is niet zo dat we met deze functie maar een deel van de pagina inlezen. We lezen nog steeds ALLE data in, maar we tonen maar een deel van de gegevens.
{% hint style="info" %}
Binnen `load()` kunnen we eender welke selector gebruiken. Meestal gebruikt men hiervoor een id, maar het is perfect mogelijk om bijvoorbeeld enkel de titels te tonen.
{% endhint %}
Voor `$('#data').load('bloemen.html h2');` is dit het resultaat:
Als laatste gaan we de navigatie integreren.
{% hint style="success" %}
★ Pas de code aan en test het resultaat in een browser.
{% endhint %}
```javascript
$(function() {
$('.tabNav a').click(function (e) {
var id = $(this).text();
$('.tabNav a').removeClass('active');
$(this).addClass('active');
$('#data').load('bloemen.html #' + id);
});
$('.tabNav a:first').click();
});
```
De tekst binnen elke link komt overeen met het *id* van de te tonen sectie (let op: hoofdlettergevoelig). De pagina werkt feilloos, maar de code is zeker niet optimaal. Bij elke klik wordt immers de volledige pagina opnieuw ingelezen om uiteindelijk maar een deel te tonen. Het is natuurlijk veel interessanter dat we de pagina maar éénmaal inlezen en dat de navigatie vanuit het DOM de juiste id's toont of verbergt. Dit kunnen we perfect oplossen door de callback functie te gebruiken.
## Load(): HTML met callback
{% hint style="success" %}
★ Open **ajaxLokaal/load2.html** en bekijk het script.
{% endhint %}
```javascript
$(function() {
$('#data').load('bloemen.html article', function () {
$('#data article:not(:first)').hide();
});
$('.tabNav a').click(function () {
$('.tabNav a').removeClass('active');
$(this).addClass('active');
var id = '#' + $(this).text();
$('#data article').hide().filter(id).show();
});
});
```
Bij het openen van de pagina worden alle article-tags van *bloemen.html* in *#data* geplaatst. Vanuit de callback functie worden alle article-tags, behalve de eerste, onzichtbaar gezet. Alle verdere interacties bevinden zich binnen het click-event op de links.
Klikt u bijvoorbeeld op de link *Roos*, dan wordt de actie:\
`$('#data article').hide().filter('#Roos').show();`
Als laatste gaan we nog een kleine animatie toevoegen.
{% hint style="success" %}
★ Vervang de laatste lijn binnen het click-event door onderstaande code.\
★ Test het resultaat in een browser.
{% endhint %}
```javascript
$(function() {
...
$('.tabNav a').click(function () {
$('.tabNav a').removeClass('active');
$(this).addClass('active');
var id = '#' + $(this).text();
if ($(id).is(':hidden')) {
$('#data article:visible').slideUp('slow', function () {
$(id).slideDown('slow');
});
}
});
});
```
Bij elke klik controleren we eerst of het *id* reeds zichtbaar is. Enkel indien het *id* onzichtbaar staat, wordt de animatie uitgevoerd. De animatie zelf is een sequentieel *slideUp* en *slideDown* effect.
