Ajax Uspjeh je alat za preuzimanje podataka s poslužitelja web preglednika bez potrebe za ponovnim učitavanjem cijele stranice. U svom radu koristi objekt XMLHttpRequest temeljen na javascriptu za asinkrono slanje i primanje informacija na poslužitelju u pozadini bez intervencije korisnika. Metoda je postala toliko popularna da gotovo da i nema drugih aplikacija koje ne koriste Ajax. Primjer nekih velikih online aplikacija kojima upravlja Ajax Success su Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr i drugi.

Mogućnosti unakrsnog pregledavanja

Ajax znači: A je sinkroni, javascript, i X ml. Kao što se može vidjeti iz zapisa, proces koristi javascript, odnosno skriptu pod nazivom jquery.js. jQuery je javascript knjižnica. Datoteka teži samo 96 KB, pisana u javascriptu i funkcionira s imenom jquery.js, što pojednostavljuje programiranje javascripta pružajući mogućnosti unakrsnog preglednika za odabir i obradu DOM elemenata, rukovanje događajima, Ajax Success zahtjev i animacije.


jQuery je vrlo popularan. U svibnju 2015. datoteku koristi 642% svih web-mjesta. Među jQuery knjižnicama i okvirima, tržišni udio jQuery je 952%. Drugim riječima, većina modernih programera radi u jQuery-ju, a ne u sirovom javascriptu. Prednosti jQuery:

Cross-browser podrška. To znači da isti jQuery kod radi u različitim preglednicima: Chrome, Firefox, IE, Safari i Opera. S druge strane, kako bi se osigurala cross-browser podrška u neobrađenom javascriptu, potrebno je provjeriti preglednik i izdati odgovarajuće kodove, budući da različiti preglednici (osobito IE) implementiraju funkcije na različite načine.

Izbor i manipulacija DOM elemenata. "Upit" se odnosi na odabir DOM elemenata u web dokumentu za daljnju manipulaciju.

Snažna funkcija selektora za odabir stavki na temelju HTML naslova oznaka, na primjer, HTML atribut ID #debug, naziv klase CSS .error, ako se koristi Ajax pogreška uspjeha.

Upravljanje događajima

jQuery olakšava rukovanje javascript događajima i ima posebne efekte i animacije, prilagođava programiranje za show /hide, fade-in /fade-out, slide-in /slide-out i prilagođenu animaciju. Ajax Uspjeh pruža jednostavan Ajax sučelje za slanje asinkronih HTTP GET /POST zahtjeva i obradu odgovora.


S jQuery možete napisati nekoliko redaka koda kako biste zamijenili desetak javascript kodova i pokrenuli ih na svim preglednicima bez potrebe za zasebnim testom na svakom od njih. Podrška za sve preglednike posebno je važna za proizvodnju, budući da korisnik ne može testirati svoje javascript kodove u svim preglednicima. Jquery, Ajax Uspjeh koristi više od 60% web stranica na Internetu. Za rad s procesom pretpostavlja se da je korisnik upoznat s HTML5 CSS3 i javascriptom, koji su preduvjeti za jQuery prijelaz.

Korištenje jQuery

JQuery ima dvije verzije. Druga verzija ne podržava IE Proces instalacije i konfiguracije:

Preuzmite jQuery knjižnicu s web-mjesta.

Kopirajte javascript datoteku (na primjer, jquery-1.xx.x.min.js) u korijenski direktorij dokumenta, u pravilu, u poddirektoriju "js". "Min.js" je mini-verzija dizajnirana za proizvodnju koja uklanja dodatne razmake i komentare kako bi se smanjila veličina datoteke koja će se odmah preuzeti.

Za testiranje i proučavanje korišteni su kodoviVerzija «.Js».

Uključiti u HTML dokument. U HTML4 /XHTML1.0 morate uključiti atribut type = "text /javascript" u početnu oznaku.

Kao alternativa, umjesto posluživanja jquery.js poslužitelja, korisnik može koristiti jedan od CDN-ova (Content Distribution Network) za servisiranje. To će uštedjeti dio mrežnog prometa i vjerojatno će pružiti brži odgovor. Osim toga, preuzimanje jquery.js bit će spremljeno za ponovnu upotrebu:

CDN jQuery.com;

CDN Google;

Microsoft CDN.

Neki korisnici radije postavljaju javascript izravno prije kraja body () umjesto particije za bolju brzinu, također učitavaju CSS prije javascripta, jer se često odnosi na CSS.

Selektori skripti i operacije

