JQuery Ajax: Upotreba i funkcije

Pojam Ajax dekodira se kao Asinkroni Javascript i XML (asinkroni Javascript i XML) i odnosi se na tehnologiju izgradnje upita bez ponovnog učitavanja stranice: ako pošaljete neke podatke na poslužitelj, on odgovara i stranica se ne ažurira. Najjednostavniji primjer Ajax zahtjeva je pretraživanje. Ako otvorite tražilicu i počnete unositi upit, savjeti će se odmah pojaviti ispod njega, ali stranica se neće osvježiti. Za skraćeno pozivanje Jquery metoda, koristi se znak za dolar.

Prednosti Ajaxa

Ajax vam omogućuje da uštedite promet, a njegova je upotreba prikladnija za korisnika, jer ne morate dugo čekati na ponovno učitavanje cijele stranice. No, programer pomoću ove metode je prisiljen stalno pratiti akcije korisnika i potaknuti ih da shvate što se događa na stranici. Važno je razumjeti da stare verzije preglednika, uključujući tekst, ne podržavaju Ajax tehnologiju. Ponekad korisnici onemoguće vlastitu upotrebu JS-a, jer skripte mogu prestati raditi. Stoga je važno razmišljati o alternativama, a ne oslanjati se samo na tu metodu.

Ajax i jQuery aplikacija

Postojanje interaktivnih aplikacija ne bi bilo moguće bez Ajax tehnologije. Koristi se u radu Angular (AngularJS) - okvira za JS. Korištenje Ajax tehnologije na cijeloj stranici nije obavezno. Može se koristiti samo za neke elemente stranice koja se ažurira. Na primjer, za automatsko ispravljanje, provjeru valjanosti i pretraživanje.

Knjižnica jQuery zbirka je gotovih rješenja napisanih u JS-u. Možete ga pronaći po upitu “Ajax libs Jquery”. Postoji varijanta njezine veze putem posebne Googleove usluge. To se zove Ajax Googleapis. Jquery se u ovom slučaju povezuje izravno. Naravno, to ubrzava učitavanje stranice. Najčešće korisnici pronalaze mini verziju Jquery Ajaxa na Googleapis.com. Ima smanjenu funkcionalnost, ali je pogodnija za početnike. Mini verzija Ajax Jquery na Googleapis.com zove se - min.js.

Formati prijenosa podataka

XML u kraticama za dekodiranje Ajax je format za razmjenu podataka. U početku, kada je tehnologija prvi put stvorena, razmjena se dogodila samo uz njezinu pomoć. XML je vrlo sličan HTML-u, ali u njemu sve oznake moraju biti zatvorene. Kasnije se pojavio novi format u JS jeziku - JSON. Bilo je tako jednostavno i praktično da se proširilo na druge jezike i knjižnice. JSON je prikladniji za prijenos male količine podataka, do 20 tisuća redaka. Lakše je raditi s njim, on je fleksibilniji i razumljiviji za programera. S više informacija koristite XML. Primjerice, slanje zahtjeva Yandex pretraživanju provodi se pomoću tog formata.

Izrada najjednostavnijeg JSON dokumenta

U JS-u sva svojstva opisuju jedan globalni objekt prozora, tj. Prozor preglednika. Sve knjižnice opisuju funkcije (metode) i svojstva ovog objekta. JSON je zasebna klasa koja nasljeđuje od objekta i ima dvije vlastite metode: parse i stringify. U nastavku ćemo detaljnije raspraviti o obje metode.

Možete raditi s Ajax iz JS bez korištenja jQuery. JSON niz može se pretvoriti u JS objekt i obrnuto. Razmotrite kako to učiniti s primjerima. Prvo, napravite dokument i nazovite ga, na primjer, “man” s JSON ekstenzijom. Zatim slijedi sljedeće korake:

1. Otvorite datoteku u uređivaču koda, na primjer, PhpStorm ili Sublime.
2. JSON format ima vlastitu sintaksu. Prvo, objekt je stvoren - treba mu kovrčava zagrada.
3. Ključ i njegova vrijednost moraju biti u zagradama. Tipke moraju biti u dvostrukim navodnicima. U standardnom JS, prilikom kreiranja objekta, ključ se piše bez navodnika. Na primjer, za objekt "čovjek" u JSON formatu, morate stvoriti tipke "ime" (ime) i "dob" (dob). Kao rezultat toga, dobivamo sljedeći kod: {"name": "Pavel", "age": 28}.

Ako trebate nekoliko objekata, oni se nalaze u nizu, koji se razlikuje po uglatim zagradama. Važno je imati na umu da JSON format ne podržava komentare. U bilo kojem obliku to će biti pogreška. Ali za njih nema posebne potrebe.

Sami vrijednosti ključa mogu biti sljedećih tipova:

• string;
• broj;
• niz;
• objekt.

Niz je pisan u uglatim zagradama, objekti u njemu su zatvoreni u navodnike i razdvojeni zarezom. Također možete dodati pridruženi objekt, kao što je adresa. Morat će biti zatvoren u aparatić. Tako brzo kreirate najjednostavniji JSON dokument. Za praktičnost korištenja i zaljubio se u programere.

Pretvaranje niza u objekt

Niz u JS-u se često mora pretvoriti u JSON objekt. Valja napomenuti da u kodu kada se redak prelomi na kraju treba biti kosa crta, inače JS neće razumjeti da je gotovo. Kod u JS-u će izgledati ovako:

Potrebno je osigurati da su tipke u dvostrukim navodnicima, u protivnom će se pojaviti pogreška. Imamo najjednostavniji niz. Može doći s bilo kojeg poslužitelja. Da biste bili sigurni da je to string, možete ga ispisati na konzolu dodavanjem naredbe “console.log (json)” kodu. Sada pretvorite string u objekt. Da bismo to učinili, prvo ćemo deklarirati varijablu i nazvati posebnu klasu parse za nju: var jsonObj = JSON.parse (). Tada prolazimo parametar. Za rad s JSON formatom u JS-u postoji posebna klasa s istim imenom. Dakle, niz možete pretvoriti u objekt. Ako iz nekog razloga pretvorba nije moguća, pojavit će se upozorenje. Da biste potvrdili da je sve ispravno učinjeno, u konzoli se mogu prikazati obje varijable. U prvom slučaju, prilikom prikazivanja niza u konzoli, razmaci će se pojaviti nakon vrijednosti, budući da će JS brojati njihov broj prije kose crte. To nije pogreška, ali za ljepotu koda preporučljivo je ukloniti dodatne razmake.

Pretvorite objekt u niz

Možete učiniti suprotno i pretvoriti objekt u niz. Da bismo to učinili, deklariramo varijablu i ponovno koristimo JSON klasu, dodajući je kroz točku, ali odabiremo drugu metodu - stringify: var ObjtoStr = JSON.stringify (). Tada prenosimo potreban parametar. Ova naredba izvodi inverznu transformaciju. Ovaj parametar može prenijeti sve što nam je potrebno, na primjer, samo ime. Da biste to učinili, željeni ključ mora biti priložen u uglatim zagradama. Tako možete raditi s JSON-om iz JS-a.

Pošaljite zahtjev poslužitelju

Idemo sada na Ajax i pošaljite ovaj zahtjev poslužitelju. Prvo morate stvoriti objekt XMLHttpRequest. Ova klasa je odgovorna za slanje zahtjeva i omogućuje vam da ga kreirate bez ponovnog učitavanja stranice. JSON će se koristiti, ali naziv klase nije promijenjen: XML. Kod za slanje zahtjeva je: var xhr = XMLHttpRequest (). Još nećemo slati opcije. Sada konfigurirajte ovaj upit. Da biste to učinili, napišite: xhr.open (). Otvorena metoda konfigurira adresu. Da biste to učinili, dodajte riječ "GET" u zagrade. Nadalje, odvojeni zarezom u pojedinačne navodnike, upisujemo adresu hosta gdje poslati zahtjev. Na kraju retka dodajte naziv objekta, tj. Datoteku za preuzimanje - u našem slučaju to je "man.json".

