Inhoudsopgave
AJAX Het omvat een reeks technieken en technologieën die ons in staat stellen asynchrone communicatie tot stand te brengen tussen wat de klant op het web ziet en de informatie die zich op de serverzijde van een webpagina bevindt.Een van de belangrijkste kenmerken die we kunnen benadrukken, is dat het afhankelijk is van de verschillende methoden HTTP Wat POST, GET, PUT of DELETE om de nodige gegevens naar de applicaties op de server te kunnen sturen.
In de vroege ontwikkelingsfase met AJAX oproepen moesten worden gebouwd met behulp van Javascript plat, wat echter veel code voor ons genereerde jQuery helpt ons de zaken te vereenvoudigen door de acceptatie van deze techniek en technologieën naar de massa te brengen, allemaal in het voordeel van zowel de ontwikkelaar als de gebruiker.
Wat is AJAX?AJAX komt overeen met Asynchrone Javascript en XML namelijk Javascript Y XML asynchroon, wat ook betekent dat het iets is dat niet afhankelijk is van een vaste structuur zoals een script PHP waarbij de instructies opeenvolgend worden uitgevoerd, waarbij natuurlijk de aanroepen worden opgeslagen in methoden en functies van klassen en objecten.
Het hierboven uitgelegde geeft ons de mogelijkheid om informatie te laden of te verzenden zonder opnieuw te hoeven laden of een "compleet" verzoek aan de server te doen, we plaatsen het tussen aanhalingstekens omdat de oproepen AJAX Dit zijn normale verzoeken, het is simpelweg niet nodig om de pagina in zijn geheel te verversen als dit niet het gewenste gedrag is.
Het gebruik van deze technieken en technologieën biedt enkele voordelen waarvan niet velen zich bewust zijn van hun bestaan, vaak gebruiken we het alleen voor een trend, maar als we de voordelen ervan begrijpen, zullen we weten voor welke projecten we het kunnen toepassen om het meeste uit. Laten we hieronder enkele van de belangrijkste voordelen van het gebruik bekijken: AJAX:
Vermindering van bandbreedtegebruikWe bereiken dit dankzij de verzoeken van met name secties, hiermee kunnen we bijvoorbeeld bereiken dat we algemene stijlen of afbeeldingen niet hoeven te herladen als we tekst willen vernieuwen.
Betere gebruikerservaringDoor de snelheid van de webapplicatie te verhogen, heeft de gebruiker een opmerkelijke verbetering in het gebruik, naast dat het ons als ontwikkelaars de mogelijkheid geeft om de mate van interactie met de elementen die we hebben geregeld te vergroten.
Browserafhankelijkheid verwijderenTijdens gebruik jQuery de noodzaak om code te schrijven die browserafhankelijk is, wordt geëlimineerd, dit helpt ons de ontwikkelingssnelheid en productiviteit van onze tijd te verbeteren.
Omdat niets perfect is, bij gebruik AJAX We moeten ook begrijpen dat er enkele nadelen zijn die ons ertoe kunnen aanzetten om na te denken en na te denken over de vraag of dit de beste optie is voor ons project. Vervolgens zullen we enkele van deze punten bekijken om een vollediger beeld te krijgen voordat we aan het technische deel van de tutorial beginnen.
AfhankelijkheidAls een klant of gebruiker een zeer oude browser gebruikt of de Javascript gedeactiveerd, onze applicatie kan lijden of niet werken, wat ons de verplichting geeft om speciale gevallen te maken wanneer we niet kunnen gebruiken AJAX.
Schrijf extra codeVolgens onze applicatie moeten we extra code schrijven om de antwoorden die we krijgen van de verzoeken te kunnen integreren AJAX, zoals antwoorden die bij HTML Y CSS.
Natuurlijk is het momenteel erg moeilijk om een browser te vinden die niet compatibel is met Javascript Y jQueryAfhankelijk van ons gebied kunnen we echter enkele gevallen vinden die het leven erg moeilijk kunnen maken.
Een verzoek AJAX van jQuery moet een basisstructuur hebben, waar we enkele parameters moeten vaststellen die nodig zijn voor het raamwerk, we moeten de methode vaststellen HTTP van het verzoek, de route waarlangs het verzoek zal worden gedaan, het antwoordformaat en tot slot, wat er moet gebeuren als het verzoek succesvol is of wanneer er een fout optreedt. Laten we in de volgende niet-functionele code kijken hoe we dit kunnen zien:
$ .ajax ({type: "HTTP-methode", // POST, GET, PUT, DELETE url: "Verzoekpad", // http: / / www.example.com/request dataType: "Type gegevens", / / html, xml, json succes: functie bij succes, fout: functie bij fout}); We zien dat elk van de secties die we hebben beschreven parameters zijn die ons verzoek ontvangt en dat het wordt gedaan via de methode $ .ajax () die wordt geleverd door jQuery direct, en het is een masker voor de code Javascript vliegtuig dat overeenkomt met elke engine van elke ondersteunde browser, die op dit moment bijna alle meest recente commercials zijn, zoals: Chrome, Firefox, Opera, Safari Internet Explorer, en die afgeleid van de motoren van deze die we hebben genoemd.
We gaan nu in de praktijk brengen wat we in het vorige gedeelte hebben gezien bij het indienen van een verzoek AJAX van een pagina HTML die we in het volgende voorbeeld gaan bouwen. We moeten weten dat we de meest recente versie van jQuery we kunnen krijgen, maar we kunnen degene gebruiken die ze opslaan in hun CDN, hebben we ook een kleine webserver nodig om de bestanden die we asynchroon gaan verkrijgen te kunnen routeren, hiervoor kunnen we WAMP in ramen, of een installatie LAMP in systemen Linux, met betrekking tot MAC-platforms die we kunnen gebruiken XAMP of vergelijkbaar.
In de volgende code gaan we eerst opnemen jQuery, dan zullen we een label in de body maken met een unieke id waar we de inhoud van het antwoord op ons verzoek zullen plaatsen, en aan het einde van het document zullen we een label maken script waar we de code zullen genereren om het verzoek in te dienen, in het attribuut van de url we gaan het verzoek doen aan de index van de map waar onze bestanden zich bevinden, we doen dit om de werking van onze code te laten zien, maar de manier om dit te doen is om een ander bestand aan te vragen dat het antwoord biedt dat we nodig hebben, laten we zie de code:
Voorbeeld van Ajax-verzoekAJAX verwerken
In de volgende afbeelding zien we hoe alles heeft gewerkt, waar we een succesvolle reactie van onze code kunnen zien.
Een van de dingen die jQuery wil is dat we geen tijd en code verspillen door dingen op de lange weg te doen, daarom biedt het ons snelkoppelingen voor oproepen AJAX meest voorkomende methoden zoals: KRIJGEN Y NA, dus door de snelkoppeling te gebruiken, besparen we een paar regels code en kunnen we het gewicht van onze applicatie verminderen.
Hiervoor in de officiële documentatie van jQuery We hebben alle bestaande gevallen, maar we gaan het vorige voorbeeld opnieuw doen met in dit geval de snelkoppeling, maar voordat we de functionele code zien, laten we het niet-functionele voorbeeld bekijken:
$ .get (pad, gegevens, SuccessFunction, ResponseType);
Zoals we hebben opgemerkt, is deze aanroep veel kleiner, wat ons helpt een schonere en lichtere code te hebben. Als we dit nu toepassen op ons vorige voorbeeld, zou het als volgt zijn:
Voorbeeld van Ajax-verzoekAJAX verwerken
We zien dat het aantal regels en karakters aanzienlijk is verminderd, wat onze datatransmissie zou verbeteren door een lagere bandbreedte te gebruiken. Als we alles in de browser uitvoeren, zou het ons het volgende antwoord geven:
