JS Intermediate
Chris Stegeman | Jan 31, 2023

js30 | AJAX

Voorkennis:

  • JS basis

Doelen:

  • Begrijpen wat je met (javascript-) AJAX kan doen
  • Een simpel AJAX request uitvoeren

Beschrijving

Je kunt met een zogenaamd AJAX-request allerlei informatie binnenhalen in je website met Javascript, zonder dat je de pagina hoeft te verversen!.
Dus met een druk op een button in je website, kun je (met een onclick ) een afbeelding, een tekst of zelfs een hele lijst met gegevens ophalen en die meteen weergeven in je webpagina.

opdracht

  • Bekijk deze uitleg op w3schools

    • Kopieer de broncode van de HTML en het Javascript, en maak een webpagina op jouw computer waarin dit werkt

      • let op: maak zelf de file "ajax_info.txt" bestand aan!
      • Maak jouw site ook zo als in de afbeelding, dat de button zichtbaar blijft (gebeurt bij W3Schools niet).
      • zet een border in de div waar met AJAX de file in geladen wordt
      • Voorbeeld: (klik op afb. om te vergroten)
        Nog niet op de button gedrukt:
        voor_ajax
        Op de button gedrukt:
        na_ajax

    • Maak nog 3 knoppen aan die in dezelfde div als de voorbeeld tekst een url laden:

      • "beer" met url = "https://std.stegion.nl/cs_codebase/js30_AJAX/txt/beer.txt"
      • "buffel" met url = "https://std.stegion.nl/cs_codebase/js30_AJAX/txt/buffel.txt'"
      • "lorem ipsum" met url = "https://std.stegion.nl/cs_codebase/js30_AJAX/txt/lorem.txt"
      • Voorbeeld: (klik op afb. om te vergroten)
        Uitvoer na klik op beer button:
        voor_ajax
        Uitvoer na klik op Lorem button:
        na_ajax

    Ga hierna verder met js31_api_base. Daarin wordt uitgelegd:

    • Wat een API is
    • Dat je een API via AJAX kan laden
    • Hoe je op een andere (betere) manier AJAX kan gebruiken dan in bovenstaande oefening (via plain JS)