Sinkroni i asinkroni zahtjev

Treći parametar koji je potreban za slanje zahtjeva je odrediti hoće li biti sinkroni ili ne. Naziva se async i ima dvije vrijednosti: false - zahtjev je sinkroniziran, a true - u ovom slučaju bit će asinkroni. Ako je zahtjev sinkroni, skript čeka odgovor. Ako odgovor traje sekunde, sljedeći redak koda neće se obraditi. Sinhroni zahtjev izvršit će se u zasebnoj niti, a skripta će nastaviti izvršavanje naredbi. U našem slučaju, trebat će nam prva vrijednost, jer će u suprotnom provjera odgovora morati biti izvršena kroz događaj i dodijeliti funkciju koja će se izvršiti čim zahtjev stigne.

Zatim dodajte sljedeći redak koda: xhr.send (). Sada, kao odgovor na zahtjev, kod bi trebao doći. To može biti kod "200", što znači da je poslužitelj dostupan, "404" - dokument nije pronađen, "300" - preusmjeravanje i "500" - pogreška s poslužitelja. Da biste saznali postoji li pogreška, trebate usporediti kôd s "200". Da biste to učinili, u kôd dodajte sljedeći redak: if (xhr.status! = 200) i ispišite vrijednost u konzolu. Ako je sve u redu, grana else će početi raditi, na koju dodamo izlaz u konzolu s vrijednošću "OK". Tako smo poslali zahtjev poslužitelju koristeći JS i saznali kako Ajax radi iz JS-a. Stvorili smo XMLHttpRequest, odredili metodu, put, sinkronicitet ili asinkronost i dobili rezultat.

Jquery ajax

Iskusni programeri ne koriste čisti JS za rad, već koriste bilo koju knjižnicu - najčešće jQuery. JS Ajax zahtjevi u jQuery je mnogo lakše stvoriti, zbog čega je postao tako popularan. Pokušajmo poboljšati skriptu pomoću ove knjižnice. Prvo trebate preuzeti jQuery. Dolazi u nekoliko verzija. Možete povezati knjižnicu putem usluge Google Code. Postoji mogućnost za programere, gdje postoji mogućnost komentiranja i prekida retka. Druga verzija je minimalna. Nalazi se na adresi: ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. Ima smisla povezati ovu knjižnicu na radnom poslužitelju. Knjižnicu možete dodati pomoću sljedećeg koda putem usluge Google Code:

Ovaj kod koristi verziju 3.1.0 kao primjer. Da biste ispravno radili, morate dodati trenutnu verziju. Važno je da adresa počinje s "//ajax.googleapis.com/ajax/libs/jquery". Zatim kreiramo novu datoteku u HTML formatu i povezujemo knjižnicu navodeći adresu njezina mjesta u oznaci skripte i stavljajući je u glavu. Pokrenuli smo ga s ovim redom: $ (document) .ready () .Kada je dokument spreman, ugnežđena funkcija će se zvati: (function () {}) .To je potrebno kako bi se učitao DOM model s kojim radimo sve što je u oznaci tijela, ako se to ne učini, skripta će se obraditi prije učitavanja DOM modela.

Stvaranje obrasca

Kao primjer jQuery Ajax, napravite obrazac. Da biste to učinili, kreirajte div s razredom formi i dodajte unos s tipom "text" i atributom imena s vrijednošću "name". Zatim dodamo još jedan ulaz, s tipom “text” i imenom “address”. Svakom je ulazu dodijeljen identifikator. Kao identifikator možete koristiti vrijednosti atributa imena. Dodajte savjet za oba unosa s ponudom korisniku da unese ime i adresu. Po želji, možete dodati još jednu liniju za dob. Sada ostaje da napravite gumb za slanje obrasca. Unutar oznake gumba upisujemo riječ „pošalji“ i dodamo identifikator btn. Dodamo graničnike - br oznake - u svaki redak i provjerimo što imamo.

