Efficiënt scripten met jQuery 3.x
  • Over deze cursus
  • 1 Inleiding
  • 2 Inleiding tot JavaScript
    • Events en Actions
    • Syntax regels
    • JavaScript debugger
    • Variabelen
    • Operatoren
    • Voorwaardelijke instructies
    • Lussen
    • Functies
    • Functies in jQuery
    • Scope (zichtbaarheid) van variabelen
    • Objecten
    • Ingebouwde JavaScriptobjecten
  • 3 jQuery basis
  • 4 Elementen selecteren
    • Basis selectors
    • Hiërarchische selectors
    • Basisfilters
    • Inhoudsfilters
    • Attribuut selectors
    • Childfilters
    • Formulierfilters
    • Zichtbaarheidsfilters
    • Toepassing 1: gemeentelijst filteren (basisversie)
    • Toepassing 2: openingsuren markeren
  • 5 Selectie verfijnen (traversing)
    • Hiërarchische selectors
    • Filter methodes
    • Element looping: each()
    • Selecties in cascade: end()
    • Snelheidstest
    • Toepassing 1: gemeentelijst filteren (uitgebreide versie)
    • Toepassing 2: rating
  • 6 Events
    • Documentevents
    • Gebruikersevents
    • Event bubbling
    • Event methodes en properties
    • Hover-event: methode met een dubbele functie
    • De methode on()
    • Event handlers verwijderen
    • Toepassing 1: reactietest
  • 7 Animaties en effecten
    • Basiseffecten
    • Aangepaste animaties
    • Animatie pauzeren: delay()
    • Animatie beëindigen: finish()
    • Animatie afbreken: stop()
    • Versnellingsparameter
    • Toepassing 1: vloeiend scrollen
    • Toepassing 2: tabbladen
  • 8 DOM manipulatie
    • HTML-attributen
    • Object dimensies
    • Elementen toevoegen
    • Elementen verwijderen
    • Elementen vervangen
    • Elementen klonen
    • Toepassing 1: lightbox
  • 9 Inleiding tot AJAX
    • Historiek
    • Wat is XML?
    • Wat is JSON?
    • Requests filteren met GET en POST
    • Zes soorten AJAX requests
    • Same origin policy
    • Cross-site scripting
  • 10 AJAX zonder server-side scripting
    • Load()
    • $.getScript()
    • $.getJSON()
    • $.get() en $.post()
    • $.ajax()
    • Externe gegevens ophalen via JSONP
  • 11 AJAX met server-side scripting
    • Master/detailrelatie met load()
    • Master/detailrelatie met $.get()
    • Contactformulier verzenden met $.post()
    • Cross-site scripting (XSS)
Powered by GitBook
On this page

11 AJAX met server-side scripting

PreviousExterne gegevens ophalen via JSONPNextMaster/detailrelatie met load()

Last updated 7 years ago

Hebt u al ervaring met dynamische websites, dan bent u zeker vertrouwd met een master/detail-relatie. Op de overzichtspagina, de master, komt een beknopt overzicht van alle items uit de database. Vanuit een link waarbij we het id meesturen, komen we vervolgens op de detailpagina terecht. Elke actie resulteert in een nieuwe connectie met de database en met de webserver.

Misschien hebt u ook al een contactformulier ontworpen? De gebruiker vult zijn gegevens in en komt na het verzenden op een bedankpagina terecht.

Deze twee "klassiekers" gaan we in dit hoofdstuk omvormen tot een AJAX gestuurde pagina.

In het tweede deel van dit hoofdstuk gaan we externe data (HTML, JSON en XML) via een proxyscript ophalen en in een eigen webpagina verwerken.

In dit hoofdstuk bespreken we enkel de combinaties met een grijze achtergrond.

Alle toepassingen in dit hoofdstuk maken gebruik van server-side PHP-scripts. Beschikt u niet over PHP-hosting, dan kan u best een lokale testserver installeren. Bijvoorbeeld:

Het installeren en configureren van een webserver en PHP valt buiten het bestek van deze cursus.

★ Maak in de root van de webserver een nieuwe map jQuery aan of maak een lokaal domein aan. ★ Kopieer ALLE oefenbestanden naar de map jQuery.

Ziehier het resultaat:

Alle voorbeelden uit vorig hoofdstuk kan u via de webserver ook testen in Chrome.

AMPPS (Windows - Mac):

WAMPserver (Windows):

MAMP (Mac):

Op een externe webserver is de URL:

Op een lokale webserver met lokaal domein is de URL:

https://www.ampps.com/
http://www.wampserver.com/
http://www.mamp.info/
http://www.mijnDomein.com/jQuery/
http://jquery3.test/
Lokale webserver met lokaal domein