Jquery selektor, Ajax Uspjeh - najvažnija jQuery funkcija - ima posebnu sintaksu $ (). Može prihvatiti naziv oznake, atribut id (s prefiksom #) ili ime klase (s prefiksom točke). Zapravo, podržava sve CSS selektore. U usporedbi s funkcijama selektora u javascript, JQuery je vrlo jednostavan i za klasu iznad. Pripada rukovatelju događaja, koji će raditi nakon što se izgradi DOM stablo. Događaj se razlikuje od "" događaja javascripta, koji ne čeka da se vanjske veze, kao što su slike, preuzmu. Ti se kodovi nalaze u odjeljku prije stvaranja elemenata za referenciranje. Ovo je uobičajena praksa jQuery:
$ (document) .ready (handler) readyonloadready () Primjer je jQuery selektor i operacije. JQuery zahtjev se odnosi na odabir elemenata u HTML-u - dokument za daljnju manipulaciju. Na primjer:

$ (document) odabiretrenutni dokument.

$ (p) odabire sve.

Elementi (izbornik oznaka).

$ (# hello) i $ (# message) odabiru jednu stavku s atributom id = "hello" (ID-Selector).

$ (. Red) Odabire sve elemente koji imaju atribut class = "red" (Class-Selector).

Zapravo, $ () je prečica (nadimak) za glavnu funkciju jQuery ().

Metode upravljanja elementarnim sadržajem

Korisnik može koristiti niz funkcija za "Line" i "To", budući da većina funkcija vraća stavku koja se koristi. U mnogim metodama, kao što je html, jQuery koristi isto ime metode za getter i setter, diferencirajući svoj argument. Na primjer, html) vraća innerHTML bez argumenta. Dokument spreman za upotrebu obično se koristi u jQuery, koji osigurava skraćeni unos pisan kao $ (function () {}). Vrste upravljanja sadržajem za odabranu stavku:

html () - get innerHTML;

html (vrijednost) - postavi unutarnjiHTML;

append (value) - dodavanje innerHTML-a na kraj;

priprema (vrijednost) - dodavanje prije innerHTML;

prije (element) - dodajte element ispred trenutnog elementa;

after (element) - dodavanje elementa nakon trenutnog elementa;

addClass (vrijednost), removeClass (vrijednost), toggleClass (vrijednost) - dodajte, uklonite ili uključite vrijednost klase atributa.

JQuery stvara automatsku cikličku funkciju "Line?" I "to?", Na primjer, $ ('p') odabire sve elemente. $ ('p') append () primjenjuje append () na svaki od odabranih elemenata u implicitnoj petlji.

Korisnik također može koristiti eksplicitnu petlju preko. Unutar .each - $ (this) označava stavku tijekom rada.

Primjer obrade događaja

U ovom primjerupokazuje kako programirati rukovatelj događajima za radnje korisnika. Većina jQuery kodova zapravo se bavi rukovateljima događajima za odabir odabranih stavki. Primjer ilustrira jQuery izbornik i ugrađene značajke. Postupak:

Odaberite izvor pomoću odgovarajućeg jQuery birača.

Definirajte događaj, primjerice, klik miša, vrstu ključa.

Napišite zapisnik događaja i priložite ga izvoru.

Možete prikačiti rukovatelja događaja na javascript, na primjer, kliknite, mišem i podnijeti stavku pomoću jQuery metoda.

Možete onemogućiti početno pokretanje tako da se vratite iz .click (rukovatelj) .mouseover (handler) .submit (handler) false.

Unutar funkcije $ (this) odnosi se na trenutni objekt. Iako $ (p) vraća elemente u nizu, možete koristiti istu sintaksu za vezanje rukovatelja događaja na EACH elemente.
Ranije je upravljač događajima javascripta bio smješten u HTML oznake. Sada je praksa da ih ostavite izvan HTML oznaka i grupirate ih u odjeljak za bolji MVC dizajn.

Kod AJAX zahtjeva i odgovora

Nastavak procesa: Da biste testirali podatke o funkciji uspjeha Ajax, pokrenite skriptu s web-poslužiteljem, na primjer Apache: $ (: submit) selektor bira sve $ (: text [name = "message"]) odaberite Možete koristiti $ .ajax () Ajax upit:

ajax () uzima asocijativni niz kao argument (parovi ključ-vrijednost);

tip specificira metodu zahtjeva, na primjer, get ili post, za Ajax post uspjeh;

url određuje URL za radnju, prema zadanim postavkama, trenutni dokument;

Podaci osiguravaju niz upita u obrascuasocijativni niz;

.done () šalje natrag kada je primljen odgovor na statusni kod 200 (OK). Argument zahtijeva funkciju HTTP odgovora;

.fail () šalje natrag kada je primljen odgovor na statusni kôd NO 200 (OK);

Uvijek () šalje natrag nakon dovršetka .done i .fail. Kao argument prihvaća funkciju no-arg.

osnove proširenja javascripta

jQuery je javascript proširenje koje je lako razumjeti ako korisnik ima javascript. On samo treba pratiti neke jQuery operacije koristeći Firebug ili Web Developer alate. JQuery API dostupan je na web-lokaciji razvojnog programera. U jQuery, operacije su smještene u rukovaocu koji se pokreće nakon stvaranja DOM stabla, ali prije učitavanja vanjskih resursa, kao što su slike, ekvivalentno stavljanju jQuery skripti neposredno prije završne oznake. Ovo je učinkovitije od rukovatelja javascripta. Osim toga, možete upotrijebiti nekoliko za registriranje nekoliko rukovaoca koji će se izvršiti redoslijedom kojim su registrirani. javascript se može koristiti samo jednom: $ (document) .ready (handler) onloadwindow.onload = handler.ready () window.onload = handler Uzima argument koji je najčešće anonimna funkcija ili određena funkcija. Funkcija nema argumenata. Tako se često koristi da postoji skraćenica. $ (Document) .ready (handler) $ (handler).

Iteracija putem odabranih stavki

JQuery birač može odabrati nulti ili DOM element. Odabrane stavke su omotane unutar objekta, kao što su ,

, itd. Možete izvršiti iteraciju za svaki od ovih elemenata:

Implicitna iteracija pomoću funkcije append () za svaki od odabranih elemenata u implicitnoj petlji.

Eksplicitna iteracija pomoću .each (funkcija).

$ (ovo).

Pretpostavimo da korisnik želi primijeniti niz operacija na svaki od odabranih elemenata, može koristiti iteraciju s odabranim elementima. Prihvaća argument kao argument, koji može biti anoniman, ili riješen, ili funkcija varijable. Unutar funkcije možete koristiti poveznicu na stavku u djelu: .each (function) .each () $ (this). Osim toga, $ (this) se odnosi na jQuery objekt koji je u kontroli, također može koristiti onaj koji se odnosi na korišteni DOM element. To je: $ (this)=== Ovo I može primijeniti JQuery metode, kao što su .append (), .html () na $ (this), ali ne i na ovo. S druge strane, može primijeniti DOM ovu operaciju, na primjer, this.id.substring (05), što znači prvih pet znakova atributa DOM atributa u procesu.

Pisanje Ajaxa pomoću jQuery

Zadani Ajax zahtjev je asinkroni. Drugim riječima, .ajax () će biti objavljen, skripta neće čekati odgovor, ali će prijeći na sljedeću izjavu, kako ne bi zaključala ili zamrznula zaslon. Korisnik može pisati Ajax Uspjeh Json koristeći neprerađeni javascript. Međutim, jQuery olakšava s postavkama $ .Ajax ili $ .ajax URL parametrima. Te su postavke objekt parova ključ-vrijednost. Često korišteni ključevi: URL zahtjeva koji se može postaviti izvan postavki zadnjeg obrasca.

Tip - GET ili POST.

Ajax podaci Uspjeh - pita parametre (ime = parovivrijednosti) i izražene kao objekt, na primjer, {name: "peter", msg: "hello"} ili niz upita "name = peter & msg = hello".

DataType je tip podataka očekivanog odgovora, kao što su tekst, xml, json, script ili html.

Zaglavlja su objekt za parove ključa i vrijednosti zaglavlja upita. Provjera poslužitelja za zahtjev za uspjeh Ajaxa php ima zaglavlje "X-Requested-With: XMLHttpRequest". Poslužiteljski program može provjeriti pojavljuje li se Ajax kroz ovo zaglavlje, na primjer, u PHP-u.

Sigurnosni problemi

Da bi se spriječili XSS napadi (Cross-Site Scripting), objekt XMLHttpRequest može zatražiti podatke od izvornog poslužitelja koji poslužuje stranicu. Prilikom preuzimanja skripte morate biti oprezni. HTML element $ preuzima podatke s poslužitelja i stavlja vraćeni HTML unutar dogovorenog elementa. To je najlakši Ajax način za preuzimanje podataka s poslužitelja. Evo primjera za traženje funkcije Ajax Success na HTTP poslužitelju za običan tekst. U ovom primjeru, koristimo Ajax za slanje POST zahtjeva asinhrono da bismo zatražili tekstualnu datoteku.

Ovo je tekst odgovora Ajax zahtjeva:

Ovaj se primjer izvodi pod HTTP poslužiteljem (na primjer, Apache) jer šalje HTTP zahtjev koji će se koristiti kao popunjavanje teksta odgovora. Također sadrži hipervezu za pokretanje Ajax upita (preko loadAjaxText ()). Ajax zahtjev s POST parametrima za PHP-HTTP poslužitelj za dobivanje dinamičkog odgovora.

Klijentov HTML kôd sadrži dva "c" za unos i izlaz. Ona također sadrži hipervezu za pokretanje Ajax uspjeha php zahtjeva (preko javascript loadText ()).

Dobiveni su rezultati skripteProces asinkrone razmjene podataka s web poslužitelja pomoću javascripta potvrđuje da čak i bez ažuriranja stranice web aplikacije, rade brzo i učinkovito. Aplikacije, Web primjenjuje model zahtjeva ili odgovora od HTML poslužitelja, dobivajući cijelu stranicu. Kao rezultat, korisnik dobiva rezultat nakon što klikne na gumb i čeka odgovor poslužitelja, ponovno pritisnuvši i čekajući odgovor. Ajax obavlja operacije zahtjeva /odgovora, ne zahtijeva od korisnika da čekaju odgovore s poslužitelja.