Inhoud wijzigen met een dropdown in AJAX

Asynchrone JavaScript en XML kunnen uw zakelijke webpagina's responsiever en interactiever maken. Met AJAX-technologie kunnen sitebezoekers vervolgkeuzemenu's en andere bedieningselementen gebruiken om acties te activeren zonder dat de webpagina wordt vernieuwd. Een klik op een productnaam in een vervolgkeuzemenu kan bijvoorbeeld de inhoud van een div-container veranderen. Complexe AJAX-taken vereisen mogelijk uitgebreide codering, maar u kunt een eenvoudig vervolgkeuzemenuvoorbeeld maken met behulp van enkele regels JavaScript.

Vervolgkeuzemenu's

Voeg een eenvoudig select-tag toe aan uw HTML-document en vul het met een select-tag om de waarden te definiëren die in het vervolgkeuzemenu moeten verschijnen. Uw menu heeft ook een gebeurtenishandler nodig om de JavaScript-functie te bellen om uw AJAX-aanvraag uit te voeren. In het volgende voorbeeld worden Camera- en telefoonitems toegevoegd aan een vervolgkeuzemenu en wordt de functie "getValue" aangeroepen wanneer het item is geselecteerd. Bovendien kunt u bepalen hoeveel items uw vervolgkeuzemenu wordt weergegeven. Het kenmerk size in dit voorbeeld vertelt browsers om twee items weer te geven. Als u de waarde op nul instelt, moeten sitebezoekers op het menu klikken om de items te bekijken. Als uw webpagina overvol is, stelt u de grootte in op 0 om het menu compact te houden.

Cameratelefoon

AJAX-verzoekobjecten

Op een basisniveau, om AJAX te laten werken, moet u een JavaScript-functie maken die een HyperText Transfer Protocol of HTTP-object maakt. Vervolgens gebruikt u die functie om informatie op te vragen bij uw webserver. De code roept de open- en verzendmethoden van het object om het verzoek te verzenden. Wanneer de code het verzoek verzendt, moet u ook de naam toevoegen van de bron die u wilt laten terugkeren door de server. Als u bijvoorbeeld een tekstbestand met de naam product1.txt van de server wilt ontvangen, voegt u een Open-instructie en een verzendinstructie toe aan uw code, vergelijkbaar met:

httpObject.open ("GET", "product1.txt", true); httpObject.send ();

Callback-functies

Uw AJAX-code moet de ID kennen van de inhoud die u wilt wijzigen. Laat uw AJAX-verzoek elk "div" -element op uw webpagina bijwerken door een "callback" -functie aan uw code toe te voegen. Callback-functies worden automatisch uitgevoerd wanneer een bepaalde gebeurtenis plaatsvindt. In dit voorbeeld hebt u een callback-functie nodig die de eigenschap "innerHTML" van het element "div" dat u wilt wijzigen, wijzigt. Een typische callback-functie ziet er als volgt uit:

httpObject.onreadystatechange = function () {if (httpObject.readyState == 4 && httpObject.status == 200) {document.getElementById ("container1"). innerHTML = httpObject.responseText; }}

Nadat u een aanvraag naar de webserver hebt verzonden, controleert deze functie de aanvraag en zoekt naar antwoorden. Wanneer de server een "statuscode" van 200 en een "readyState" -waarde van 4 terugstuurt, heeft de code dan de benodigde gegevens. Het verandert de eigenschap "innerHTML" van de "div" waarnaar wordt verwezen door de instructie "document.getElementById".

Overwegingen bij de webserver

AJAX-transacties bestaan ​​uit communicatie tussen iemands browser en de webserver. Omdat de AJAX-code in het voorbeeld een tekstbestand aanvraagt, moet u het tekstbestand toevoegen aan de map op de webserver waar u de andere bestanden voor uw website opslaat. De tekst in het tekstbestand is de tekst die uw AJAX-code toevoegt aan de webpagina wanneer de code de gegevens ophaalt. Wanneer iemand een waarde selecteert in het vervolgkeuzemenu van de pagina, wijzigt de AJAX-code de inhoud van de "div" -container die is opgegeven voor de tekst die door de server is geretourneerd.

 

Laat Een Reactie Achter