Ajax rangerer ret højt deroppe af de største grunde til at bruge jQuery. Ikke kun løser jQuery problemerne på tværs af browseren, det gør syntaksen meget let at bruge og forstå.
I denne video tager vi et stik ved at forklare, hvad Ajax overhovedet er. Vi ser på et formelement, som når det sendes, foretager en GET- eller POST-anmodning (som bestemt af metodeattributten) til den URL, du angiver (som bestemt af handlingsattributten). Det er bare HTML, der sker slet ingen backend-kode eller JavaScript der. Men denne indsendelse får siden til at ændre sig, bogstaveligt talt genindlæses ved den nye URL, ligesom at klikke på et link.
Ajax giver os mulighed for at foretage den GET- eller POST-anmodning i baggrunden uden at genindlæse siden. I sin kerne er det hele punktet med Ajax. Og det er meget kraftfuldt. Det er stort set ansvarligt for, hvorfor moderne websteder fungerer og føler, som de gør.
Ajax plejede at "stå for" asynkron JavaScript og XML, men det ignoreres stort set i disse dage, fordi det ikke betyder meget. Også dermed afkapitaliseringen. Du kan også nogle gange se "XHR", der er en forkortelse for XMLHttpRequest, som er Ajax's indbyggede kerneteknologi.
Forskellen mellem GET og POST er i det væsentlige: GET er til at få information og bør ikke være ansvarlig for at ændre data, og POST er specifikt til at ændre data. Du er velkommen til at læse mere om det på denne StackOverflow-tråd.
At lave en GET-anmodning i jQuery er utrolig let:
$.get( "URL", function(data) ( // do something with data )); ));URL'en er det sted, hvor du håber at få dataene fra. Den anden parameter er tilbagekaldsfunktionen, der kører, når Ajax-anmodningen blev gennemført. Den vigtigste parameter der er den første, data, som har de oplysninger, den fik fra anmodningen.
Ajax-anmodninger kan undertiden mislykkes. En af årsagerne til denne fejl kan være selve browseren og dens sikkerhedspolitikker. Bagte i browsere selv er regler om, hvor indhold kan bestilles fra. Anmodninger kan altid sendes til det samme domæne, som anmodningen kommer fra. Men hvis der er et andet domæne involveret, skal det andet domæne specifikt tillade det.
Du kan læse alt om det på enable-cors.org. CORS står for "Cross-Origin Resource Sharing". Vi ser på et eksempel, hvor CORS ikke er aktiveret, og Ajax-anmodningen mislykkes. En standard og nem måde at rette op på, forudsat at serveren er Apache, er at indstille et header, der specifikt tillader CORS gennem .htaccess-filen:
Header set Access-Control-Allow-Origin "*"I videoen flytter vi bare Ajax-anmodningen til CodePen, som håndterer Ajax godt som standard.
Let osteagtig:
Se Pen fBInl af Chris Coyier (@chriscoyier) på CodePen