Ajax rangerer ganske høyt der oppe av de største grunnene til å bruke jQuery. Ikke bare løser jQuery problemene i tvers av nettlesere, det gjør syntaksen veldig enkel å bruke og forstå.
I denne videoen tar vi en titt på å forklare hva Ajax er i det hele tatt. Vi ser på et skjemaelement, som når det sendes inn, gjør en GET- eller POST-forespørsel (som bestemt av metodeattributtet) til URL-en du spesifiserer (som bestemt av handlingsattributtet). Det er bare HTML, ingen backend-kode eller JavaScript skjer der i det hele tatt. Men innleveringen kommer til å føre til at siden endres, bokstavelig talt lastes inn på den nye URL-en, akkurat som å klikke på en lenke.
Ajax tillater oss å gjøre den GET- eller POST-forespørselen i bakgrunnen uten å laste siden på nytt. I sin kjerne er det hele poenget med Ajax. Og det er veldig kraftig. Det er i stor grad ansvarlig for hvorfor moderne nettsteder fungerer og føler slik de gjør.
Ajax pleide å "stå for" asynkron JavaScript og XML, men det blir stort sett ignorert i disse dager fordi det ikke betyr mye. Også derav kapitalisering. Du kan også noen ganger se "XHR", som er en forkortelse for XMLHttpRequest, som er den opprinnelige kjerneteknologien til Ajax.
Forskjellen mellom GET og POST er i hovedsak: GET er for å få informasjon og skal ikke være ansvarlig for å endre data og POST er spesielt for å endre data. Les gjerne mer om det på denne StackOverflow-tråden.
Å komme med en GET-forespørsel i jQuery er utrolig enkelt:
$.get( "URL", function(data) ( // do something with data )); ));URL-en er der du håper å få dataene fra. Den andre parameteren er tilbakeringingsfunksjonen som kjører når Ajax-forespørselen var vellykket. Den viktigste parameteren der er den første, data, som har informasjonen den fikk fra forespørselen.
Ajax-forespørsler kan mislykkes noen ganger. En årsak til denne feilen kan være selve nettleseren og dens sikkerhetsretningslinjer. Bakt i nettleserne selv er regler om hvor innhold kan be om fra. Forespørsler kan alltid gjøres til samme domene som forespørselen kommer fra. Men hvis det er et annet domene involvert, må det forskjellige domenet spesifikt tillate det.
Du kan lese alt om det på enable-cors.org. CORS står for "Cross-Origin Resource Sharing". Vi ser på et eksempel der CORS ikke er aktivert og Ajax-forespørselen mislykkes. En standard og enkel måte å fikse det på, forutsatt at serveren er Apache, er å angi en overskrift som spesifikt tillater CORS gjennom .htaccess-filen:
Header set Access-Control-Allow-Origin "*"I videoen flytter vi bare Ajax-forespørselen over til CodePen, som håndterer Ajax godt som standard.
Lett osteaktig:
Se Pen fBInl av Chris Coyier (@chriscoyier) på CodePen