AJAX-perusteet, jotka selitetään työskentelemällä pikaruokaravintolassa

AJAX (asynkroninen JavaScript ja XML) voi olla melko hämmentävä, jos sinulla ei ole ymmärrystä palvelinpuolen koodista.

Kun aloitin verkkokehityksen, opin ensin HTML, CSS, JavaScriptin ja jQueryn, ennen kuin uskoin Node.js: iin ja Ruby on Railsiin.

Mutta tietenkin halusin ymmärtää kuinka luoda dynaamisia verkkosovelluksia, joten minun piti oppia käyttämään AJAX: ää kommunikoimaan palvelimen kanssa. En halunnut rakentaa vain staattisia sivuja, jotka olivat suoraan vuodelta 2005.

Etuosa on aivan erilainen haaste kuin tausta. Pyrin ymmärtämään GET- tai POST-pyynnön eri osia.

Joten keksin pikaruokaravinteen analogian selittääkseni sen. Jos olet käynyt McDonald'sissa, Burger Kingissä tai Wendyssä, voit kirjoittaa omat GET- ja POST-pyynnöt.

Jotta ymmärtäisit tämän viestin, sinun on oltava aloittelijan käsitys jQuerystä.

Miltä AJAX näyttää?

Oletko koskaan huomannut, että voit kommentoida viestiä Facebookissa lataamatta koko sivua uudelleen? Se on AJAX työssä. AJAX antaa käyttäjien olla vuorovaikutuksessa Web-sovelluksesi kanssa lataamatta sivua kokonaan uudelleen.

Kuvittele, jos joka kerta, kun “tykkäsi” viesti Facebookissa tai lisäsit kommentin, sivu ladataan uudelleen? Se olisi kauhea! Sen sijaan Facebook lisää nopeasti kommenttisi tai tykkää viestiin ja antaa sinun jatkaa lukemista. He lisäävät tämän vuorovaikutuksen tietokantaansa häiritsemättä kokemustasi!

Miksi tarvitsemme AJAX: ta?

Okei, nämä ovat anekdoottisia esimerkkejä, joten katsotaanpa koko järjestelmää.

Ajattele koko verkkosovellustasi pikaruokaravintolana. Olet kassa, henkilö etulinjassa. Hoidat asiakkaiden pyynnöt.

Jos tarkastelet tätä kaaviota, näen kolme erillistä työtä, jotka on tehtävä.

  1. Kassan on käsiteltävä käyttäjän pyyntöjä nopeasti.
  2. Tarvitset kokit heittääksesi hampurilaiset grillille ja keittää kaikki ruuat.
  3. Tarvitset ateriavalmistajaryhmän pakata ruoka ylös ja laittaa sen pussiin tai alustaan.

Jos sinulla ei ole AJAX: tä, sinulla on kuitenkin oikeus käsitellä vain yksi tilaus kerrallaan alusta loppuun! Sinun olisi otettava tilaus… veloitettava sitten asiakas… sitten istukaa siellä tekemättä mitään, kun keittiössä olevat ihmiset keittävät ruokaa…. jatka sitten odottamista, kun ateriaprep-joukkue pakata sen. Voit ottaa vasta seuraavan tilauksen sen jälkeen.

Nyt SE on huono käyttökokemus! Et voi enää kutsua sitä "pikaruokaa". Sen sijaan sinun pitäisi kutsua sitä ”keskinkertaiseksi ruokaa”… tai jotain.

AJAX mahdollistaa asynkronisen käsittelymallin. Tämä tarkoittaa, että voit pyytää tietoja tai lähettää tietoja lataamatta koko sivua. Tämä on aivan kuten normaalin pikaruokaravintolan toiminta. Kassana otat asiakkaan tilauksen, lähetät sen keittiötiimille ja olet valmis ottamaan seuraavan asiakkaan tilauksen.

Asiakkaat voivat jatkaa tilauksien tekemistä, eikä sinun tarvitse istua siellä, kun keittiössä työskentelevät työntekijät tekevät kaikkia odottamaan.

Tämä tuo varmasti jonkin verran monimutkaisuutta. Sinulla on nyt useita erikoisuuksia ravintolassa. Lisäksi tilauksia käsitellään eri vauhdilla. Mutta se luo paljon paremman käyttökokemuksen.

