JQuery Ajax: Uporaba in funkcije

Izraz Ajax se dešifrira kot Asinhroni Javascript in XML (asinhroni Javascript in XML) in se nanaša na tehnologijo gradnje poizvedb brez ponovnega nalaganja strani: če pošljete nekaj podatkov strežniku, se odzove in stran se ne posodobi. Najpreprostejši primer zahteve Ajax je iskanje. Če odprete iskalnik in začnete vnašati poizvedbo, se bodo nasveti prikazali takoj pod njim, vendar se stran ne bo osvežila. Za skrajšano snemanje klicev Jquery metod se uporablja znak za dolar.

Prednosti Ajaxa

Ajax vam omogoča, da prihranite promet, njegova uporaba pa je za uporabnika primernejša, ker vam ni treba dolgo čakati na polno ponovno nalaganje strani. Toda razvijalec s to metodo je prisiljen nenehno spremljati delovanje uporabnikov in jih spodbuditi, da razumejo, kaj se dogaja na strani. Pomembno je razumeti, da stare različice brskalnikov, vključno z besedilom, ne podpirajo tehnologije Ajax. Včasih uporabniki onemogočijo lastno uporabo JS, ker lahko skripti prenehajo delovati. Zato je pomembno razmišljati o alternativah in se ne zanašati samo na to metodo.

Aplikacija Ajax in jQuery

Obstoj interaktivnih aplikacij ne bi bil mogoč brez tehnologije Ajax. Uporablja se v delu Angular (AngularJS) - okvir za JS. Uporaba tehnologije Ajax na celotni strani ni obvezna. Uporablja se lahko samo za nekatere elemente posodobljene strani. Na primer za samopopravke, preverjanje veljavnosti obrazca in iskanje.

Knjižnica jQuery je zbirka pripravljenih rešitev, zapisanih v JS. Najdete ga po poizvedbi »Ajax libs Jquery«. Obstaja različica povezave prek posebne storitve Googla. Imenuje se Ajax Googleapis. Jquery se v tem primeru poveže neposredno. Seveda pospeši nalaganje strani. Najpogosteje uporabniki najdejo mini različico Jquery Ajax na Googleapis.com. Ima zmanjšano funkcionalnost, vendar je bolj primeren za začetnike. Mini različica Ajax Jquery na Googleapis.com se imenuje - min.js.

Oblike prenosa podatkov

XML pri dekodiranju kratic Ajax je format za izmenjavo podatkov. Sprva, ko je bila tehnologija prvič ustvarjena, je prišlo do izmenjave le z njeno pomočjo. XML je zelo podoben HTML-ju, vendar morajo biti vse oznake zaprte. Kasneje se je pojavil nov format v jeziku JS - JSON. Bilo je tako preprosto in priročno, da se je razširilo na druge jezike in knjižnice. JSON je bolj primeren za prenos majhne količine podatkov, do 20 tisoč vrstic. Z njim je lažje delati, bolj je prilagodljiv in razumljiv za programerja. Z več informacijami uporabite XML. Na primer, pošiljanje zahtev za iskanje Yandex se izvaja s to obliko.

Ustvarjanje najenostavnejšega dokumenta JSON

V JS vse lastnosti opisujejo en sam globalni objekt okna, to je 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. O obeh metodah bomo podrobneje razpravljali spodaj.

Lahko delate z Ajaxom iz JS brez uporabe jQuery. Niz JSON lahko pretvorite v objekt JS in obratno. Razmislite, kako to storiti s primeri. Najprej ustvarite dokument in ga poimenujte, na primer »man« z razširitvijo JSON. Nato sledite naslednjim korakom:

1. Odprite datoteko v urejevalniku kode, na primer PhpStorm ali Sublime.
2. Format JSON ima svojo sintakso. Najprej se ustvari objekt - potrebuje zavite oklepaje.
3. Ključ in njegova vrednost morata biti v oklepajih. Ključi morajo biti v dvojnih narekovajih. Pri standardnem JS se pri izdelavi objekta ključ zapisuje brez narekovajev. Na primer, za objekt »človek« v formatu JSON morate ustvariti ključe »ime« (ime) in »starost« (starost). Posledično dobimo naslednjo kodo: {"ime": "Pavel", "starost": 28}.

Če potrebujete več objektov, so postavljeni v matriko, ki se razlikuje po oglatih oklepajih. Ne pozabite, da format JSON ne podpira komentarjev. V kakršni koli obliki bo to napaka. Vendar za njih ni posebnih potreb.

Vrednosti ključev so lahko naslednjih vrst:

• niz;
• število;
• niz;
• predmet.

Matrika je zapisana v oglatih oklepajih, objekti v njej so zajeti v narekovaje in ločeni z vejicami. Dodate lahko tudi dodan predmet, na primer naslov. Biti bo treba v oklepaju. Tako hitro izdelamo najpreprostejši dokument JSON. Za udobje uporabe in se zaljubil v razvijalce.

