Izraz Ajax je dešifriran kot Asinhroni javascript in XML (asinhroni javascript in XML) in označuje tehnologijo izdelave poizvedb brez ponovnega nalaganja strani: če pošlje nekaj podatkov strežniku, se odzove in stran se ne posodobi. Najpreprostejši primer poizvedbe Ajax je iskanje. Če odprete iskalnik in začnete vnašati poizvedbo, se bo takoj pojavil poziv s pozivom, vendar stran ne bo posodobljena. Za zmanjšano beleženje metod klicanja Jquery se uporablja znak za dolar.
Prednosti Ajaxa
Ajax vam omogoča, da prihranite promet in ga uporabite bolj priročno za uporabnika, saj ne traja dolgo čakati na popolno ponovno nalaganje strani. Toda razvijalec, ki uporablja to metodo, je nenehno prisiljen slediti dejanjem uporabnikov in jim povedati, da razumejo, kaj se dogaja na strani. Pomembno je razumeti, da starejše različice brskalnikov, vključno z besedilom, ne podpirajo tehnologije Ajax. Včasih uporabniki sami izklopijo uporabo JS, tako da lahko skripte prenehajo delovati. Zato je pomembno razmišljati o alternativah in ne preveč za upanje na to metodo.
Uporaba Ajaxa in JQueryja
Obstoj interaktivnih aplikacij ne bi bil mogoč brez tehnologije Ajax. Uporablja se v Angulari (AngularJS) - okvir za JS. Na celotni strani ni potrebno uporabljati tehnologije Ajax. Uporablja se lahko samo za nekatere elemente posodobljene strani. Na primer za samodejno zamenjavo, validacijo obrazcev iniskanje Knjižnica JQuery je zbirka pripravljenih rešitev, zapisanih v PHP. Najdete ga z "Ajax libs jquery". Obstaja možnost povezave prek posebne Googlove storitve. Imenuje se Ajax Googleapis. Jquery se v tem primeru poveže neposredno. Seveda pospeši nalaganje strani. Uporabniki pogosto najdejo mini različico Jquery, Ajax na Googleapis.com. Ima okrnjeno funkcijo, vendar bolj udobno za začetnike. Poimenovana mini verzija Jquery, Ajax na Googleapis.com - min.js.
Oblike prenosa podatkov
Kratica za dekodiranje XML Ajax je format za izmenjavo podatkov. Sprva, ko je bila tehnologija le ustvarjena, je bila izmenjava le z njeno pomočjo. XML je zelo podoben HTML-ju, vendar morajo biti v njem zaprte vse oznake. Kasneje se je v jeziku JS pojavil nov format JSON. Bilo je tako preprosto in priročno, da se je razširilo na druge jezike in knjižnice. JSON je najbolj primeren za prenos majhne količine podatkov, do 20 tisoč vrstic. Z njim je lažje delati, programer je bolj prilagodljiv in jasen. Z več informacijami je XML bolj zaželen. Na primer, pošiljanje zahtev za »Yandex-search« se izvaja s to obliko zapisa.
Ustvarjanje preprostega dokumenta v obliki JSON
V JS vse lastnosti opisujejo en globalni objekt okna, tj okno brskalnika. Vse knjižnice opisujejo funkcije (metode) in lastnosti tega objekta. JSON je ločen razred, ki podeduje predmet in ima dve lastni metodi: razčlenjevanje in strjevanje. Za podrobnosti si oglejte spodnje metode.
Delo z AjaxomJS lahko uporabite brez jQuery. Vrstica JSON se lahko pretvori v objekt JS in nazaj. Poglejmo, kako to narediti na primerih. Najprej ustvarite dokument in ga poimenujte, na primer "man" z razširitvijo JSON. Nato naredimo naslednje:
Odprite datoteko v urejevalniku kod, na primer PhpStorm ali Sublime.
Format JSON ima svojo lastno sintakso. Najprej se ustvari objekt - zahteva zavite oklepaje.
V oklepajih mora biti ključ in njegov pomen. Ključi morajo biti v dvojnih šapah. V standardnem JS pri ustvarjanju objekta je ključ napisan brez narekovajev. Na primer, za predmet "man" v formatu JSON morate ustvariti ključe "ime" in "starost". Zato dobimo naslednjo kodo: {name: Pavel, starost: 28}.
Če potrebujete več predmetov, so postavljeni v polje, ki izstopa v oglatih oklepajih. Pomembno je vedeti, da oblika JSON ne podpira komentarjev. V kakršni koli obliki bo to napaka. Vendar za njih ni posebnih potreb. Ključi so lahko naslednjih vrst:
vrstica;
številka;
polje;
predmet.
Polje je zapisano v oglatih oklepajih, objekti v njem so narekovaji in se prepisujejo v vejice. Dodate lahko tudi dodan predmet, na primer naslov. Morali boste biti zaprti v zavitih oklepajih. Tukaj je najhitrejši način za ustvarjanje najbolj enostavnega dokumenta JSON. Za preprosto uporabo se je zaljubil v razvijalce.
Pretvorba niza v objekt
Niz JS se pogosto pretvori v objekt JSON. To je vredno pozornosti, da v kodo, ko prenos črto vkonec mora stati poševno, sicer JS ne bo razumel, da je konec. Koda JS bo izgledala takole: Zagotoviti morate, da so ključi v dvojnih narekovajih, sicer bo prišlo do napake. Imamo preprosto linijo. Lahko pride iz katerega koli strežnika. Da se prepričate, da je ista vrstica, jo lahko prikažete na konzoli tako, da v kodo dodate ukaz "console.log (json)" .Zdaj pretvarjamo črto v objekt tako, da najprej deklariramo spremenljivko in jo imenujemo poseben razred razčleniti = JSON.parse (). Potem smo posredovali parameter.Za delo z JSON formatom v JS obstaja poseben razred z istim imenom. Tako lahko pretvorite niz v objekt. Če iz nekega razloga pretvorba ni mogoča, se prikaže opozorilo. potrditev, da je vse narejeno pravilno, se na konzoli lahko prikažeta obe spremenljivki, v prvem primeru, ko je izhod konzola bo pozvala vrednosti po vrzel, saj meni, da JS številko drastično znak. To ni napaka, ampak lepota kodnih nepotrebnih vrzeli zaželeno, da se čiščenje.
Pretvorba predmeta v niz
Izvedete lahko vzajemno dejanje in objekt pretvorite v niz. To storimo tako, da razglasimo spremenljivko in jo ponovno uporabimo v razredu JSON z dodajanjem skozi točko, vendar izberemo drugo metodo - stringify: var ObjtoStr = JSON.stringify (). Nato prenesemo želeni parameter. Ta ukaz izvaja inverzno transformacijo. Ta možnost lahko posreduje vse, kar potrebujemo, na primer samo ime. Če želite to narediti, morate ključ vstaviti v oglate oklepaje. Tako lahko delate z JSON z JS.
Pošlji zahtevo strežniku
Zdaj pa pojdimo na Ajax in pošljemo to zahtevostrežnik Najprej morate izdelati objekt XMLHttpRequest. Ta razred je odgovoren za pošiljanje zahteve in vam omogoča, da ga ustvarite brez ponovnega nalaganja strani. Uporabljen bo JSON, vendar se ime razreda ni spremenilo: XML. Koda za pošiljanje zahteve izgleda takole: var xhr = XMLHttpRequest (). Do sedaj ne bomo pošiljali možnosti. Zdaj nastavite to zahtevo. To naredimo tako: xhr.open (). V odprti metodi bomo konfigurirali naslov. To naredite tako, da v oklepaju dodate besedo "GET". Nato prek vejice v enojnih narekovajih napišemo naslov gostitelja, kamor želite poslati zahtevo. Na koncu vrstice dodajte ime predmeta, tj. Preneseno datoteko - v našem primeru je to "man.json".
Sinhrona in asinhrona zahteva
Tretji parameter, ki je potreben za pošiljanje zahteve, je določiti, ali bo sinhroni ali ne. Imenuje se async in ima dve vrednosti: "napačna poizvedba se izvede sinhrono, in resnično - v tem primeru bo asinhrona. Če je poizvedba sinhrona, skript čaka na odgovor. Če odgovor traja sekundo, naslednja vrstica kode ne bo obdelana. v našem primeru bo prva vrednost potrebna, sicer bo treba preveriti odgovor skozi dogodek in dodeliti funkcijo, ki jo je treba izvesti, takoj ko pride zahteva. Nato dodamo še eno vrstico kode: xhr.send ().Odgovor na zahtevo mora biti koda.To je lahko koda "200", kar pomeni, da je strežnik na voljo, "404" - dokument ni najden, "300" je preusmeritev in "500" je napaka strežnika. ali obstaja napaka, ki jo morate primerjatioznaka "200". Da bi to naredili, dodajte kodo v naslednjo vrstico: if (xhr.status! = 200) in vnesite vrednost v konzolo. Če je vse v redu, se bo začela podružnica, v kateri bomo dodali konzolo z vrednostjo "OK". Torej, smo poslali zahtevo strežniku z uporabo JS in ugotovili, kako Ajax deluje z JS. Ustvarili smo XMLHttpRequest, podali metodo, pot, sinhronizacijo ali asinhrono in prejeli rezultat.
JQuery, Ajax
Izkušeni čistilci ne uporabljajo JS za delo in uporabljajo knjižnico - najpogosteje jQuery. Poizvedbe JS Ajax JQuery so veliko enostavnejše, zato je postala tako priljubljena. S to knjižnico bomo skušali izboljšati skript. Najprej morate prenesti JQuery. Na voljo je v več različicah. Knjižnico lahko povežete s storitvijo Google Code. Obstaja možnost za razvijalce, kjer je možno komentirati in premakniti vrstico. Druga različica je minimalna. Nahaja se na ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. Smiselno je, da se ta knjižnica poveže na delujočem strežniku. Knjižnico lahko dodate z naslednjo kodo prek storitve Google Code:& lt; script src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">V tej kodi se na primer uporablja različica 310. Za pravilno delo morate dodati posodobljeno različico. Pomembno je, da se naslov začne z "//ajax.googleapis.com/ajax/libs/jquery". Nato ustvarimo novo datoteko v formatu html in povežemo knjižnico, v njej določimo njeno lokacijo in jo postavimo v glavo. Potem začnemo pisati scenarij sam. Začnimo z naslednjo vrstico: $ (document) .ready (). Ko je dokument pripravljen, bo klicanugnezdena funkcija: (funkcija () {}). To je potrebno za nalaganje modela DOM, iz katerega delamo, to je vse, kar je v telesni oznaki. Če tega ne storite, bo skript obdelan pred zagonom modela DOM.
Ustvarjanje obrazca
Na primer Jquery, Ajax bo ustvaril obrazec. Če želite to narediti, ustvarite div z razredom obrazcev in ga dodajte v tip vnosa "text" in ime atributa z vrednostjo "name". Nato dodajte še en vnos s tipom "text" in imenom "address". Vsak vhod bo dodelil identifikator. Vrednosti atributov ime lahko uporabite kot identifikator. Dodajte namig za oba vhoda, ki od uporabnika zahteva, da vpiše ime in naslov. Če želite, lahko dodate staro za drugo vrstico. Sedaj morate narediti gumb za pošiljanje obrazca. V notranjosti gumba zapišemo besedo "send" in dodamo identifikator btn. Dodajte ločila - oznake br - za vsako vrstico in preverite, kaj se je zgodilo.
Zunanjo alinejo lahko dodate tako, da jih zapišete v slogovno oznako, vendar to ni obvezno. Čeprav obrazec ne deluje. Za njegovo delovanje mora biti gumb povezan z dogodkom, saj bodo podatki poslani ob pritisku. To storite tako, da izberete gumb na izbirniku in vnesete dogodek "klik": $ ('# btn'). On ('klik'). Zdaj se bo ta funkcija izvršila, ko boste kliknili. Uporabljamo metodo on, ki na elementu klikne določeno funkcijo. To pomeni, da ko kliknete gumb, bo delovalo. Preverite, ali vse deluje z izhodom ukazne mize. Na Jquery, Ajax, ni veliko načinov za pošiljanje zahteve. Lahko uporabite get, post ali samo Ajax. Ker lahko ti podatkiZa spremembo bomo uporabili metodo Jquery, Ajax post.
Pridobivanje vrednosti polja obrazca
V tem koraku moramo dobiti vrednost vseh polj obrazcev. V Jquery, Ajax, obstajata dva načina za to. Funkcijo lahko uporabite ali pa to storite brez nje. Za prvo različico zapišemo naslednjo kodo: var ime = $ ('# name'). Nato dodajte isto vrsto naslova in starost. Imamo povezave do elementov, ne pa najpomembnejših. Zdaj uporabljamo Jquery metodo, Ajaxov post. To naredite tako: $ .post (). Zdaj je treba metodo prilagoditi. Sprejema url-naslov, kjer bo obrazec poslan. Za to bomo uporabili validator. To naredite tako, da zapišete oklepaje '/validator.php'. Dodajte še en parameter - podatke same: var data = 'name =' + name.val () + '& amp; naslov =' + naslov.val () + '& amp; starost =' + starost.val (). Zdaj imamo podatke, ki so jih pridobili Jquery, Ajax. Ostaja le dodajanje funkcije povratnega klica, ki bo klicana, ko bo odgovor prišel iz strežnika. Predpisati mora naslednje parametre: podatke o strežniku, opis statusa in ali je bila zahteva izvršena. Podatkovni parameter oddajamo v ukazno mizo in preverimo, ali vse deluje. Pomembno je tudi omeniti, da je zahteva Ajax vedno opravljena v Unicode, zato mora biti kodiranje dokumenta utf-8. Če sta spletno mesto in strežnik v drugačnem kodiranju, in Ajax se izvaja v formatu unicode, bo strežnik vrnil znake in vrstico bo treba ponovno kodirati. Da bi se temu izognili, je zaželeno narediti vse v utf-8.
Delo s PHP
Zdaj uporabljamo Jquery, Ajax PHP. Ustvarimo novo datoteko in jo pokličemo validator.php. Izvedite naše podatke. Za to pišemo: $ array = $ post. Zdaj izpisujemo vse podatke v JSON formatu: echo JSON_encode ($ array). Preverite, kakoObrazec deluje tako, da izpolni polja in pošlje zahtevo strežniku. Če je vse narejeno pravilno, bomo dobili predmet z danimi parametri. Dobili smo podatke, zdaj pa morajo obdelati in napisati. Pišemo: if (isset ($ post ['name']) & amp; & amp; (isset ($ post ['starost']) & amp; (isset ($ post ['naslov'].) To pomeni, da Spremenljivka je tam, nato dodamo pogoj: else {$ array ['status'] = 'napaka'} Preverite, ali vse deluje.Če pride do napak v kodi, jih iščemo in popravimo Asinhrono lahko uporabnik v zahtevo za prenos vnese dodatne informacije. trenutek, ko se prenese na strežnik, lahko uporabite ne le programski jezik PHP, temveč tudi druge strežniške jezike.
