Razumijevanje AJAX -a s jQueryjem

AJAX Sadrži skup tehnika i tehnologija koje nam omogućuju uspostavljanje asinkrone komunikacije između onoga što klijent vidi na webu i informacija koje postoje na strani poslužitelja web stranice.
Jedna od glavnih karakteristika koju možemo istaknuti jest da se oslanja na različite metode HTTP Što POST, GET, PUT ili DELETE kako biste mogli poslati potrebne podatke aplikacijama na poslužitelju.
U ranoj fazi razvoja sa AJAX pozive je trebalo graditi pomoću Javascript stan, koji je za nas generirao mnogo koda jQuery pomaže nam pojednostaviti stvari donoseći usvajanje ove tehnike i tehnologije u mase, a sve u korist i programera i korisnika.
Što je AJAX?AJAX odgovara Asinkroni Javascript i XML naime Javascript Y XML asinkrono, što također znači da je to nešto što ne ovisi o fiksnoj strukturi kao što je skripta PHP gdje se upute izvršavaju uzastopno, naravno spremajući pozive metodama i funkcijama klasa i objekata.
Gore objašnjeno daje nam mogućnost učitavanja informacija ili slanja bez ponovnog učitavanja ili upućivanja "potpunog" zahtjeva poslužitelju, stavljamo ih pod navodnike jer pozivi AJAX To su normalni zahtjevi, jednostavno nije potrebno osvježiti stranicu u cijelosti ako se ne radi o željenom ponašanju.
Korištenje ovih tehnika i tehnologija predstavlja neke prednosti za koje mnogi nisu svjesni svog postojanja, često ih koristimo samo radi trenda, ali ako shvatimo njenu dobrobit, moći ćemo znati na koje projekte to možemo primijeniti izvukao najviše iz toga. Pogledajmo u nastavku neke od najvažnijih prednosti korištenja AJAX:
Smanjenje upotrebe propusnostiTo postižemo posebno zahvaljujući zahtjevima odjeljaka, čime možemo postići, na primjer, da ne moramo ponovno učitavati opće stilove ili slike ako želimo osvježiti tekst.
Bolje korisničko iskustvoPovećanjem brzine web aplikacije, korisnik ima značajno poboljšanje u korištenju, osim što nam daje priliku kao programerima da povećamo stupanj interakcije s elementima koje smo dogovorili.
Uklonite ovisnost o preglednikuPrilikom korištenja jQuery eliminirana je potreba za pisanjem koda koji ovisi o pregledniku, što nam pomaže u poboljšanju brzine razvoja i produktivnosti našeg vremena.
Budući da ništa nije savršeno, pri korištenju AJAX Moramo također shvatiti da postoje neki nedostaci koji nas mogu natjerati da razmislimo i razmislimo je li to najbolja opcija za naš projekt. Zatim ćemo vidjeti neke od ovih točaka kako bismo imali potpuniju sliku prije početka tehničkog dijela vodiča.
OvisnostAko klijent ili korisnik koristi vrlo stari preglednik ili koristi Javascript deaktivirana, naša aplikacija može patiti ili ne raditi, što nas obvezuje da napravimo posebne slučajeve kada je ne možemo koristiti AJAX.
Napišite dodatni kodPrema našoj aplikaciji, moramo napisati dodatni kôd da bismo mogli integrirati odgovore koje dobivamo iz zahtjeva AJAX, kao što su odgovori koji dolaze s tim HTML Y CSS.
Naravno, trenutno je vrlo teško pronaći preglednik koji nije kompatibilan Javascript Y jQueryMeđutim, ovisno o našem području, možemo pronaći neke slučajeve koji mogu jako otežati život.
Zahtjev AJAX iz jQuery mora imati osnovnu strukturu, gdje moramo uspostaviti neke parametre potrebne za okvir, moramo uspostaviti metodu HTTP zahtjeva, rutu na koju će se zahtjev podnijeti, format odgovora i na kraju, što treba učiniti u slučaju da je zahtjev uspješan ili kada dođe do pogreške. Pogledajmo u sljedećem nefunkcionalnom kodu kako to možemo vidjeti:

 $ .ajax ({type: "HTTP method", // POST, GET, PUT, DELETE url: "Request path", // http: / / www.example.com/request dataType: "Vrsta podataka", / / html, xml, json success: function on success, error: function on error}); 

Vidimo da su svaki odjeljak koji smo opisali parametri koje prima naš zahtjev i da se to radi putem metode $ .ajax () koju isporučuje jQuery izravno, a to je maska ​​za kôd Javascript avion koji odgovara svakom motoru svakog podržanog preglednika, koji su u ovom trenutku gotovo sve najnovije reklame kao što su Chrome, Firefox, Opera, Safari Internet Explorer, i oni izvedeni iz motora ovih koje smo spomenuli.
Sada ćemo primijeniti u praksi ono što smo vidjeli u prethodnom odjeljku prilikom podnošenja zahtjeva AJAX sa stranice HTML koju ćemo izgraditi u sljedećem primjeru. Moramo znati da ćemo zahtijevati najnoviju verziju jQuery možemo dobiti, međutim možemo koristiti onu koju spremaju u svoju CDN, trebat će nam i mali web poslužitelj kako bismo mogli usmjeravati datoteke koje ćemo dobiti asinkrono, za to možemo koristiti WAMP u Windowsili instalaciju SVJETILJKA u sustavima Linux, u vezi MAC platformi koje možemo koristiti XAMP ili slično.
U sljedeći kôd ćemo prvo uključiti jQuery, tada ćemo u tijelu stvoriti oznaku s jedinstvenim ID -om gdje ćemo postaviti sadržaj odgovora na naš zahtjev, a pri kraju dokumenta napravit ćemo oznaku skripta gdje ćemo generirati kôd za podnošenje zahtjeva, u atributu url učinit ćemo zahtjev u indeks mape u kojoj se nalaze naše datoteke, to činimo da bismo prikazali rad našeg koda, međutim način na koji to možemo učiniti je zatražiti drugu datoteku koja će poslužiti odgovor koji nam je potreban, ajmo pogledajte kod:

 Primjer zahtjeva AJAXObradite AJAX 

Na sljedećoj slici vidimo kako je sve funkcioniralo, gdje možemo vidjeti uspješan odgovor iz našeg koda.

Pogledajmo što će se dogoditi kada promijenimo putanju zahtjeva za nepostojeći kako bismo forsirali pogrešku, osvježili i pritisnuli gumb Obradite AJAX:

Možemo vidjeti da se aktivira ono što smo stavili u kôd pogreške. No, najzanimljivije je to što je vrsta pogreške HTTP, u ovom slučaju to je bio resurs koji nije pronađen ili 404, uz malo vještine možda to možemo snimiti i poboljšati rješavanje pogrešaka, ovo ostaje tema istraživanja za zainteresirane.
Jedna od stvari koja jQuery želi da ne gubimo vrijeme i kodiramo obavljajući stvari na dug način, zato nam nudi prečace za pozive AJAX najčešće metode kao što su DOBITI Y POST, pa pomoću prečaca spremamo nekoliko redaka koda i na taj način možemo smanjiti težinu naše aplikacije.
Za to u službenoj dokumentaciji od jQuery Imamo sve postojeće slučajeve, međutim mi ćemo ponoviti prethodni primjer koristeći u ovom slučaju prečac, ali prije nego vidimo funkcionalni kod, pogledajmo nefunkcionalni primjer:

$ .get (put, podaci, SuccessFunction, ResponseType);

Kako smo primijetili da je ovaj poziv mnogo manji, što nam pomaže da imamo čistiji i lakši kôd, sada bi to primijenili na naš prethodni primjer kako slijedi:

 Primjer zahtjeva AJAXObradite AJAX 

Vidimo da je broj redaka i znakova značajno smanjen, što bi poboljšalo naš prijenos podataka korištenjem niže propusnosti. Ako pokrenemo sve u pregledniku, dobili bismo sljedeći odgovor:

Ovim smo završili ovaj vodič, a zatim smo vidjeli kako smo na jednostavan način objasnili što on predstavlja AJAX i njegove najosnovnije aplikacije s jQueryOd sada ostaje samo nastaviti istraživati ​​i pokušavati ugraditi ovu razvojnu tehniku ​​kad god su njezine prednosti primjerene našim aplikacijama.