Grundlæggende om AJAX forklaret ved at arbejde på en fastfood-restaurant

AJAX (Asynkron JavaScript og XML) kan være temmelig forvirrende, hvis du ikke har en solid forståelse af serversiden kode.

Da jeg startede med webudvikling, lærte jeg først HTML, CSS, JavaScript og jQuery, før jeg turdede ind i Node.js og Ruby on Rails.

Men selvfølgelig ønskede jeg at forstå, hvordan man bygger dynamiske webapplikationer, så jeg var nødt til at lære at bruge AJAX til at kommunikere med en server. Jeg ville ikke bare bygge statiske sider, der var lige ud af 2005.

Frontend er en helt anden udfordring end back-end. Jeg kæmpede for at forstå de forskellige dele af en GET- eller POST-anmodning.

Så jeg kom med analogien af ​​en fast-food-restaurant for at forklare det. Hvis du har været i en McDonald's, Burger King eller Wendy, kan du skrive dine egne GET- og POST-anmodninger.

For at forstå dette indlæg skal du have en begynders forståelse af jQuery.

Hvordan ser AJAX ud?

Har du nogensinde bemærket, at du kan kommentere et indlæg på Facebook uden at genindlæse hele siden? Det er AJAX på arbejdet. AJAX giver brugerne mulighed for at interagere med din webapplikation uden at genindlæse siden helt.

Forestil dig, at hvis hver gang du "kunne lide" et indlæg på Facebook eller tilføjet en kommentar, indlæses siden igen? Det ville være forfærdeligt! I stedet tilføjer Facebook hurtigt din 'kommentar' eller 'ligesom' til indlægget og giver dig mulighed for at fortsætte med at læse. De tilføjer denne interaktion til deres database uden at afbryde din oplevelse!

Hvorfor har vi brug for AJAX?

Okay, det er anekdotiske eksempler, så lad os se på hele systemet.

Tænk på hele din webapplikation som en fastfood-restaurant. Du er kasserer, personen i frontlinjerne. Du håndterer anmodninger fra kunder.

Hvis du ser på dette diagram, kan jeg se tre separate job, der skal udføres.

  1. Kassereren skal håndtere brugeranmodninger i hurtigt tempo.
  2. Du har brug for kokke for at kaste burgere på grillen og koge al mad.
  3. Du har brug for et måltidspræparathold for at pakke maden op og lægge den i en pose eller på en bakke.

Men hvis du ikke havde AJAX, ville du kun have lov til at behandle en ordre ad gangen fra start til slut! Du bliver nødt til at tage ordren ... lad derefter kunden ... så sidder der og gør intet, mens folk i køkkenet tilbereder maden…. fortsæt derefter med at vente, mens måltidspræparatet pakker det op. Du kan kun tage den næste ordre efter alt det.

Nu er DET en dårlig brugeroplevelse! Du vil ikke være i stand til at kalde det "fastfood" mere. I stedet skal du kalde det "middelmådig mad" ... eller noget.

AJAX tillader en asynkron behandlingsmodel. Det betyder, at du kan anmode om data eller sende data uden at indlæse hele siden. Dette er ligesom den måde, en normal fastfood-restaurant fungerer på. Som kasserer tager du kundens ordre, sender den videre til køkkenholdet og gør dig klar til at tage den næste kundes ordre.

Kunder kan fortsætte med at foretage ordrer, og du behøver ikke sidde der, mens de ansatte i køkkenet arbejder og får alle til at vente.

Dette introducerer bestemt en vis kompleksitet. Du har nu flere specialiseringer i restauranten. Derudover håndteres ordrer i forskellige tempo. Men det skaber en meget bedre brugeroplevelse.

Du har sandsynligvis set dette i aktion på en restaurant selv. En person arbejder med fries-maskinen. En person administrerer grillen. Når en ordre kommer ind, kan kassereren øjeblikkeligt kommunikere med begge og komme tilbage til at tage ordrer.

Sådan opretter du en POST-anmodning

Lad os sætte disse koncepter i gang. Som kasserer skal du sende indgående kundeanmodninger til køkkenet, så resten af ​​dit team kan forberede måltidet. Det kan du gøre med POST-anmodning.

I din faktiske kode sender en POST-anmodning data til din server. Det betyder, at du sender ordredata til back-end, i dette tilfælde.

Det har tre hoveddele:

  1. En URL: dette er den rute, som anmodningen vil følge. Mere på et minut.
  2. Data: eventuelle ekstra parametre, du skal sende til serveren.
  3. Tilbagekald: Hvad sker der, efter at du har sendt anmodningen

Hvad er nogle almindelige ting, som folk bestiller i en fastfood-restaurant? Lad os se på to eksempler.

  1. fries
  2. Et kombinationsmåltid sammensat af en burger, pommes frites og en drink

Disse to kræver forskellige processer. En anmodning om fries kræver muligvis kun en person til at skubbe nogle fries i en ærme. Men en kombineret måltidsordre kræver arbejde fra flere holdmedlemmer. Så disse to har brug for forskellige webadresser.

$ .Post ( '/ comboMeal')
$ .post ( '/ fries')

URL-adressen giver os mulighed for at bruge den samme logik på back-end for visse typer anmodninger. Denne del er uden for omfanget af denne tutorial, så du kan grave dig ind i det lidt mere, når du ser på bagenden.