Možete dodati vanjske uvlake pisanjem u oznaku stila, ali to nije obavezno. Dok obrazac ne radi. Za njegov rad potrebno je povezati događaj s gumbom, jer će podaci biti poslani točno kada se pritisne. Da biste to učinili, odaberite gumb na selektoru i unesite događaj “klik”: $ ('# btn'). Sada kada kliknete ovu funkciju izvršit će se. Koristimo metodu on, koja označava određenu funkciju na događaju klika na neki element. To jest, kada kliknete na gumb, on će raditi. Provjeravamo da sve radi uz pomoć izlaza na konzolu. Metode slanja zahtjeva u jQuery Ajax nisu toliko. Možete koristiti get, post ili samo Ajax. Budući da ti podaci mogu nešto promijeniti, koristit ćemo Jquery Ajax post metodu.

Dobivanje vrijednosti polja obrasca

U sljedećem koraku trebamo dobiti vrijednosti svih polja obrasca. U jQuery Ajaxu postoje dvije opcije za to. Možete koristiti funkciju ili raditi bez nje. Za prvu opciju napišemo sljedeći kod: var ime = $ ('# name'). Zatim dodamo slične linije za adresu i dob. Primili smo reference na elemente, a ne na same vrijednosti. Sada koristimo Jquery Ajax post metodu. Da bismo to učinili, napišite: $ .post (). Sada trebate konfigurirati metodu. Potrebna je URL adresa na koju će se poslati obrazac. Za to ćemo koristiti validator. Da biste to učinili, u zagradi pišemo '/validator.php'.

Dodajte još jedan parametar - sami podaci: var data = 'name =' + name.val () + '& address =' ​​+ address.val () + '& age =' + age.val (). Sada imamo podatke dobivene Jquery Ajax metodom. Ostaje samo dodati funkciju povratnog poziva, koja će biti pozvana kada odgovor stigne s poslužitelja. Potrebno je registrirati sljedeće parametre: podatke o poslužitelju, opis statusa i je li zahtjev izvršen. Prikazujemo parametar podataka u konzoli kako bismo provjerili radi li sve. Također je važno uzeti u obzir da je Ajax zahtjev uvijek učinjen u Unicodeu, jer kodiranje dokumenta mora biti utf-8. Ako su web-lokacija i poslužitelj u različitom kodiranju, a Ajax se izvršava u Unicode-u, poslužitelj će vratiti hijeroglife, a string će morati biti rekodiran. Kako bi se to izbjeglo, preporučljivo je učiniti sve u utf-8.

Rad s PHP-om

Sada koristite JQuery Ajax s PHP-om. Stvorite novu datoteku i nazovite je validator.php. Prikazat ćemo naše podatke. Da bismo to učinili, pišemo: $ array = $ post. Sada ispišite sve podatke u JSON formatu: echo JSON_encode ($ array). Provjeravamo kako obrazac funkcionira popunjavanjem polja i slanjem zahtjeva poslužitelju. Ako je sve učinjeno ispravno, dobit ćemo objekt s navedenim parametrima. Dobili smo podatke, sada ih je potrebno obraditi i zabilježiti. Pišemo: if (isset ($ post ['name']) && (isset ($ post ['age']) && (isset ($ post ['adresa']). Izdanje znači da takva varijabla postoji. : else {$ array ['status'] = 'pogreška'} Provjeravamo da li sve radi.Ako ima grešaka u kodu, tražimo i popravljamo ih.Zahvaljujući asinkronom prijenosu zahtjeva, korisnik može unijeti dodatne informacije u trenutku kada je prijenos uključen Možete koristiti ne samo PHP programski jezik, nego i druge poslužiteljske jezike.