Ajax rankas ganska högt där uppe av de största skälen att använda jQuery. Inte bara fixar jQuery problem med webbläsare, det gör syntaxen väldigt lätt att använda och förstå.
I den här videon tar vi en knäpp på förklara vad Ajax alls är. Vi tittar på ett formulärelement som, när det skickas, gör en GET- eller POST-begäran (som bestäms av metodattributet) till den URL du anger (som bestäms av åtgärdsattributet). Det är bara HTML, ingen backend-kod eller JavaScript händer där alls. Men det inlämnande kommer att få sidan att ändras, bokstavligen ladda om på den nya webbadressen, precis som att klicka på en länk.
Ajax tillåter oss att göra den GET- eller POST-begäran i bakgrunden utan att ladda om sidan. I sin kärna är det hela poängen med Ajax. Och det är väldigt kraftfullt. Det är till stor del ansvarigt för varför moderna webbplatser fungerar och känner som de gör.
Ajax brukade "stå för" asynkron JavaScript och XML, men det ignoreras till stor del idag eftersom det inte betyder mycket. Även därav avkapitaliseringen. Ibland kan du också se “XHR” som är en förkortning för XMLHttpRequest, som är Ajax ursprungliga kärnteknik.
Skillnaden mellan GET och POST är i huvudsak: GET är för att få information och borde inte vara ansvarig för att ändra data och POST är specifikt för att ändra data. Läs gärna mer om det på denna StackOverflow-tråd.
Att göra en GET-begäran i jQuery är otroligt enkelt:
$.get( "URL", function(data) ( // do something with data )); ));URL: en är där du hoppas få data från. Den andra parametern är återuppringningsfunktionen som körs när Ajax-begäran lyckades. Den viktigaste parametern där är den första, data, som har den information den fick från begäran.
Ajax-förfrågningar kan misslyckas ibland. En anledning till detta misslyckande kan vara webbläsaren i sig och dess säkerhetspolicyer. Bakade i webbläsarna själva är regler om var innehåll kan begäras från. Förfrågningar kan alltid göras till samma domän som begäran kommer från. Men om det är en annan domän inblandad, måste den andra domänen specifikt tillåta det.
Du kan läsa allt om det på enable-cors.org. CORS står för "Cross-Origin Resource Sharing". Vi tittar på ett exempel där CORS inte är aktiverat och Ajax-begäran misslyckas. Ett vanligt och enkelt sätt att fixa det, förutsatt att servern är Apache, är att ställa in en rubrik som specifikt tillåter CORS genom .htaccess-filen:
Header set Access-Control-Allow-Origin "*"I videon flyttar vi bara Ajax-begäran till CodePen, som hanterar Ajax bra som standard.
Lätt ostliknande:
Se Penna fBInl av Chris Coyier (@chriscoyier) på CodePen