HTML5 - Ajax

Tot een paar jaar geleden werd er aan gedacht Ajax als de toekomst van webapplicaties, nadat de massificatie met Gmail begon, maar tegenwoordig moet worden overwogen dat het de realiteit is dat een site die op dit moment Ajax op de een of andere manier niet bevat, niet erg goed wordt gezien.
Ajax is een reeks technieken waarmee we informatie kunnen verzenden en ontvangen zonder het document te vernieuwen of de pagina opnieuw te laden, dus vereenvoudiging zouden we kunnen zeggen dat het een hulpmiddel is om de navigatie op te slaan en te versnellen.
Wat is Ajax?
Ajax reageert op een acroniem voor Asynchrone Javascript en XML namelijk Javascript Y XML asynchroon, maar momenteel wordt het formaat gebruikt JSON vaker dan XML, wordt JSON door velen zelfs als de standaard beschouwd.
Dit alles resulteert in iets heel eenvoudigs uit te leggen, het ontvangen en verzenden van gegevens onafhankelijk van het laden en vernieuwen van de pagina's, bijvoorbeeld als we willen dat elke keer dat we op een knop klikken en een deel van de pagina gegevens uit een database haalt , in plaats van een verzoek naar de server te sturen door een formulier in te dienen en de hele pagina te vernieuwen, zullen we een Javascript-functie en een verzoek doen XMLHttpRequest communiceren met de server om de gegevens op te halen en alleen het gedeelte van de pagina te wijzigen dat we nodig hebben.
Als we dit zien, ziet het er geweldig uit en klinkt het geweldig, het enige probleem of de beperking is het gebruik van de Javascript, want als we het in onze browser deactiveren, kunnen we niet van deze functionaliteiten genieten.
Ons eerste Document met Ajax
Nu we de basis en grondbeginselen van Ajax kennen, gaan we een klein voorbeeld uitwerken dat ons kan illustreren over deze techniek.
Laten we eerst de volgende code bekijken, dan zullen we uitleggen waarmee deze overeenkomt:

 VoorbeeldAppels Kersen Bananendruk op een knop

Dit voorbeeld doet het gewoon, als we op een knop klikken, activeren we een functie genaamd HandvatKnopDruk (), dit creëert een nieuw object van het type XMLHttpRequest en hiermee kunnen we de HTML in de knop nemen, de tekst ervan nemen en deze samenvoegen tot de .HTML-extensie om een ​​eerder gemaakt document met dezelfde naam te kunnen oproepen.
Dan de functie handvatReactie maakt een verificatie van de status van het verzoek als het succesvol was, in een reeds aangewezen container zal het het overeenkomstige document laden dat we hebben aangeroepen.
Laten we in afbeeldingen kijken hoe de processtroom zal zijn:

In de eerste afbeelding wordt ons gevraagd om op een van de knoppen te klikken, wanneer we dit in de tweede afbeelding doen, zien we hoe inhoud wordt geladen, wat volgens de functie Ajax beschreven in de voorbeeldcode komt uit een document HTML al gemaakt, deze inhoud wordt geladen in de div waar de instructie stond die zei op een knop te drukken.
Hiermee maken we de tutorial af, we hebben al de mogelijkheid om te gaan experimenteren met Ajax om de browse-ervaring binnen onze pagina's of documenten te verrijken HTML.Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven