Share
Volgend op onze introductie tot AJAX, hier is een voorbeeld dat de XMLHttpRequest API gebruikt om een AJAX-verzoek te initialiseren.
Bekijk de volgende basisstructuur:
Overweeg ook de gerelateerde visualisatie:
Dit is wat we willen bereiken: wanneer we op de knop klikken, wordt een AJAX-aanvraag uitgevoerd. Dan is het element met de bio id wordt weergegeven en de inhoud wordt gevuld met de antwoordgegevens. Die gegevens zijn statisch en opgeslagen in de Bio.txt het dossier.
Notitie: het bestand wordt geüpload naar de Codepen-server. Op deze manier vermijden we problemen met de oorsprong van de bron.
Hieronder staat de vereiste AJAX-code:
Accentsconagua
var btn = document.getElementById ('verzoek'); var bio = document.getElementById ('bio'); var request = new XMLHttpRequest (); request.onreadystatechange = function () if (request.readyState === 4) bio.style.border = '1px solid # e8e8e8'; if (request.status === 200) bio.innerHTML = request.responseText; else bio.innerHTML = 'Er is een fout opgetreden tijdens uw aanvraag:' + request.status + "+ request.statusText; request.open ('Get', 'Bio.txt'); btn.addEventListener (' klik op ', function () this.style.display =' none '; request.send ();); Laten we nu de stappen voor dit verzoek beschrijven:
Maak een XMLHttpRequest-object.
Schrijf de functie die zal worden uitgevoerd wanneer de server de antwoordgegevens terugstuurt. Het XMLHttpRequest-object heeft de onreadystatechange eigenschap die deze functie opslaat. Telkens wanneer de status van het verzoek verandert, wordt deze callback-functie uitgevoerd.
Controleer een paar andere eigenschappen van het XMLHttpRequest-object. Eerst de readyState property geeft de status van ons verzoek aan. Gedurende de AJAX-aanroep verandert de waarde ervan en kunnen waarden worden ontvangen van 0 naar 4 (bijvoorbeeld de waarde 4 betekent dat de reactiegegevens beschikbaar zijn voor ons). Ten tweede, de staat eigenschap geeft aan of het verzoek succesvol is of niet (bijvoorbeeld de waarde 200 definieert een succesvol verzoek). In dit voorbeeld wordt aangenomen dat we de responsgegevens en de AJAX-aanroep ophalen en updaten we de inhoud van het doelelement. Anders geven we een bericht weer met informatie die is geëxtraheerd uit het object XMLHttpRequest.
Specificeer het type van het verzoek met behulp van de Open methode. Deze methode accepteert twee vereiste parameters en drie optionele parameters. De eerste vereiste parameter definieert de HTTP-methode (bijv. KRIJGEN of POST). De tweede bepaalt de URL waarnaar we het verzoek zullen verzenden. Optioneel passeren we een derde Booleaanse parameter die aangeeft of het verzoek asynchroon is (dat wil zeggen standaard waar waarde) of synchroon. De andere twee optionele parameters kunnen voor authenticatiedoeleinden worden gebruikt.
Dien de aanvraag in wanneer op de knop wordt geklikt via de sturen methode. En op dit punt verbergen we de knop.
Notitie: Als u echt heel oude versies van Internet Explorer (dus IE6 en lager) wilt ondersteunen, moet u een exemplaar van de ActiveXObject object (zie stap 1).
De volgende visualisatie toont de kern van ons verzoek zoals het wordt afgedrukt in de browserconsole.
De definitieve demo ziet er als volgt uit:
Als we echter een bestand aanvragen dat niet bestaat, zien we een bericht dat lijkt op het volgende:
Notitie: Als u het voorbeeld uitvoert vanuit uw lokale omgeving (en sla de Bio.txt bestand erin), zal het foutbericht waarschijnlijk anders zijn. U ziet bijvoorbeeld het volgende resultaat:
Hier is de ingebouwde Codepen-demo:
In deze zelfstudie hebben we onderzocht hoe we een eenvoudig AJAX-verzoek kunnen implementeren met behulp van vanilla JavaScript.
In het volgende deel van deze serie zullen we ons concentreren op de AJAX-gerelateerde functies en methoden van jQuery. Vervolgens zullen we in het laatste deel van de serie werken met een ingewikkelder exemplaar. Blijf kijken!