Pretvorba niza v objekt

Niz v JS se mora pogosto pretvoriti v objekt JSON. Treba je opozoriti, da mora biti v kodi, ko se vrstica prelomi na koncu, poševnica, sicer JS ne bo razumel, da je konec. Koda v JS bo videti takole:

Zagotoviti je treba, da so ključi v dvojnih narekovajih, sicer bo prišlo do napake. Imamo najpreprostejši niz. Lahko pride iz katerega koli strežnika. Da bi se prepričali, da je niz, ga lahko vnesete v ukazno mizo tako, da v kodo dodate ukaz “console.log (json)”. Zdaj pretvorite niz v objekt. Da bi to naredili, najprej deklariramo spremenljivko in jo pokličemo po posebnem razredu: var jsonObj = JSON.parse (). Potem gremo skozi parameter. Za delo z JSON formatom v JS je poseben razred z istim imenom. Tako lahko niz pretvorite v objekt. Če pretvorba iz nekega razloga ni mogoča, se prikaže opozorilo. Za potrditev, da je vse pravilno opravljeno, sta lahko v konzoli prikazani obe spremenljivki. V prvem primeru se pri prikazu niza v konzoli po vrednostih pojavijo presledki, ker bo JS štel njihovo število pred znakom poševnice. To ni napaka, ampak za lepoto kode je priporočljivo odstraniti dodatne presledke.

Pretvorite objekt v niz

Lahko naredite nasprotno in objekt pretvorite v niz. Da bi to naredili, deklariramo spremenljivko in ponovno uporabimo razred JSON, ki jo dodamo skozi piko, vendar izberemo drugo metodo - stringify: var ObjtoStr = JSON.stringify (). Nato prenesemo potrebni parameter. Ta ukaz izvaja inverzno transformacijo. Ta parameter lahko prenese vse, kar potrebujemo, na primer samo ime. V ta namen mora biti želeni ključ v oglatih oklepajih. Tako lahko delate z JSON iz JS.

Pošlji zahtevo strežniku

Zdaj pa pojdimo na Ajax in pošljemo to zahtevo strežniku. Najprej morate ustvariti 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 je: var xhr = XMLHttpRequest (). Še ne bomo pošiljali možnosti. Zdaj konfigurirajte to poizvedbo. V ta namen napišite: xhr.open (). Odprta metoda bo konfigurirala naslov. V ta namen dodajte besedo "GET" v oklepaje. Nadalje, ločeni z vejico v enojnih narekovajih, napišemo naslov gostitelja, kamor naj pošljemo zahtevo. Na koncu vrstice dodajte ime predmeta, tj. Prenosljivo datoteko - v našem primeru je to »man.json«.

Sinhrono in asinhrono zahtevo

Tretji parameter, ki je potreben za pošiljanje zahteve, je določiti, ali bo sinhroni ali ne. Imenuje se async in ima dve vrednosti: false - zahteva je podana sinhrono in true - v tem primeru bo asinhrona. Če je zahteva sinhrona, skript čaka na odgovor. Če odgovor traja sekundo, naslednja vrstica kode ne bo obdelana. Sinhronska zahteva bo izvedena v ločeni niti, skript pa bo nadaljeval izvajanje ukazov. V našem primeru bomo potrebovali prvo vrednost, ker bo v nasprotnem primeru treba preveriti odgovor preko dogodka in dodeliti funkcijo, ki bo izvedena takoj, ko pride zahteva.

Nato dodajte še eno vrstico kode: xhr.send (). Zdaj, kot odgovor na zahtevo, mora koda priti. To je lahko koda “200”, kar pomeni, da je strežnik na voljo, “404” - dokument ni bil najden, “300” - preusmeritev in “500” - napaka strežnika. Da bi ugotovili, ali je prišlo do napake, morate kodo primerjati s »200«. Da bi to naredili, dodajte naslednjo vrstico v kodo: if (xhr.status! = 200) in vnesite vrednost v konzolo. Če je vse dobro, bo veja else začela teči, na katero bomo dodali izhod v konzolo z vrednostjo »OK«. Tako smo na JS poslali zahtevo strežniku in izvedeli, kako Ajax deluje iz JS. Ustvarili smo XMLHttpRequest, podali metodo, pot, sinhronijo ali asinhronijo in dobili rezultat.

Jquery ajax

Izkušeni programerji ne uporabljajo čistega JS za delo, temveč uporabljajo vsako knjižnico - najpogosteje jQuery. JS Ajax zahteve v jQuery je veliko lažje ustvariti, zato je postal tako priljubljen. Poskusimo izboljšati skript s pomočjo te knjižnice. 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 obstaja možnost komentiranja in prelomov vrstic. Druga različica je minimalna. Nahaja se na: ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. Smiselno je povezati to knjižnico na delujočem strežniku. Knjižnico lahko dodate z naslednjo kodo prek storitve Google Code:

Ta koda kot primer uporablja različico 3.1.0. Za pravilno delovanje morate dodati trenutno 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 z določitvijo naslova lokacije v oznaki skripta in jo postavimo v glavo. Tukaj jo zaženemo s to vrstico: $ (document) .ready (). Ko je dokument pripravljen, bo ugnezdena funkcija klicana: (function () {}) To je potrebno za nalaganje modela DOM, s katerim delamo. vse tisto, kar je v telesni oznaki, če se to ne zgodi, bo skript obdelan, preden se naloži model DOM.

Ustvarjanje obrazca

Kot primer jQuery Ajax ustvarite obrazec. To naredite tako, da ustvarite div z razredom obrazcev in dodate vnos s tipom “text” in atributom ime z vrednostjo “name”. Nato dodamo še en vnos s tipom »besedilo« in imenom »naslov«. Vsak vhod je dodeljen identifikatorju. Kot identifikator lahko uporabite vrednosti atributov imena. Dodajte namig za oba vhoda s ponudbo uporabniku za vnos imena in naslova. Po želji lahko dodate še eno vrstico za starost. Zdaj je ostalo, da naredite gumb za pošiljanje obrazca. Znotraj gumba oznake zapišemo besedo »pošlji« in dodamo identifikator btn. V vsako vrstico dodamo ločila - br tags - in preverimo, kaj imamo.

Dodate lahko zunanje alineje tako, da jih zapišete v slogovno oznako, vendar je to neobvezno. Čeprav obrazec ne deluje. Za njegovo delovanje morate povezati dogodek z gumbom, saj bodo podatki poslani ob pritisku. To storite tako, da izberete gumb na izbirniku in vnesete dogodek »klik«: $ ('# btn'). Zdaj, ko kliknete to funkcijo, se izvede. Uporabljamo metodo on, ki na določenem elementu označuje določeno funkcijo. To pomeni, da ko kliknete gumb, bo delovalo. Preverjamo, ali vse deluje s pomočjo izhoda na konzolo. Metode pošiljanja zahtevkov v jQuery Ajax ni tako veliko. Lahko uporabite get, post ali samo Ajax. Ker lahko ti podatki nekaj spremenijo, bomo uporabili Jquery Ajax post metodo.

Pridobivanje vrednosti polja obrazca

V naslednjem koraku moramo dobiti vrednosti vseh polj obrazcev. V jQuery Ajax obstajata dve možnosti za to. Funkcijo lahko uporabite ali pa to storite brez nje. Za prvo možnost zapišemo naslednjo kodo: var ime = $ ('# name'). Nato dodamo podobne črte za naslov in starost. Prejeli smo sklice na elemente, ne na same vrednote. Zdaj uporabljamo Jquery Ajax post metodo. To naredimo tako: $ .post (). Zdaj morate konfigurirati metodo. Potreben je URL naslov, kjer bo obrazec poslan. Za to bomo uporabili validator. V ta namen v oklepaju pišemo '/validator.php'.

Dodajte še en parameter - sami podatki: var data = 'name =' + name.val () + '& address =' ​​+ address.val () + '& age =' + age.val (). Zdaj imamo podatke, pridobljene z metodo Jquery Ajax. Ostaja samo, da dodate funkcijo povratnega klica, ki se bo klicala, ko bo odgovor prišel iz strežnika. Registrirati mora naslednje parametre: podatke o strežniku, opis stanja in izvedbo zahteve. V konzoli prikažemo podatkovni parameter, da preverimo, ali vse deluje. Pomembno je tudi upoštevati, da je zahteva Ajax vedno opravljena v Unicode, ker mora biti kodiranje dokumentov utf-8. Če sta spletno mesto in strežnik v drugačnem kodiranju, in Ajax se izvaja v Unicode, bo strežnik vrnil hieroglife in niz bo treba ponovno zapisati. Da bi se temu izognili, je priporočljivo narediti vse v utf-8.

Delo z PHP-jem

Zdaj uporabite jQuery Ajax s PHP. Ustvarite novo datoteko in jo pokličite validator.php. Prikazujemo naše podatke. V ta namen pišemo: $ array = $ post. Sedaj iznesite vse podatke v JSON formatu: echo JSON_encode ($ array). Preverjamo, kako obrazec deluje tako, da izpolnimo polja in pošljemo zahtevo strežniku. Če je vse narejeno pravilno, bomo dobili objekt z določenimi parametri. Podatke smo prejeli, zdaj jih je treba obdelati in zabeležiti. Pišemo: if (isset ($ post ['name']) && (isset ($ post ['starost']) && (isset ($ post ['naslov']). Izdaja pomeni, da taka spremenljivka obstaja. : else {$ array ['status'] = 'napaka'} Preverimo, če vse deluje.Če obstajajo napake v kodi, jih iščemo in jih popravimo.Zaradi asinhronega prenosa zahteve lahko uporabnik vnese dodatne informacije v trenutku, ko je prenos vključen Uporabite lahko ne le programski jezik PHP, temveč tudi druge strežniške jezike.