Olet todennäköisesti nähnyt tämän toiminnassa ravintolassa itse. Yksi henkilö työskentelee peruna-koneella. Yksi henkilö hallitsee grilliä. Kun tilaus tulee, kassa voi heti kommunikoida molempien kanssa ja palata tilauksien vastaanottamiseen.

Kuinka luoda POST-pyyntö

Laitetaan nämä käsitteet toimimaan. Kassana sinun on lähetettävä saapuvat asiakaspyynnöt keittiöön, jotta loput ryhmästäsi voivat valmistaa aterian. Voit tehdä sen POST-pyynnöllä.

Omassa koodissasi POST-pyyntö lähettää tietoja palvelimellesi. Tämä tarkoittaa, että lähetät tässä tapauksessa tilaustietoja taustalevylle.

Sillä on kolme pääosaa:

  1. URL: tämä on reitti, jota pyyntö seuraa. Lisää minuutissa.
  2. Tiedot: kaikki ylimääräiset parametrit, jotka sinun on lähetettävä palvelimelle.
  3. Soittopyyntö: Mitä tapahtuu, kun olet lähettänyt pyynnön

Mitä ovat yleisiä asioita, joita ihmiset tilaavat pikaruokaravintolassa? Katsotaanpa 2 esimerkkiä.

  1. Ranskalaiset
  2. Yhdistelmä-ateria, joka koostuu hampurilaisesta, perunoista ja juomasta

Nämä kaksi vaativat erilaisia ​​prosesseja. Perunaperunapyyntö saattaa tarvita vain yhden henkilön kaappamaan joitain perunoita holkkiin. Mutta yhdistelmä-ateriatilaukset vaativat työtä useilta ryhmän jäseniltä. Joten nämä kaksi tarvitsevat erilaisia ​​URL-osoitteita.