Næste er dataene. Dette er et objekt, der fortæller os lidt mere om anmodningen. For URL-adressen til kombinationsmåltidet skal vi sandsynligvis vide:

  1. Type hovedmåltid
  2. De type drikke
  3. Prisen
  4. Eventuelle særlige anmodninger

Til fries skal vi muligvis kun vide:

  1. Størrelsen på pommes frites
  2. Prisen

Lad os se på et eksempel på et kombinationsmåltid: en cheeseburger med en Pepsi, der koster $ 6,00. Sådan ser det ud i JavaScript.

lad ordre = {
  mainMeal: 'cheeseburger',
  drikke: 'Pepsi',
  pris: 6,
  undtagelser: ''
};
$. post ('/ comboMeal', ordre);

Ordrevariablen indeholder indholdet af ordren. Og så inkluderer vi det i POST-anmodningen, så vores køkkenpersonale ved, hvad dælen der skal lægges i kombinationsmåltidet!

Men vi kan ikke få al denne kode kørt på et tilfældigt tidspunkt! Vi har brug for en triggerhændelse, der modregner anmodningen. I dette tilfælde er en kundeordre på en fastfood-restaurant lidt som en person, der klikker på en 'ordre' -knap på dit websted. Vi kan bruge jQuerys klik () -hændelse til at køre POST, når brugeren klikker på en knap.

$ ( 'Knap'). Klik (function () {
  lad ordre = {
    mainMeal: 'cheeseburger',
    drikke: 'Pepsi',
    pris: 6,
    undtagelser: ''
  };
 
  $. post ('/ comboMeal', ordre);
});

Sidste del. Vi er nødt til at fortælle kunden noget, når deres ordre er sendt. Kasserere siger normalt ”Næste kunde tak!” Da dette er en fastfood-restaurant, så vi kan bruge det inden for tilbagekaldet til at vise, at ordren er blevet sendt.

$ ( 'Knap'). Klik (function () {
   lad ordre = {
     mainMeal: 'cheeseburger',
     drikke: 'Pepsi',
     pris: 6,
     undtagelser: ''
   };
$. post ('/ comboMeal', rækkefølge, funktion () {
     alarm ('Venligst næste kunde!');
  });
})

Sådan opretter du en GET-anmodning

Indtil videre har vi muligheden for at afgive en ordre. Nu har vi brug for en måde at levere den ordre til vores kunde.

Det er her GET-anmodninger kommer ind. GET giver os mulighed for at anmode om data fra serveren (eller køkken, denne analogi). Bemærk: lige nu er vores database fuld af ordrer, ikke selve maden. Dette er en vigtig sondring, fordi GET-anmodninger ikke ændrer vores database. De leverer kun disse oplysninger til front-end. POST-anmodninger ændrer oplysningerne i databasen.

Her er nogle typiske spørgsmål, som du måske bliver stillet, før du modtager din mad.

  1. Ønsker du at spise her eller få maden til at gå?
  2. Har du brug for krydderier (som ketchup eller sennep)?
  3. Hvad er dit nummer på kvitteringen (for at bekræfte, at det er din mad)?

Så lad os sige, at du bestilte tre kombinations måltider til din familie. Du vil spise maden i restauranten. Du har brug for ketchup. Og nummeret på din kvittering er 191.

Vi kan oprette en GET-anmodning med en URL på '/ comboMeal', som svarer til POST-anmodningen sammen med den samme URL. Denne gang har vi dog brug for forskellige data. Det er en helt anden type anmodning. Det samme URL-navn giver os bare mulighed for bedre at organisere vores kode.

lad måltid = {
  placering: 'her',
  krydderier: 'ketchup',
  kvittering ID: 191
};
$ .get ('/ comboMeal', måltid);

Vi har også brug for en trigger til denne. Denne anmodning udløses af kunder, der besvarer dine spørgsmål som kasserer, før du leverer maden til dem. Der er ingen praktisk måde at repræsentere spørgsmål og svar med JavaScript. Så jeg opretter bare endnu en klikbegivenhed til knappen med klassen ‘svar’.

$ ( 'Svar'). Klik (function () {
  lad måltid = {
     placering: 'her',
     krydderier: 'ketchup',
     idNummer: 191,
  };
$ .get ('/ comboMeal', måltid);
});

Denne har også brug for en tilbagekaldsfunktion, fordi vi vil modtage, hvad der var indeholdt i de tre kombimåltider i rækkefølge 191. Vi kan modtage disse data via en dataparameter i vores tilbagekald.

Dette vil returnere uanset hvad back-end angiver for ordre 191. Jeg vil bruge en funktion kaldet eat for at indikere, at du til sidst får at spise maden, men husk, at der ikke er nogen eat-funktion i JavaScript!

$ ( 'Svar'). Klik (function () {
   lad måltid = {
     placering: 'her',
     krydderier: 'ketchup',
     idNummer: 191,
   };
 
  // data indeholder dataene fra serveren
  $ .get ('/ comboMeal', måltid, funktion (data) {
     // eat er en sammensat funktion, men du får poenget
     spise (data);
  });
});

Det endelige produkt, data, vil teoretisk indeholde indholdet af de tre kombomåltider. Det afhænger af, hvordan det er skrevet på bagsiden!

Prøv andre visuelle forklaringer

Nød du denne tutorial? Giv det et klap, så andre kan se det! Eller tilmeld dig nyhedsbrevet for at høre om de seneste udgivelser af CSS- og JavaScript-tutorials.