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

★ Open ajaxLokaal/bloemen.html en ajaxLokaal/load1.html. ★ Bekijk de broncode en test het resultaat in een browser.

De pagina bloemen.html is een klassieke HTML-pagina. Elke article-tag heeft een uniek id en bevat informatie over één bloem.

<section>
    <h1>Overzicht bloemen</h1>
    <h1>Overzicht bloemen</h1>
    <article id="Anjer">...</article>
    <article id="Lelie">...</article>
    <article id="Narcis">...</article>
    <article id="Roos">...</article>
    <article id="Tulp">...</article>
</section>

De inhoud van de section-tag gaan we volledig tonen in de pagina load1.html.

<ul class="tabNav">
    <li><a href="#!" class="active">Anjer</a></li>
    <li><a href="#!">Lelie</a></li>
    <li><a href="#!">Narcis</a></li>
    <li><a href="#!">Roos</a></li>
    <li><a href="#!">Tulp</a></li>
</ul>
<div id="data"></div>
...
<script>
$(function() {
    // De URL en de selectie binnen de pagina zijn gescheiden door een spatie!
    $('#data').load('bloemen.html section');
});
</script>

★ Open load1.html in een browser.

Toon volledige section-tag

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.

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.

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.

★ Pas de code aan en test het resultaat in een browser.

$(function() {
    $('#data').load('bloemen.html #Roos');
});

Toon enkel #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.

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.

Voor $('#data').load('bloemen.html h2'); is dit het resultaat:

Toon alle h2-tags

Als laatste gaan we de navigatie integreren.

★ Pas de code aan en test het resultaat in een browser.

$(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.

Intaractieve versie

Load(): HTML met callback

★ Open ajaxLokaal/load2.html en bekijk het script.

$(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.

★ Vervang de laatste lijn binnen het click-event door onderstaande code. ★ Test het resultaat in een browser.

$(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.

Intaractieve versie met animatie