$ .Post ( '/ comboMeal')
$ .Post ( '/ perunat)

URL-osoitteen avulla voimme käyttää samaa logiikkaa taustassa tietyntyyppisiin pyyntöihin. Tämä osa on tämän opetusohjelman soveltamisalan ulkopuolella, joten voit syventää sitä hieman tarkemmin katsomalla taustaa.

Seuraava on tiedot. Tämä on esine, joka kertoo meille hieman enemmän pyynnöstä. Yhdistelmäaterian URL-osoitteesta meidän on todennäköisesti tiedettävä:

  1. Pääaterian tyyppi
  2. He tyyppi juomaa
  3. Hinta
  4. Erityiset pyynnöt

Perunoiden osalta saatamme tarvita vain tietää:

  1. Perunoiden koko
  2. Hinta

Katsotaanpa esimerkkiä yhdistelmäateriasta: juustohampurilainen pepsillä, joka maksaa 6,00 dollaria. Tässä näyttää miltä JavaScript.

anna tilaus = {
  mainMeal: 'juustohampurilainen',
  juoma: 'Pepsi',
  hinta: 6,
  poikkeukset: ''
};
$ .post ('/ comboMeal', tilaus);

Tilausmuuttuja sisältää tilauksen sisällön. Ja sitten sisällytämme sen POST-pyyntöön, jotta keittiöhenkilöstömme tietävät mitä helvettiä yhdistelmäateriaan tulee!

Mutta emme voi saada kaikkia näitä koodeja ajamaan satunnaisessa ajassa! Tarvitsemme liipaisutapahtuman, joka kuittaa pyynnön. Tässä tapauksessa asiakastilaus pikaruokaravintolassa on tavallaan kuin henkilö, joka napsauttaa tilauspainiketta verkkosivustollasi. Voimme käyttää jQueryn click () -tapahtumaa POST-toiminnon suorittamiseen, kun käyttäjä napsauttaa painiketta.

$ ( '-Painiketta'). Klikkaa (function () {
  anna tilaus = {
    mainMeal: 'juustohampurilainen',
    juoma: 'Pepsi',
    hinta: 6,
    poikkeukset: ''
  };
 
  $ .post ('/ comboMeal', tilaus);
});

Viimeinen osa. Meidän on kerrottava asiakkaalle jotain tilauksen lähettämisen jälkeen. Kassat sanovat yleensä ”Seuraava asiakas kiitos!”, Koska tämä on pikaruokaravintola, joten voimme käyttää tätä soittopyynnössä osoittamaan tilauksen lähettämisen.

$ ( '-Painiketta'). Klikkaa (function () {
   anna tilaus = {
     mainMeal: 'juustohampurilainen',
     juoma: 'Pepsi',
     hinta: 6,
     poikkeukset: ''
   };
$ .post ('/ comboMeal', tilaus, toiminto () {
     hälytys ('Seuraava asiakas kiitos!');
  });
})

Kuinka luoda GET-pyyntö

Toistaiseksi meillä on mahdollisuus lähettää tilaus. Tarvitsemme nyt tavan toimittaa tilaus asiakkaillemme.

GET-pyynnöt tulevat tänne. GET antaa meille mahdollisuuden pyytää tietoja palvelimelta (tai keittiöltä, tämä analogia). Huomaa: tällä hetkellä tietokanta on täynnä tilauksia, ei itse ruokaa. Tämä on tärkeä ero, koska GET-pyynnöt eivät muuta tietokantaamme. He toimittavat nämä tiedot vain käyttöliittymälle. POST-pyynnöt muuttavat tietokannan tietoja.

Tässä on joitain tyypillisiä kysymyksiä, joita saatat kysyä ennen ruuan vastaanottamista.

  1. Haluatko syödä täällä vai saada ruokaa mennä?
  2. Tarvitsetko mausteita (kuten ketsuppi tai sinappi)?
  3. Mikä on numerosi kuitissa (sen varmistamiseksi, että se on sinun ruokasi)?

Oletetaan siis, että olet tilannut kolme yhdistelmäateriaa perheellesi. Haluat syödä ruokaa ravintolassa. Tarvitset ketsupin. Ja kuittisi numero on 191.

Voimme luoda GET-pyynnön URL-osoitteella '/ comboMeal', joka vastaa POST-pyyntöä saman URL-osoitteen kanssa. Tällä kertaa tarvitsemme kuitenkin erilaisia ​​tietoja. Se on täysin erilainen pyyntö. Sama URL-nimi antaa meille vain mahdollisuuden järjestää koodimme paremmin.

anna aterian = {
  sijainti: 'täällä',
  mausteet: 'ketsuppi',
  kuitti ID: 191
};
$ .get ('/ comboMeal', ateria);

Tarvitsemme myös liipaisimen tähän. Pyynnön laukaisevat asiakkaat, jotka vastaavat kysymyksiisi kassana ennen kuin toimitat ruoan heille. Ei ole kätevää tapaa esittää kysymyksiä ja vastauksia JavaScriptin avulla. Joten luon vain uuden napsautustapahtuman painikkeelle, jonka luokka on vastaus.

$ ( 'Vastaus'). Klikkaa (function () {
  anna aterian = {
     sijainti: 'täällä',
     mausteet: 'ketsuppi',
     idNumber: 191,
  };
$ .get ('/ comboMeal', ateria);
});

Tämä tarvitsee myös takaisinsoitto-ominaisuuden, koska aiomme vastaanottaa kaiken, mikä sisältyy kolmeen yhdistelmäateriaan järjestyksessä 191. Voimme vastaanottaa kyseiset tiedot takaisinsoittoparametrimme kautta.

Tämä palauttaa kaiken, mitä tilauksen 191 taustamääräyksissä määrätään. Aion käyttää nimeltään syödä -toimintoa merkitsemään, että saat lopulta syödä ruokaa, mutta muista, että JavaScript ei sisällä syömistoimintoa!

$ ( 'Vastaus'). Klikkaa (function () {
   anna aterian = {
     sijainti: 'täällä',
     mausteet: 'ketsuppi',
     idNumber: 191,
   };
 
  // data sisältää tietoja palvelimelta
  $ .get ('/ comboMeal', ateria, toiminto (tiedot) {
     // syö on valmis toiminto, mutta saat pisteen
     syödä (data);
  });
});

Lopullinen tuote, tiedot, sisältäisi teoreettisesti kolmen yhdistelmäaterian sisällön. Se riippuu siitä, kuinka se kirjoitetaan taustalle!

Kokeile muita visuaalisia selityksiä

Nautitko tästä opetusohjelmasta? Anna sille taputus, jotta muut näkevät sen! Tai kirjaudu uutiskirjeeseen kuullaksesi viimeisimmät CSS- ja JavaScript-opetusohjelmien julkaisut.