Izraz Ajax se dešifrira kao Asynchronous javascript i XML (asinkroni javascript i XML) i označava tehnologiju izrade upita bez ponovnog učitavanja stranice: ako šalje neke podatke na poslužitelj, odgovara, a stranica se ne ažurira. Najjednostavniji primjer Ajax upita je pretraživanje. Ako otvorite tražilicu i počnete unositi upit, odzivnik će se pojaviti odmah ispod njega, ali stranica neće biti ažurirana. Za smanjeno snimanje Jquery metoda, koristi se znak za dolar.
Prednosti Ajaxa
Ajax vam omogućuje da uštedite na prometu i koristite ga prikladnijim za korisnika, budući da ne treba dugo čekati punu ponovno učitavanje stranice. No, programer koji koristi ovu metodu stalno je prisiljen pratiti radnje korisnika i reći im da shvate što se događa na stranici. Važno je razumjeti da starije verzije preglednika, uključujući tekst, ne podržavaju Ajax tehnologiju. Ponekad korisnici sami isključe JS korištenje, tako da skripte mogu prestati raditi. Stoga je važno razmišljati o alternativama, a ne previše za tu metodu.
Primjena Ajax i JQuery
Postojanje interaktivnih aplikacija ne bi bilo moguće bez Ajax tehnologije. Koristi se u Angulari (AngularJS) - okvir za JS. Nije potrebno koristiti Ajax tehnologiju na cijeloj stranici. Može se koristiti samo za neke elemente ažurirane stranice. Na primjer, za automatsku zamjenu, provjeru valjanosti obrazaca itraži. Knjižnica JQuery zbirka je gotovih rješenja pisanih u PHP-u. Možete ga pronaći po "Ajax libs jquery". Postoji mogućnost povezivanja putem posebne Googleove usluge. Zove se Ajax Googleapis. Jquery se u ovom slučaju povezuje izravno. Naravno, to ubrzava učitavanje stranice. Korisnici često pronalaze mini verziju Jquery, Ajax na Googleapis.com. Posjeduje funkcionalan, ali udobniji za početnike. Nazvana mini verzija Jquery, Ajax na Googleapis.com - min.js.
Formati prijenosa podataka
Kratica XML dekodiranja Ajax je format za razmjenu podataka. U početku, kada je tehnologija bila samo stvorena, razmjena je bila samo uz njezinu pomoć. XML je vrlo sličan HTML-u, ali sve oznake moraju biti zatvorene u njemu. Kasnije se u JS jeziku pojavio novi JSON format. Bilo je tako jednostavno i praktično da se proširilo na druge jezike i knjižnice. JSON je najprikladniji za prijenos male količine podataka, do 20 tisuća redaka. S njim je lakše raditi, fleksibilniji je i jasniji programeru. S više informacija, XML je poželjniji. Primjerice, slanje zahtjeva za "Yandex-search" provodi se pomoću ovog formata.
Kreiranje jednostavnog dokumenta u JSON formatu
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 pogledajte obje metode za pojedinosti.
Rad s AjaxomMožete koristiti JS bez jQuery. JSON linija može se pretvoriti u JS objekt i natrag. Razmotrimo kako to učiniti na primjerima. Prvo, napravite dokument i nazovite ga, na primjer, "čovjek" s proširenjem JSON. Zatim slijedi sljedeće:
Otvorite datoteku u uređivaču koda, na primjer, PhpStorm ili Sublime.
JSON format ima svoju vlastitu sintaksu. Prvo, objekt je stvoren - to zahtijeva kovrčave zagrade.
U zagradama treba sadržavati ključ i njegovo značenje. Ključevi trebaju biti u dvostrukim šapama. U standardnom JS prilikom kreiranja objekta ključ se piše bez navodnika. Na primjer, za objekt "čovjek" u JSON formatu morate stvoriti ključeve "name" i "age". Kao rezultat dobivamo sljedeći kod: {name: Pavel, dob: 28}.
Ako trebate nekoliko objekata, oni se nalaze u nizu, koji se ističe u uglatim zagradama. Važno je napomenuti da JSON format ne podržava komentare. U bilo kojem obliku to će biti pogreška. Ali za njih nema posebne potrebe. Sami ključevi mogu biti sljedećih tipova:
linija;
broj;
niz;
objekt. Niz je ispisan u uglatim zagradama, objekti u njemu su navodnici i prepisani su zarezima. Također možete dodati pridruženi objekt, kao što je adresa. Trebat će biti zatvorena u kovrčave zagrade. Ovo je najbrži način za stvaranje najizravnijeg JSON dokumenta. Za jednostavnost korištenja zaljubio se u programere.
Pretvaranje niza u objekt
JS niz se često pretvara u objekt JSON. Vrijedi obratiti pozornost na to u kodu prilikom prijenosa linije ukraj treba stajati podrezan, inače JS neće shvatiti da je gotovo. JS kod će izgledati ovako: Morate osigurati da su tipke u dvostrukim navodnicima, inače će doći do pogreške. Imamo jednostavnu liniju. Može doći s bilo kojeg poslužitelja. Kako bi se uvjerili da je ista linija, ona se može prikazati na konzoli dodavanjem naredbe "console.log (json)" kodu. Sada transformiramo liniju u objekt tako da prvo deklariramo varijablu i nazovemo je posebnom klasom parse: var jsonObj = JSON.parse (). Zatim prođemo parametar.Za rad s JSON formatom u JS-u postoji posebna klasa s istim imenom.Tako, možete pretvoriti niz u objekt.Ako iz nekog razloga pretvorba nije moguća, pojavit će se upozorenje. potvrda da je sve učinjeno ispravno, obje se varijable mogu prikazati na konzoli.U prvom slučaju, kada je izlaz konzola će zatražiti vrijednosti nakon jaz, jer smatra da JS broj smanjiti znak. To nije pogreška, ali ljepota kod nepotrebnih razmaka poželjno za čišćenje.
Pretvaranje objekta u niz
Možete izvesti recipročnu akciju i pretvoriti objekt u niz. Da bismo to učinili, objavljujemo varijablu i ponovno koristimo JSON klasu dodajući je kroz točku, ali odabiremo drugu metodu - stringify: var ObjtoStr = JSON.stringify (). Tada prolazimo željeni parametar. Ova naredba izvodi inverznu transformaciju. Ova opcija može prenijeti sve što nam treba, na primjer, samo ime. Da biste to učinili, ključ morate staviti u uglatim zagradama. Tako možete raditi s JSON-om s JS-om.
Pošalji zahtjev poslužitelju
Sada idemo na Ajax i pošalji ovaj zahtjevposlužitelj. Najprije 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 izgleda ovako: var xhr = XMLHttpRequest (). Do sada nećemo slati opcije. Sada konfigurirajte ovaj zahtjev. Da bismo to učinili, napišite: xhr.open (). U otvorenoj metodi konfigurirat ćemo adresu. Da biste to učinili, u zagrade dodajte riječ "GET". Zatim kroz zarez u jednostrukim navodnicima napišemo adresu hosta na koju želite poslati zahtjev. Na kraju retka dodajte naziv objekta, odnosno preuzetu datoteku - u našem slučaju to je "man.json".
Sinkroni i asinkroni zahtjev
Treći parametar koji je potreban za slanje zahtjeva jest odrediti hoće li biti sinkroni ili ne. Naziva se async i ima dvije vrijednosti: "lažni upit se obavlja sinkrono, a istina - u ovom slučaju bit će asinhroni. Ako je upit sinkroni, skript čeka odgovor. Ako odgovor traje sekunde, sljedeći redak koda neće se obraditi. u našem slučaju, prva vrijednost će biti potrebna, inače će biti potrebno provjeriti odgovor kroz događaj i dodijeliti funkciju koja će se izvršiti čim zahtjev stigne, zatim dodamo još jedan redak koda: xhr.send ().Odgovor na zahtjev mora biti kod.To može biti kod "200", što znači da je poslužitelj dostupan, "404" - dokument nije pronađen, "300" je preusmjeravanje i "500" je poslužiteljska pogreška. postoji li pogreška koju morate usporeditikod "200". Da biste to učinili, dodajte kôd u sljedeći redak: if (xhr.status! = 200) i ispišite vrijednost u konzolu. Ako je sve u redu, bit će pokrenuta grana, u koju ćemo dodati konzolu s vrijednošću "OK". Dakle, poslali smo zahtjev poslužitelju koristeći JS i saznali kako Ajax radi s JS-om. Stvorili smo XMLHttpRequest, specificirali metodu, put, sinkronizaciju ili asinkroni i dobili rezultat.
JQuery, Ajax
Iskusni čistači ne koriste JS za rad i koriste knjižnicu - najčešće jQuery. JS Ajax JQuery upiti su mnogo jednostavniji, zbog čega je postao tako popularan. Pokušat ćemo poboljšati skriptu s ovom knjižnicom. Prvo morate preuzeti JQuery. Dolazi u nekoliko verzija. Možete povezati knjižnicu putem usluge Google Code. Postoji mogućnost za programere, gdje je moguće komentirati i premjestiti liniju. Druga verzija je minimalna. Nalazi se na ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. Ima smisla da se ova biblioteka poveže na radnom poslužitelju. Knjižnicu možete dodati pomoću sljedećeg koda putem usluge Google Code:& lt; script src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">U ovom kodu, na primjer, koristi se verzija 310. Za ispravan rad morate dodati ažuriranu 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 njezino mjesto u oznaci skripte i stavljajući je u glavu. Tada počinjemo pisati samu skriptu. Počnimo sa sljedećim retkom: $ (document) .ready (). Kada je dokument spreman, bit će pozvanugniježđena funkcija: (function () {}). To je potrebno kako bi se učitao DOM model s kojeg radimo, odnosno sve što se nalazi u oznaci tijela. Ako to ne učinite, skripta će se obraditi prije pokretanja DOM modela.
Stvaranje obrasca
Kao primjer, Ajax će stvoriti obrazac. Da biste to učinili, napravite div s razredom formi i dodajte ga u tip unosa "text" i naziv atributa s vrijednošću "name". Zatim dodajte drugi unos, s tipom "text" i nazivom "address". Svaki ulaz će dodijeliti identifikator. Vrijednosti atributa imena možete koristiti kao identifikator. Dodajte savjet za oba ulaza tražeći od korisnika da unese ime i adresu. Ako želite, možete dodati još jednu liniju za dob. Sada morate napraviti gumb za slanje obrasca. Unutar oznake gumba upisujemo riječ "pošalji" i dodamo identifikator btn. Dodajte graničnike - oznake br - za svaki redak i provjerite što se dogodilo.
Možete dodati vanjske alineje pisanjem u oznaku stila, ali to nije obavezno. Dok obrazac ne radi. Za njegovo funkcioniranje, gumb mora biti povezan s događajem, jer će podaci biti poslani kada se pritisne. Da biste to učinili, odaberite gumb na izborniku i unesite događaj "klik": $ ('# btn'). On ('klik'). Sada će se ova funkcija izvršiti kada se klikne. Koristimo metodu on, koja potpisuje određenu funkciju na događaju klika za element. To jest, kada kliknete na gumb, on će raditi. Provjerite da li sve radi s izlazom konzole. Nema mnogo načina za slanje zahtjeva na Jquery, Ajax. Možete koristiti get, post ili samo Ajax. Budući da ti podaci moguKoristit ćemo Jquery metodu, Ajax post, da nešto promijenimo.
Dobivanje vrijednosti polja obrasca
U ovom koraku trebamo dobiti vrijednost svih polja obrasca. U Jquery, Ajaxu postoje dva načina za to. Možete koristiti funkciju ili raditi bez nje. Za prvu verziju napišemo sljedeći kod: var ime = $ ('# name'). Zatim dodajte istu liniju adrese i dob. Dobili smo linkove na elemente, a ne na najvažnije. Sada koristimo Jquery metodu, Ajax post. Da biste to učinili, upišite: $ .post (). Sada je potrebno prilagoditi metodu. Prihvaća url-adresu na koju će se poslati obrazac. Da bismo to učinili, koristit ćemo validator. Da biste to učinili, upišite zagrade '/validator.php'. Dodajte drugi parametar - sami podaci: var data = 'name =' + name.val () + '& amp; adresa =' + adresa.val () + '& amp; age =' + age.val (). Sada imamo podatke dobivene od Jquery, Ajax. Ostaje samo dodavanje funkcije povratnog poziva koja će biti pozvana kada odgovor stigne s poslužitelja. Potrebno je propisati sljedeće parametre: podatke o poslužitelju, opis statusa i je li zahtjev izvršen. Parametar podataka izlazimo na konzolu kako bismo provjerili radi li sve. Također je važno napomenuti da se Ajax-zahtjev uvijek radi u Unicode-u, tako da bi kodiranje dokumenta trebalo biti utf-8. Ako su web-lokacija i poslužitelj u različitom kodiranju, a Ajax se izvršava u unicode formatu, poslužitelj će vratiti znakove, a linija će se morati ponovno kodirati. Kako bi se to izbjeglo, poželjno je učiniti sve u utf-8.
Rad s PHP-om
Sada koristimo Jquery, Ajax PHP. Stvorili smo novu datoteku i nazvali je validator.php. Iznesite naše podatke. Za to pišemo: $ array = $ post. Sada izlazimo sve podatke u JSON formatu: echo JSON_encode ($ array). Pogledajte kakoradi obrazac popunjavanjem polja i slanjem zahtjeva poslužitelju. Ako je sve učinjeno ispravno, dobit ćemo objekt s danim parametrima. Dobili smo podatke, sada moraju obraditi i napisati. Pišemo: if (isset ($ post ['name']) & amp; (isset ($ post ['age']) & amp; (isset ($ post ['adresa'].) To znači da Nakon toga dodamo uvjet: else {$ array ['status'] = 'pogreška'} Provjerite da li sve radi.Ako ima grešaka u kodu, tražimo ih i popravljamo ih asinhrono, korisnik može unijeti dodatne informacije u zahtjev za prijenos. u trenutku prijenosa na poslužitelj Možete koristiti ne samo programski jezik PHP-a, već i druge poslužiteljske jezike.
