Naučili smo o izravnim metodama jQueryja za rad s Ajaxom (kao što su get(), post() i load()). Ovaj članak opisuje jQuery Ajax API niske razine.

Čini se da pojam niske razine označava da pristupate skrivene mogućnosti mehanizam upita, ali to nije u potpunosti točno. Ovdje opisane metode su manje prikladne u usporedbi s onima o kojima smo ranije govorili, ali uz malu cijenu dodatni napor Upit se može konfigurirati tako da točno odgovara vašim potrebama, što nije uvijek moguće korištenjem izravnih ili pomoćnih metoda.

Jednostavni Ajax zahtjevi

Stvaranje upita korištenjem API-ja niske razine nije puno teže od korištenja izravnih ili pomoćnih metoda. Razlika je u tome što vam ovaj pristup omogućuje kontrolu mnogih drugih aspekata zahtjeva i dobivanje puno više informacija o zahtjevu koji se izvršava. Središnji dio API-ja niske razine je metoda ajax(), jednostavan primjer njezine upotrebe dat je u nastavku (ovdje se koristi izvorna datoteka i datoteku mydata.json opisanu u prethodnom članku):

$(funkcija() ( $.ajax("mydata.json", ( uspjeh: funkcija(podaci) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo ("#row1"); template.tmpl(data.slice(3)).appendTo("#row2" ));

Argumenti metode ajax() su traženi URL i objekt za prikaz podataka čija svojstva definiraju skup parova ključ-vrijednost, od kojih svaki definira parametar zahtjeva. Ovdje objekt proslijeđen metodi ajax() sadrži samo jedan parametar, uspjeh, koji specificira funkciju koja će biti pozvana ako je zahtjev uspješan.

U u ovom primjeru tražimo datoteku mydata.json od poslužitelja i koristimo je zajedno s predloškom podataka za stvaranje elemenata i njihovo umetanje u dokument, kao što smo učinili u prethodnom članku korištenjem izravnih metoda. Prema zadanim postavkama, metoda ajax() stvara HTTP GET zahtjev, tj. ovaj primjer je ekvivalentan korištenju metoda get() i getJSON().

jqXHR objekt

Metoda ajax() vraća jqXHR objekt koji se može koristiti za dobivanje detaljne informacije o zahtjevu i s kim možete komunicirati. Objekt jqXHR je omotač oko XMLHttpRequest objekta koji čini temelj podrške za Ajax preglednika.

Za većinu Ajax operacija, jqXHR objekt se može jednostavno ignorirati, što je ono što ja preporučujem. Ovaj se objekt koristi u slučajevima kada je potrebno dobiti potpunije informacije o odgovoru poslužitelja od onih koje se mogu dobiti drugim sredstvima. Također se može koristiti za konfiguriranje parametara Ajax zahtjeva, ali to je lakše učiniti korištenjem postavki dostupnih za ajax() metodu. Svojstva i metode jqXHR objekta opisane su u tablici ispod:

Svojstva i metode jqXHR objekta Opis svojstva/metode

readyState	Vraća indikator napretka zahtjeva tijekom njegovog životnog ciklusa, u rasponu od 0 (zahtjev nije poslan) do 4 (zahtjev izvršen)
status	Vraća HTTP statusni kod koji šalje poslužitelj
statusText	Vraća tekstualni opis koda statusa
odgovorXML	Vraća odgovor kao XML (ako se radi o XML dokumentu)
responseText	Vraća odgovor kao niz
setRequest(ime, vrijednost)	Vraća zaglavlje zahtjeva (ovo se može olakšati pomoću parametra zaglavlja)
getAllResponseHeaders()	Vraća kao niz sva zaglavlja sadržana u odgovoru
getResponseHeaders(ime)	Vraća vrijednost navedenog zaglavlja odgovora
prekid()	Prekida zahtjev

Objekt jqXHR se pojavljuje na nekoliko mjesta u kodu. Prvo se koristi za spremanje rezultata koje je vratila metoda ajax(), kao što je prikazano u primjeru u nastavku:

$(funkcija() ( var jqxhr = $.ajax("mydata.json", ( uspjeh: funkcija(podaci) ( var predložak = $("#flowerTmpl"); template.tmpl(data.slice(0, 3) ).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2")); var timerID = setInterval(function() ( console.log("Status: " + jqxhr.status + " " + jqxhr.statusText); if (jqxhr.readyState == 4) ( console.log("Zahtjev završen: " + jqxhr.responseText); clearInterval(timerID); ) ), 100); ;

U ovom primjeru pohranjujemo rezultat koji je vratila metoda ajax(), a zatim koristimo metodu setInterval() za ispisivanje informacija o zahtjevu svakih 100 ms. Korištenje rezultata koje je vratila metoda ajax() ne mijenja činjenicu da se zahtjev izvršava asinkrono, tako da se moraju poduzeti mjere opreza pri radu s jqXHR objektom. Za provjeru statusa zahtjeva koristimo svojstvo readyState (vrijednost 4 odgovara završetku zahtjeva) i prikazujemo odgovor poslužitelja na konzoli.

Za ovaj scenarij, izlaz konzole izgleda ovako (može izgledati malo drugačije u vašem pregledniku):

Objekt jqXHR koristim samo u rijetkim slučajevima i uopće ga ne radim ako je to rezultat koji vraća metoda ajax(). jQuery automatski pokreće Ajax zahtjev kada poziva metodu ajax(), tako da ne smatram da je mogućnost prilagodbe parametara zahtjeva vrlo korisna. Ako želim raditi s jqXHR objektom (obično da dobijem više informacija o odgovoru poslužitelja), obično to radim preko parametara rukovatelja događajima, o čemu ćemo dalje govoriti. Daju mi ​​informacije o statusu zahtjeva, što eliminira potrebu da to shvatim.

Postavljanje URL-a zahtjeva

Jedna od najvažnijih dostupnih opcija je url parametar, koji vam omogućuje da odredite URL za zahtjev. Ovu opciju možete koristiti kao alternativu prosljeđivanju URL-a kao argumenta ajax() metodi, kao što je prikazano u primjeru u nastavku:

$(function() ( $.ajax(( url: "mydata.json", uspjeh: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2" ));

Kreiranje POST zahtjeva

Da biste odredili potrebnu vrstu upita koji će se izvršiti, koristite parametar tipa. Prema zadanim postavkama postavljaju se GET zahtjevi, kao u prethodnom primjeru. Primjer korištenja ajax() metode za kreiranje POST zahtjeva i slanje podataka obrasca poslužitelju je dan u nastavku:

$(function() ( $.ajax(( url: "mydata.json", uspjeh: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); // Kliknite rukovatelj na gumbu "Order" $("button").click (function( e) ( $.ajax(( url: "phphandler.php", tip: "post", podaci: $("forma").serialize(), uspjeh: processServerResponse, dataType: "json" )); e.preventDefault () )); funkcija processServerResponse(data) ( // U početku sakrij sve proizvode var inputElems = $("div.dcell").hide(); for (var prop in data) ( // Prikaži samo te proizvode, redoslijed od kojih je veći od 0 // (odgovor poslužitelja sadrži samo takve proizvode) var filtered = inputElems.has("input") .appendTo("#row1").show(); // Sakrij osnovni elementi oblikuje $("#buttonDiv, #totalDiv").remove(); // Prikaz novih elemenata iz predloška totalTmpl $("#totalTmpl").tmpl(data).appendTo("body"); ) )); Ukupno narudžbi: $(total) Order .png"/> $(name):

Ovdje neću detaljno opisivati ​​ovaj primjer jer... detaljno smo ga pogledali u prethodnom članku (samo pomoću post() metode). Samo ću napomenuti da smo ovdje, osim tipa, koristili još nekoliko parametara. Za određivanje cilja POST zahtjeva koristi se prethodno opisani parametar url. Podaci koji se šalju navedeni su pomoću parametra data, čija se vrijednost postavlja pomoću metode serialize() opisane u prethodnom članku. Vrsta podataka primljenih od poslužitelja navedena je u parametru dataType.

Rad s Ajax događajima

Nekoliko parametara omogućuje vam da odredite funkcije za rukovanje događajima koji se mogu pokrenuti tijekom životnog ciklusa Ajax zahtjeva. Ovo je način na koji ćete odrediti funkcije povratnog poziva koje igraju tako važnu ulogu u Ajax zahtjevima. Već ste se upoznali s jednim od njih kada ste razmatrali parametar uspjeha u prethodnom primjeru. Popis parametara povezanih s događajima, zajedno s njihovim kratkim opisima, prikazan je u tablici u nastavku:

Obrada uspješnih zahtjeva

U gornjim primjerima, kada se koristi parametar uspjeha, dva su argumenta izostavljena iz poziva funkcije - poruka koja opisuje rezultat zahtjeva i jqXHR objekt. Primjer korištenja funkcije koja uzima ove argumente nalazi se u nastavku:

$(funkcija() ( $.ajax(( url: "mydata.json", uspjeh: funkcija(podaci, status, jqxhr) ( console.log("Status: " + status); console.log("jqXHR status: " + jqxhr.status + " " + jqxhr.statusText); console.log(jqxhr.getAllResponseHeaders()); var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) )); ));

Statusni argument je niz koji opisuje ishod zahtjeva. Funkcija povratnog poziva koju navedemo pomoću parametra uspjeha izvršava se samo za uspješne zahtjeve, tako da je vrijednost ovog argumenta obično uspjeh. Iznimka je kada koristite parametar ifModified, opisan u nastavku.

Funkcije povratnog poziva za sve Ajax događaje slijede isti obrazac, ali ovaj argument je najkorisniji za niz drugih događaja.

Zadnji argument je objekt jqXHR. Ne morate shvatiti status zahtjeva prije nego počnete raditi s ovim objektom jer znate da se funkcija izvršava samo kada zahtjev uspije. Ovaj primjer koristi jqXHR objekt za dobivanje informacija o stanju zahtjeva i zaglavlja koje je poslužitelj uključio u odgovor, te za ispis ovih informacija na konzolu.

U u ovom slučaju rezultat izgleda ovako (ovisno o tome koji poslužitelj koristite, možete imati drugačiji skup zaglavlja):

Obrada pogreške

Parametar greške koristi se za određivanje funkcije koja bi se trebala pozvati kada zahtjev ne uspije. Odgovarajući primjer je dat u nastavku:

Pogreška (boja: crvena; obrub: srednje puna crvena; ispuna: 4 px; margina: auto; širina: 200 px; poravnanje teksta: središte)

$(function() ( $.ajax(( url: "NoSuchFile.json", success: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); error(jqxhr, status, errorMsg) ( $("") .text( "Status : " + status + " Greška: " + errorMsg).insertAfter("h1" ));

Ovdje se traži datoteka NoSuchFile.json, koja nije prisutna na poslužitelju, pa stoga zahtjev očito ne može biti dovršen, zbog čega će biti pozvana funkcija navedena pomoću parametra pogreške. Argumenti ove funkcije su jqXHR objekt, poruka o statusu greške i poruka o grešci primljena u odgovoru poslužitelja. Unutar ove funkcije dodaje se dokumentu div element, prikazujući vrijednosti argumenata status i errorMsg, kao što je prikazano na slici:

Konfiguriranje parametara zahtjeva prije slanja

Parametar beforeSend omogućuje vam da odredite funkciju koja će biti pozvana prije slanja zahtjeva. To vam omogućuje da konfigurirate zahtjev u zadnjoj minuti dodavanjem ili zamjenom parametara proslijeđenih metodi ajax() (što može biti posebno korisno ako više zahtjeva koristi isti objekt koji sadrži potrebne vrijednosti parametara). Primjer korištenja ovog pristupa prikazan je u nastavku:

$(funkcija() ( $.ajax(( uspjeh: funkcija(podaci) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1") ; template.tmpl(data.slice(3)).appendTo("#row2"); error: function(jqxhr, status, errorMsg) ( $("") .text("Status: " + status + " Error: " + errorMsg) .insertAfter("h1"); ), beforeSend: function(jqxhr, settings) ( settings.url = "mydata.json"; ) )); ));

Argumenti navedena funkcija su jqXHR objekt (koji može biti koristan za prilagođavanje zaglavlja zahtjeva ili otkazivanje zahtjeva prije slanja) i objekt koji sadrži parametre proslijeđene metodi ajax(). U ovom primjeru, URL za Ajax zahtjev postavljen je pomoću parametra beforeSend.

Postavljanje više rukovatelja događajima

U prethodnim smo primjerima reagirali na pojavu događaja povezanih s Ajax zahtjevima pozivanjem jedne funkcije, ali u parametrima success, error, complete i beforeSend možete navesti niz funkcija od kojih će se svaka izvršiti kada odgovarajuća događaj je pokrenut. Jednostavan primjer toga dat je u nastavku:

$(funkcija() ( $.ajax(( uspjeh: , prije slanja: funkcija(jqxhr, postavke) ( settings.url = "mydata.json"; ) )); funkcija procesData(podaci, status, jqxhr) ( var predložak = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) izvješće funkcijeStatus(data, status, jqxhr) ( console.log("Status: " + status + " Kod rezultata: " + jqxhr.status); ) ));

U ovom primjeru, parametar uspjeha postavljen je na niz koji se sastoji od dvije funkcije, od kojih jedna koristi podatke za dodavanje elemenata u dokument, a druga ispisuje informacije na konzolu.

Postavljanje konteksta za događaje

Parametar konteksta omogućuje vam da odredite element koji će biti dodijeljen varijabli this kada se pozove rukovatelj događajima. Ovo se može koristiti za pristup ciljnim elementima u dokumentu bez potrebe za njihovim odabirom u funkciji rukovatelja. Odgovarajući primjer dat je u nastavku:

$(funkcija() ( $.ajax(( uspjeh: funkcija(podaci) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1") ; template.tmpl(data.slice(3)).appendTo("#row2"); beforeSend: function(jqxhr, settings) ( settings.url = "mydata.json"; ), context: $("h1 ") , kompletno: function(jqxhr, status) ( var color = status == "success" ? "green" : "red"; this.css("border", "thick solid " + color); ) )) ;

Ovdje je parametar konteksta postavljen na jQuery objekt koji sadrži h1 elemente dokumenta. U funkciji definiranoj kompletnim parametrom, uokvirivamo odabrane elemente (u ovom slučaju element, budući da u dokumentu postoji samo jedan h1 element) pozivanjem metode css() na jQuery objektu (na koji upućuje ovo). Boja obruba se određuje na temelju statusa zahtjeva.

Parametar konteksta može se koristiti za postavljanje bilo kojeg objekta kao konteksta, a vi ste odgovorni za izvođenje samo valjanih operacija na tom objektu. Na primjer, ako postavite kontekst na HTMLElement, morate proslijediti taj objekt funkciji $() prije pozivanja bilo koje jQuery metode na njemu.

Postavljanje osnovnih parametara za Ajax zahtjeve

Postoji grupa parametara s kojima možete izvršiti osnovno postavljanje Ajax zahtjeva (raspravljali smo o nekima od njih, url i tip, gore). Od svih dostupnih opcija, ove su najmanje zanimljive i njihovi nazivi uglavnom govore sami za sebe. Parametri o kojima govorimo o, dati su u tablici u nastavku:

Osnovni konfiguracijski parametri Ajax zahtjeva Opis parametra

prihvaća	Postavlja zahtjev na zaglavlje Accept, koje navodi vrste MIME koje podržava preglednik. Prema zadanim postavkama, ova vrijednost je određena parametrom dataType
predmemorija	Vrijednost false označava da poslužitelj ne bi trebao predmemorirati sadržaj zahtjeva. Prema zadanim postavkama, sve vrste podataka osim skripte i jsonp su predmemorirane
contentType	Postavlja vrijednost zaglavlja obilaska sadržaja za zahtjev
tip podataka	Određuje koje se vrste podataka očekuju od poslužitelja. Ako se koristi ova opcija, jQuery će ignorirati informacije koje pruža poslužitelj o vrsti zahtjeva
zaglavlja	Određuje dodatna zaglavlja i vrijednosti koje treba uključiti u zahtjev
jsonp	Određuje niz koji se koristi umjesto funkcije povratnog poziva kada se postavljaju JSONP zahtjevi (zahtjevi među domenama). Ovaj parametar zahtijeva dogovor s poslužiteljem
jsonpCallback	Određuje naziv funkcije povratnog poziva koji bi se trebao koristiti umjesto automatski generiranog nasumičnog naziva koji koristi jQuery prema zadanim postavkama
lozinka	Određuje lozinku koja bi se trebala koristiti u zahtjevu prilikom prolaska postupka provjere autentičnosti
skup znakova skripte	Kaže jQueryju koji skup znakova treba koristiti prilikom kodiranja traženog JavaScript sadržaja
pauza	Određuje trajanje vremenskog ograničenja (u milisekundama) za zahtjev
Korisničko ime	Određuje korisničko ime koje bi se trebalo koristiti u zahtjevu za provjeru autentičnosti

Postavljanje vremenskih ograničenja i zaglavlja

Korisnici često niti ne shvaćaju da se Ajax zahtjevi izvršavaju, pa stoga navođenje prihvatljivog vremenskog ograničenja nije loša ideja, budući da će to spasiti korisnike od zamornog čekanja da se neki nepoznati proces završi. Primjer postavljanja vremenskog ograničenja za zahtjev dan je u nastavku:

$(function() ( $.ajax(( timeout: 5000, zaglavlja: ( "X-HTTP-Method-Override": "PUT")), uspjeh: funkcija (podaci) ( var predložak = $("#flowerTmpl") ; template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); status, errorMsg) (konzola .log("Greška: " + status));

U ovom primjeru, parametar vremenskog ograničenja postavlja maksimalno trajanje vremenskog ograničenja na 5 sekundi. Ako se zahtjev ne dovrši unutar tog vremena, bit će pozvana funkcija navedena pomoću parametra pogreške i prikazat će se šifra pogreške navedena parametrom statusa.

Odbrojavanje vremena počinje odmah nakon što je zahtjev poslan pregledniku, a većina preglednika nameće ograničenja na broj zahtjeva koji se mogu izvršiti istovremeno. To znači da postoji rizik da do isteka vremenskog ograničenja zahtjev više neće biti niti pokrenut. Kako biste to izbjegli, morate biti svjesni ograničenja preglednika te veličine i očekivanog trajanja svih drugih Ajax zahtjeva koji se izvode.

Dodatno, ovaj primjer u nastavku koristi parametar zaglavlja za dodavanje zaglavlja zahtjevu. Objekt prikaza podataka koristi se za određivanje zaglavlja. Ovdje korišteno zaglavlje može biti korisno za stvaranje web aplikacija koje podržavaju REST arhitektonski stil, sve dok ga poslužitelj ispravno prepoznaje.

Korištenje dodatnih opcija konfiguracije

Sljedeći odjeljci opisuju najkorisnije i najzanimljivije napredne opcije koje se odnose na Ajax zahtjeve. Obično se rijetko koriste, ali kada zatrebaju, nezamjenjivi su. Ove vam opcije omogućuju fino podešavanje načina na koji jQuery komunicira s Ajaxom.

Stvaranje sinkronih zahtjeva

Načinom izvršavanja upita upravlja se pomoću asinkroni parametar. Zadana vrijednost true za ovaj parametar znači da će se zahtjev izvršiti u asinkronom načinu rada, dok je vrijednost false sinkroni način rada.

Kada se zahtjev izvršava sinkrono, metoda ajax() ponaša se kao normalna funkcija, a preglednik nastavlja izvršavati druge instrukcije skripte tek nakon što zahtjev završi s izvođenjem.

Ignoriranje podataka koji ostaju nepromijenjeni

Pomoću ifModified parametar moguće je osigurati primitak podataka samo ako od trenutka posljednji zahtjev promijenjeni su. Ovo ponašanje je određeno zaglavljem Last-Modified. Time se izbjegavaju beskorisni prijenosi podataka koji korisniku neće pružiti nikakve nove informacije u odnosu na one koje već ima. Prema zadanim postavkama parametar ifModified ima vrijednost lažna, koji govori jQueryju da zanemari zaglavlje Last-Modified i svejedno pruži podatke.

Primjer korištenja ovog parametra dan je u nastavku:

$(function() ( $("button").click(function(e) ( $.ajax("mydata.json", ( ifModified: true, success: function(data, status) ( if (status == " uspjeh") ( $("#row1, #row2").children().remove(); var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo( "#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); else if (status == "notmodified") ($("img").css("border" , "gusto jednobojno zeleno");

Ovaj primjer postavlja parametar ifModified na true. Funkcija uspjeha uvijek se poziva, ali ako od trenutka kada je sadržaj zatražen posljednji put, nije se promijenio, tada će argument podataka biti nedefiniran, a argument statusa bit će neizmijenjena vrijednost.

U ovom slučaju, izvršene radnje određene su vrijednošću argumenta statusa. Ako je vrijednost ovog argumenta uspjeh, tada se argument podataka koristi za dodavanje elemenata u dokument. Ako statusni argument nije modificiran, tada koristimo css metoda() za označavanje elemenata koji već postoje u dokumentu okvirom.

Kao odgovor na događaj klika povezan s gumbom, poziva se metoda ajax(). Ovo omogućuje ponavljanje istog upita više puta kako bi se pokazao učinak parametra ifModified, kao što je prikazano na slici:

Koliko god ova opcija bila korisna, preporučujem da je koristite s oprezom. Ako je zahtjev poslan kao rezultat radnje korisnika (na primjer, klik na gumb), tada postoji mogućnost da je korisnik kliknuo gumb jer prethodni zahtjev nije dovršen prema očekivanjima.

Zamislite da tražite podatke, ali metoda navedena u parametru uspjeha sadrži pogrešku koja vas sprječava ispravno ažuriranje sadržaj dokumenta. Onda tvoja sljedeća radnja pokušat će ponovno kliknuti gumb kako bi postigao očekivani rezultat. Ako loše koristite parametar ifModified, možete ignorirati radnje korisnika, prisiljavajući ih da poduzmu ozbiljnije radnje kako bi riješili problem.

Obrada koda odgovora

statusCode parametar omogućuje odabir opcija daljnje akcije ovisno o kodu odgovora na HTTP zahtjeve. Može se koristiti ili umjesto parametara uspjeha i pogreške ili kao dodatak njima. Primjer neovisne upotrebe parametra statusCode dan je u nastavku:

$(function() ( $.ajax(( url: "mydata.json", statusCode: ( 200: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); 404: function(jqxhr, status, errorMsg) ( $("") .text ("Status: " + status + " Greška: " + errorMsg) .insertAfter("h1" ) ) );

Ovdje je parametar statusCode naveden kao objekt koji uspostavlja odnos između kodova odgovora za HTTP zahtjeve i odgovarajućih funkcija koje se moraju izvršiti na poslužitelju. Koji se argumenti prosljeđuju funkcijama ovisi o tome odražava li kod odgovora uspješan zahtjev ili pogrešku.

Ako kod (na primjer, 200) odgovara uspješnom zahtjevu, tada su argumenti isti kao oni koji bi bili proslijeđeni funkciji navedenoj parametrom uspjeha. Inače (na primjer, kod odgovora 404 koji označava da tražena datoteka nije pronađena), argumenti su isti kao oni koji bi bili proslijeđeni funkciji navedenoj parametrom pogreške.

Kao što vidite, ovaj alat ne pruža izravne informacije o kodovima odgovora. Često ga koristim pri otklanjanju pogrešaka u interakcijama preglednik-poslužitelj, obično kako bih otkrio zašto se jQuery ne ponaša onako kako bih ja to želio. U ovom slučaju koristim parametar statusCode uz parametre uspjeha i pogreške i šaljem informacije na konzolu. Ako se ti parametri koriste zajedno, prvo će se izvršiti funkcije uspjeha i pogreške, a zatim će se izvršiti funkcije definirane parametrom statusCode.

Podaci o odgovoru na prethodno čišćenje

Pomoću dataFilter parametar možete navesti funkciju koja će biti pozvana za prethodno čišćenje podataka koje vraća poslužitelj. Ovaj alat je neophodan u slučajevima kada vam podaci poslani od poslužitelja nisu u potpunosti zadovoljavajući, bilo zato što su neprikladno formatirani, bilo zato što sadrže podatke koje ne želite obrađivati.

Ovaj mi alat puno pomaže pri radu s Microsoft ASP.NET poslužiteljima koji dodaju nepotrebne podatke JSON podacima. Uklanjanje takvih podataka pomoću parametra dataFilter zahtijeva samo minimalan napor. Primjer korištenja parametra dataFilter dan je u nastavku:

$(function() ( $.ajax(( url: "mydata.json", uspjeh: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); dataFilter: function(data, dataType) ( if (dataType = = " json") ( var filteredData = $.parseJSON(data); filteredData.shift(); return JSON.stringify(filteredData.reverse()); ) else ( return data; ) ));

Funkciji se prosljeđuju podaci primljeni od poslužitelja i vrijednost parametra dataType. Ako se dataType ne koristi, drugi argument je postavljen na nedefinirano. Vaš posao je vratiti filtrirane podatke. U ovom primjeru, predmet naše pažnje su podaci u JSON formatu:

Var filteredData = $.parseJSON(podaci); filteredData.shift(); return JSON.stringify(filteredData.reverse()); ...

Da bi primjer bio ilustrativniji, izvodi neke dodatne operacije. Prvo, JSON podaci pretvaraju se u JavaScript polje pomoću jQuery metoda parseJSON. Zatim se prvi element uklanja iz niza pomoću metoda pomaka(), a redoslijed njegovih preostalih elemenata je obrnut pomoću metode reverse().

Sve što funkcija treba učiniti je vratiti niz, pa pozivamo JSON.stringify() znajući da će jQuery pretvoriti podatke u JavaScript objekt prije poziva funkcije uspjeha. Ovaj primjer pokazao je mogućnost uklanjanja elementa iz niza, međutim, ovisno o situaciji, mogli bismo izvršiti bilo koju drugu vrstu obrade.

Konačni rezultat prikazan je na slici:

Upravljanje transformacijom podataka

Sačuvao sam recenziju jedne od mojih omiljenih postavki za kraj. Možda ste primijetili da jQuery automatski izvodi neke prikladne pretvorbe prilikom dohvaćanja određenih vrsta podataka. Na primjer, kada prima JSON podatke, jQuery pruža funkciju uspjeha koja koristi JavaScript objekt umjesto izvornog neobrađenog JSON niza.

Za upravljanje takvim transformacijama koristi se parametar pretvarača. Vrijednost ovog parametra je objekt koji uspostavlja mapiranje između tipova podataka i funkcija koje se koriste za njihovu obradu. Primjer u nastavku pokazuje kako koristiti ovu opciju za automatsko pretvaranje HTML podataka u jQuery objekt:

$(function() ( $.ajax(( url: "flowers.html", // U ovom primjeru učitavamo HTML oznake, a ne JSON data success: function(data, status, jqxhr) ( var elems = data.filter( "div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems.slice("#row2"); pretvarači tekst html": funkcija(podaci) ( return $(podaci); ) ) )); ));

Ovaj primjer registrira funkciju za tip podataka text html. Obratite pozornost na razmak između komponenti navedenog tipa MIME (za razliku od teksta/html notnog oblika). Funkcija prihvaća podatke primljene s poslužitelja i vraća pretvorene podatke. U ovom slučaju, transformacija podataka sastoji se od prosljeđivanja HTML fragmenta sadržanog u datoteci flowers.html funkciji $() i vraćanja rezultata. To znači da se normalne jQuery metode primjenjuju na objekt proslijeđen kao podatkovni argument za uspjeh.

Kad radite s pretvaračima podataka, možete se previše zanijeti. Uvijek pokušavam izbjeći iskušenje da s tim funkcijama učinim više nego što bih trebao. Na primjer, ponekad sam u iskušenju primijeniti predložak na JSON podatke i vratiti rezultirajuće HTML elemente. Iako je ova tehnika vrlo zgodna, neće vam dobro poslužiti ako netko drugi pokuša proširiti vaš kod ili npr. vi sami kasnije trebate intenzivno obrađivati ​​podatke kako biste ga dobili u izvornom obliku.

Postavljanje i filtriranje Ajax zahtjeva

Sada kada ste se upoznali s metodom ajax() i dostupnim parametrima za rad s njom, možemo pogledati nekoliko dodatne metode, koje pruža jQuery kako bi se lakše konfiguriralo upite.

Definiranje zadanih postavki

Metoda ajaxSetup() omogućuje vam postavljanje vrijednosti parametara koji će se prema zadanim postavkama koristiti u svim Ajax zahtjevima, čime vas oslobađa potrebe za konfiguriranjem parametara na svakom zahtjevu. Primjer korištenja ove metode dan je u nastavku:

") .text("Status: " + status + " Error: " + errorMsg) .insertAfter("h1"); ), pretvarači: ( "text html": function(data) ( return $(data); ) ) )); $.ajax(( url: "flowers.html", success: function(data, status, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice( 0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2" ));

Metoda ajaxSetup() poziva se pomoću funkcije jQuery $ na isti način na koji je pozvana metoda ajax(). Argument metode ajaxSetup() je objekt koji sadrži vrijednosti parametara koje želite koristiti prema zadanim postavkama za sve Ajax zahtjeve. U ovom primjeru postavljamo zadane vrijednosti za parametre timeout, global, error i converters.

Nakon što je pozvana metoda ajaxSetup(), potrebno je samo definirati vrijednosti parametara koje želimo promijeniti ili onih koji nisu zadani. To omogućuje značajnu uštedu vremena u slučajevima kada morate postaviti mnogo upita iste vrijednosti parametri.

Filtriranje zahtjeva

Metoda ajaxSetup() definira osnovne vrijednosti konfiguracijskih parametara koje se primjenjuju na sve Ajax zahtjeve. Mogućnosti dinamičke postavke parametri za pojedinačne Ajax zahtjeve osigurava metoda ajaxPrefilter(). Primjer korištenja ove metode dan je u nastavku:

$(function() ( $.ajaxSetup(( timeout: 15000, global: false, error: function(jqxhr, status, errorMsg) ( $("") .text("Status: " + status + " Greška: " + errorMsg) .insertAfter("h1"); pretvarači: ( "text html": function(data) ( return $(data); ) )); ) ( if (originalSettings.dataType == "html") ( settings.timeout = 2000; ) else ( jqxhr.abort(); ) )) $.ajax(( url: "flowers.html", dataType: " html" , uspjeh: funkcija(podaci, status, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems. slice(3).appendTo("#row2");

Funkcija koju navedete bit će izvršena za svaki novi Ajax zahtjev. Argumenti proslijeđeni funkciji su parametri zahtjeva (uključujući sve zadane vrijednosti koje ste postavili pomoću metode ajaxSetup()), kao i originalni parametri proslijeđeni metodi ajax() (isključujući sve zadane vrijednosti) i jqXHR zahtjev objekt.

Izvršavamo promjene na objektu proslijeđenom kao prvi argument, kao što je prikazano u primjeru. U ovom scenariju, ako je parametar dataType prisutan među parametrima proslijeđenim metodi ajax(), tada je trajanje vremenskog ograničenja postavljeno na dvije sekunde. Kako bi se spriječilo slanje svih drugih zahtjeva, metoda abort() se poziva na objektu jqXHR.

Ajax je pristup izgradnji interaktivnih korisničkih sučelja za web aplikacije, razvijen u javaScriptu, koji pozadina(bez ponovnog učitavanja cijele stranice, kao u PHP-u) omogućuje razmjenu podataka između preglednika i poslužitelja.

AJAX od engl agex, izgovor je popularan u ruskom ajax.

Iz povijesti AJAX-a Prvi put se AJAX službeno spominje 18. veljače 2005. u članku Jesseja Jamesa Garretta Novi pristup web aplikacijama. Autor je odlučio opisati novi pristup web tehnologijama i pojednostavljenoj komunikaciji između poslužitelja i klijenta.

AJAX je stekao veliku popularnost nakon što ga je Google upotrijebio u svojim uslugama kao što su Gmail, Google karte i Google Suggest.

Google pretraga vraća opcije upita

Kako radi AJAX Na početku bih želio reći da AJAX ima oblik samo jednog objekta koji se zove XMLHttpRequest.

Svojstva XMLHttpRequesta omogućuju prosljeđivanje informacija poslužitelju korištenjem metoda Get ili Post, nakon čega poslužitelj izvodi potrebne operacije i preostaje samo primiti odgovor.

Kada koristite Ajax morate uzeti u obzir sljedeća pravila:
1. sve informacije se prenose/primaju isključivo u UTF-8 kodiranju
2. XMLHttpRequest se različito poziva u različitim preglednicima

Glavne prednosti i nedostaci AJAX Prednosti

Ušteda prometa. Podaci se prenose samo za određeni dio stranice, što značajno smanjuje promet.
Smanjenje opterećenja na poslužitelju. Nema potrebe za osvježavanjem cijele stranice, specifični zahtjev nestaje. Na primjer, htjeli ste glasati na stranici. Nakon pritiska na gumb, podaci se šalju poslužitelju pomoću vašeg glasa i vraća se odgovor. Međutim, sama stranica nije ažurirana. Mijenja se samo rezultat.
Brz rad samog servisa. Budući da se rad odvija s određenim blokom, rezultat njegovog rada može se vidjeti puno brže.
Raznolikost u upotrebi. AJAX radnja uključuje više od samog rada s obrascima. Na primjer, u Google pretraživanje možete vidjeti izbor fraze za pretraživanje nakon unosa prvih slova vašeg zahtjeva.
Mane

Zahtijeva omogućen Java Script. Ako je Java Script isključen u sigurnosnim postavkama vašeg preglednika, možda nećete vidjeti rezultate AJAX-a.
Podaci nisu dostupni tražilicama. Što je logično, podaci koji se dinamički mijenjaju, poput drugih u Java Scriptu, nisu vidljivi robotu za pretraživanje.
Složenost samog projekta. S vremenom, uz čestu upotrebu AJAX-a na servisu, mogu se pojaviti poteškoće u radu s programskim kodom i razmjerom projekta. Stoga bi korištenje AJAX-a na samom početku trebalo ograničiti i koristiti ga selektivno.
Nemoguće je pratiti broj zahtjeva. Budući da je AJAX labavo integriran sa standardnim alatima preglednika, korištenje dinamičkih elemenata ne može se pratiti niti pregledavati. Da biste to učinili, morate koristiti druge skripte.

Većina modernih web stranica koristi tehnologiju zvanu AJAX za brzu i učinkovitu interakciju s posjetiteljem. AJAX je postao vrlo popularna metoda za dohvaćanje podataka s poslužitelja u pozadini i dinamičko ažuriranje stranice.

Razvoj JavaScript koda za implementaciju AJAX-a od nule vrlo je dugotrajan i zamoran proces. Međutim, mnoge JavaScript biblioteke, uključujući jQuery, imaju izvrsne implementacije AJAX-a na visokoj razini u obliku skupa metoda i funkcija koje izradu web stranica čine lakšom i bržom.

U ovoj seriji tutorijala pogledat ćemo osnove izrade AJAX zahtjeva pomoću jQueryja. Obrađivat će se sljedeće teme:

• Što je AJAX tehnologija? Kako radi? Koje su njegove prednosti?
• Kako izraditi različite vrste AJAX zahtjeva koristeći jQuery?
• Slanje podataka na poslužitelj pomoću AJAX zahtjeva.
• Obrada i izdvajanje podataka iz AJAX odgovora s poslužitelja.
• Kako prilagoditi AJAX obradu u jQueryju i promijeniti zadane postavke?

Napomena: Vodiči se fokusiraju na klijentski dio JavaScripta. Ali razvoj poslužiteljske strane također je prilično jednostavan. Za potpunije informacije trebali biste proučiti materijale o programskim jezicima na strani poslužitelja, kao što je PHP.

Što je AJAX i kako je koristan?

AJAX je tehnika razvoja web aplikacija u kojoj JavaScript kod koji se izvodi u pregledniku posjetitelja komunicira s web poslužiteljem asinkrono, odnosno u pozadini. Za razliku od regular web aplikacije su sljedeće:

• Tipična web stranica sadrži poveznice ili obrasce koji, kada se klikne ili pošalju, stvaraju zahtjev za novi URL na web poslužitelju. Poslužitelj šalje potpuno novu HTML stranicu, koju preglednik zatim prikazuje, zamjenjujući je izvorna stranica. Ovakav pristup oduzima puno vremena i loš je za posjetitelja jer mora čekati da se nova stranica učita.
• Kada koristite AJAX tehnologiju, JavaScript kod šalje zahtjev URL-u na poslužitelju. Kod također može poslati podatke zajedno sa zahtjevom. JavaScript kôd zatim obrađuje odgovor poslužitelja i djeluje u skladu s tim. Na primjer, izračuni se mogu napraviti s vraćenim podacima, widget se može dodati ili ažurirati na stranici ili se posjetitelju može poslati poruka o ažuriranju baze podataka na poslužitelju.

Budući da se AJAX zahtjev izvodi u pozadini, JavaScript kôd (i posjetitelj) mogu nastaviti komunicirati sa stranicom dok se zahtjev obrađuje. Proces je skriven od posjetitelja, koji ne mora napustiti stranicu koju trenutno gleda. Ovaj pristup čini AJAX stranice vrlo ugodnim za rad.

Temeljna točka AJAX-a je JavaScript XMLHttpRequest objekt. Omogućuje brojne metode kao što su open(), send() i onreadystatechange() koje se mogu koristiti prilikom slanja AJAX zahtjeva poslužitelju i obrade odgovora u pozadini.

Razvoj na različitim preglednicima JavaScript kod AJAX može biti prilično naporan proces. Srećom, jQuery vam daje nekoliko AJAX metoda jednostavnih za korištenje koje vam omogućuju apstrahiranje mnogih operacija niske razine.

Za one znatiželjnije, riječ AJAX je skraćenica od prvih slova izraza u Engleski jezik"Sinkroni J avaScript i X ML" ( Asinkroni JavaScript i XML). Međutim, izraz može dovesti u zabludu - zahtjev ne mora biti asinkroni i ne mora koristiti XML za slanje podataka.

Izrada GET zahtjeva pomoću $.get()

Metoda jQuery $.get() pruža jednostavan i praktičan način za izradu jednostavnog AJAX zahtjeva. Izvršava zahtjev pomoću HTTP metoda GET (koristi se za dohvaćanje URL-ova, kao što su stranice i slike), umjesto metode POST (koja se tradicionalno koristi za slanje podataka obrazaca).

U najjednostavniji oblik metodu možete nazvati ovako:

Gdje je url URL resursa od kojeg se očekuje odgovor. Obično je ovo skripta na strani poslužitelja koja izvodi neke radnje i može vratiti neke podatke:

$.get("http://example.com/getForecast.php");

Iako možete zatražiti i statički dokument:

$.get("http://example.com/mypage.html");

Kada tražite URL, možete poslati podatke sa zahtjevom. Možete proslijediti podatke u nizu upita, baš kao s normalnim GET zahtjevom:

$.get("http://example.com/getForecast.php?city=rome&date=20120318");

Ispravan način da učinite isto je proslijediti podatkovni objekt kao drugi parametar metodi $.get(). Podatkovni objekt mora sadržavati informacije u obliku parova ime svojstva/vrijednost svojstva. Na primjer:

Var podataka = (grad: "rim", datum: "20120318"); $.get("http://example.com/getForecast.php", podaci);

Alternativno, možete proslijediti podatke metodi $.get() kao niz:

Var data = "city=rim&date=20120318"; $.get("http://example.com/getForecast.php", podaci);

Primanje podataka s poslužitelja

Do sada smo gledali primjere korištenja $.get() samo za slanje zahtjeva poslužitelju, ignorirajući svaki odgovor koji bi skripta na strani poslužitelja mogla generirati. Ali u većini slučajeva, vaš JavaScript kod čekat će odgovor skripte na strani poslužitelja i obraditi primljene podatke.

AJAX zahtjev je asinkroni, što znači da radi u pozadini dok se ostatak JavaScript koda nastavlja izvoditi. Kako onda primiti odgovor od poslužitelja kada je zahtjev ispunjen?

Morate napisati funkciju povratnog poziva koja će se automatski izvršiti kada se AJAX zahtjev završi i poslužitelj pošalje odgovor. U najmanju ruku, vaša funkcija treba prihvatiti podatke koje vraća poslužitelj kao svoj prvi argument:

Funkcija myCallback(returnedData) ( // Obrađujemo podatke returnedData )

Nakon što je funkcija povratnog poziva stvorena, možete je proslijediti kao treći argument metodi $.get():

Var podataka = (grad: "rim", datum: "20120318"); $.get("http://example.com/getForecast.php", data, myCallback);

Određivanje tipa podataka odgovora

Obično, strana poslužitelja prenosi podatke u jednom od nekoliko uobičajenih formata, uključujući XML, JSON, JavaScript ili HTML. Prema zadanim postavkama, jQuery pokušava odrediti najviše prikladan format i analizirati podatke u skladu s tim. Ali bolje je eksplicitno definirati format.

Da biste odredili format, trebate proslijediti četvrti argument metodi $.get(). Ovaj argument može biti niz sa sljedećeg popisa:

• "xml"
• "json"
• "skripta"
• "html"

Na primjer, ako znate da poslužiteljska skripta vraća podatke u JSON formatu, tada pozivate metodu $.get() ovako:

$.get("http://example.com/getForecast.php", data, myCallback, "json");

Primjer korištenja metode $.get().

Evo primjera stvaranja AJAX zahtjeva pomoću metode $.get() i jednostavna obrada odgovor. Da bi primjer funkcionirao, trebate stvoriti jednostavnu tekstualnu datoteku na poslužitelju pod nazivom getForecast.txt koja sadrži sljedeći tekst:

( "grad": "Vasyuki", "datum": "18. ožujka 2012.", "prognoza": "Velika hladnoća i bljuzgavica", "maxTemp": +1 )

Ova datoteka će simulirati odgovor u JSON formatu koji može generirati skripta vremenske prognoze na poslužitelju.

Zatim stvaramo stranicu showForecast.html u istoj mapi kao getForecast.txt:

Vremenska prognoza $(function() ( $("#getForecast").click(function() ( var data = ( city: "Vasyuki", date: "20120318" ); $.get("getForecast.txt", data , uspjeh, "json" )); + forecastData.maxTemp + "C"; upozorenje(prognoza); Dobijte vremensku prognozu

Otvorite showForecast.html u pregledniku i kliknite gumb "Dohvati vremensku prognozu". U prozoru s porukom primit ćemo vremensku prognozu s našeg poslužitelja.

Evo kako kôd funkcionira:

showForecast.html sadrži element gumba "Dohvati vremensku prognozu" s ID-om getForecast.

JavaScript na vrhu stranice izvršava se čim se stranica učita i DOM je u stanju spremnosti.

JavaScript kôd prvo veže rukovatelja događajem klika na gumb #getForecast. Ovaj rukovatelj izvodi AJAX GET zahtjev za getForecast.txt, prosljeđujući ime grada i datum za prognozu. Također je definirana funkcija povratnog poziva success(), koja će se izvršiti kada se zahtjev završi. Format podataka koje vraća poslužitelj definiran je kao JSON.

Datoteka getForecast.txt pregledniku vraća podatke o prognozi u JSON formatu.

Poziva se funkcija success(). jQuery analizira JSON podatke primljene iz getForecast.txt, pretvara ih u JavaScript objekt i prosljeđuje u funkciju.

Funkcija vraća objekt podataka weatherData i prikazuje poruku koja sadrži nekoliko svojstava objekta, uključujući naziv grada, prognozu i temperaturu.

Jednostavan primjer od nekoliko redaka pokazuje kako AJAX zahtjev radi pomoću metode $.get().

Ovaj članak opisuje AJAX na razini značajki i primjera. Razmatraju se značajke asinkrone interakcije i primjeri korištenja, ali uz minimum tehničkih detalja.

Nadam se da će biti korisno za razumijevanje što je AJAX i za što se koristi.

Što je AJAX? Primjer implementacije.

AJAX ili duže, A sinkroni J avascript A nd x ml je tehnologija za interakciju s poslužiteljem bez ponovnog učitavanja stranica.

Zbog toga se smanjuje vrijeme odziva, a web aplikacija po interaktivnosti više podsjeća na radnu površinu.

AJAX tehnologija, kao što prvo slovo A u nazivu govori, je asinkrona, tj. preglednik nakon što pošalje zahtjev može učiniti bilo što, primjerice prikazati poruku
o čekanju odgovora, listanju stranice itd.

Evo koda gumba u gornjem primjeru:

Kada se klikne, poziva funkciju glasovanja, koja šalje zahtjev poslužitelju, čeka odgovor, a zatim prikazuje poruku o tome u div ispod gumba:

Odgovor poslužitelja bit će ovdje

Za razmjenu podataka s poslužiteljem koristi se poseban objekt XmlHttpRequest koji može poslati zahtjev i primiti odgovor od poslužitelja. Možete stvoriti takav preglednik objekata, na primjer, ovako:

Funkcija getXmlHttp())( var xmlhttp; try ( xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); ) catch (e) ( try ( xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (E) ( xmlhttp = false;) if (!xmlhttp && typeof XMLHttpRequest!="undefined") ( xmlhttp = new XMLHttpRequest(); ) return xmlhttp;

Više o pojedinostima implementacije AJAX-a pomoću XmlHttpRequesta i drugih prijenosa možete pročitati u odjeljku o komunikaciji s poslužiteljem.

Ovdje se nećemo zadržavati na ovome i prijeći ćemo izravno na funkciju glasovanja:

// javascript kod za glasanje iz primjera funkcije vote() ( // (1) kreirajte objekt za zahtjev poslužitelju var req = getXmlHttp() // (2) // raspon pored gumba // prikazat će se napredak izvršenja var statusElem = document.getElementById("vote_status") req.onreadystatechange = function() ( // onreadystatechange se aktivira kada se primi odgovor poslužitelja if (req.readyState == 4) ( // ako je zahtjev završen izvršavanje statusElem.innerHTML = req.statusText / / prikaži status (Nije pronađeno, OK..) if(req.status == 200) ( // ako je status 200 (OK) - dajte odgovor na korisničko upozorenje(" Odgovor poslužitelja: "+req.responseText); ) // ovdje možete dodati još s rukovanjem pogreškom zahtjeva ) ) // (3) postavite adresu veze req.open("GET", "/ajax_intro/vote.php", true); // pripremljen je objekt zahtjeva: navedena je adresa i stvorena je funkcija onreadystatechange // (4) req.send(null); // pošalji zahtjev // (5) statusElem.innerHTML = "Čeka se odgovor poslužitelja..." )

Tijek izvršenja koji se koristi glasovanjem prilično je tipičan i izgleda ovako:

Funkcija stvara objekt XmlHttpRequest

dodjeljuje rukovatelja odgovorom poslužitelja onreadystatechange

otvara veza otvorena

šalje zahtjev pomoću poziva za slanje (odgovor poslužitelja prima funkcija onreadystatechange, koja se aktivira asinkrono)

pokazuje posjetitelju indikator statusa procesa

Rukovatelj poslužitelja na koji je upućen AJAX zahtjev (u primjeru ovo je vote.php) u biti se ne razlikuje od redovita stranica. AJAX zahtjev koji šalje XmlHttpRequest ne razlikuje se od običnog zahtjeva.

Samo što se tekst koji poslužitelj vraća nije prikazan kao HTML, već ga čita i obrađuje funkcija onreadystatechange.

Značenje AJAX-a je integracija tehnologija

AJAX tehnologija koristi kombinaciju:

• (X)HTML, CSS za predstavljanje i oblikovanje informacija
• DOM-model, operacije na kojima se izvršavaju pomoću javascripta na strani klijenta kako bi se omogućio dinamički prikaz i interakcija s informacijama
• XMLHttpRequest za asinkronu komunikaciju s web poslužiteljem. U nekim AJAX okvirima iu nekim situacijama, IFrame, SCRIPT oznaka ili drugi sličan prijenos koristi se umjesto XMLHttpRequest.
• JSON se često koristi za razmjenu podataka, ali bilo koji format će funkcionirati, uključujući bogati HTML, tekst, XML, pa čak i neki EBML

Tipična AJAX aplikacija sastoji se od najmanje dva dijela.

Prvi se pokreće u pregledniku i obično je napisan u JavaScriptu, a drugi je na poslužitelju i napisan je npr. u Rubyju, Javi ili PHP-u.

Podaci se razmjenjuju između ova dva dijela putem XMLHttpRequest (ili drugog prijenosa).

Što mogu učiniti s AJAX-om?

Poanta AJAX-a je interaktivnost i brzo vrijeme odziva.

Male kontrole

Prije svega, AJAX je koristan za male elemente povezane s osnovnim radnjama: dodavanje u košaricu, pretplata itd.

Dinamičko učitavanje podataka s poslužitelja.

Na primjer, stablo čiji se čvorovi učitavaju dok se šire.

U vrijeme pojavljivanja bio je jedini otvoren pošta koristeći AJAX za sljedeće značajke.

• Provjera pogrešaka pri unosu obrasca PRIJE slanja

  Korisničko ime se šalje na poslužitelj, a rezultat provjere se vraća na stranicu.

• "Instant" preuzimanje

  Preglednik samo kontaktira poslužitelj za podatke, umjesto da ažurira cijelo glomazno sučelje

• Automatska "isporuka" pisama u otvorenu mapu

  S vremena na vrijeme šalje se zahtjev poslužitelju i ako stignu nova slova, pojavljuju se u pregledniku.

• Automatsko dovršavanje

  Dovoljno je unijeti prva slova imena primatelja, a ostala se popunjavaju automatski, kao u desktop aplikacijama.

Rezultat: široka popularnost, velika potražnja za računima od otvaranja.

Sinkroni model VS Asinkroni model

U konvencionalnom programiranju sve su operacije sinkrone, odnosno izvode se jedna za drugom.

Relativno govoreći, ponašamo se ovako:

baciti štap za pecanje

čekajući da zagrize

bit - uključite zatezanje šipke za predenje

S asinkronim pristupom mi:

na štap za pecanje objesimo poseban detektor ugriza, zamolimo ga da povuče štap za predenje kad zagrize

baciti štap za pecanje

radimo druge stvari

aktivira se detektor ugriza, aktivirajući uvlačenje štapa za predenje

To jest, u sinkronom slučaju, štap za pecanje neprestano privlači našu pozornost. Ulov ribe je sekvencijalan proces.

U asinkronoj varijanti prvo smo postavili program što treba raditi kad grize, a onda spustili štap da lovi i bavili se drugim stvarima.
Na primjer, postavili smo još 5 takvih štapova za pecanje.

Asinkrono programiranje je teže od sinkronog programiranja i na početku je neobično jer unaprijedšto će raditi je dano nakon.
Odnosno, program "što učiniti kada zagrize" mora biti postavljen prije nego što dođe do ugriza, a općenito je nepoznato ima li riba u rezervoaru.

Postoje tehnike koje to olakšavaju asinkrono programiranje, na primjer, odgođeni Deferred objekt (Twisted, Dojo, Mochikit), ali o tome će biti riječi u zasebnom članku.

Sinkroni i asinkroni model u AJAX-u

Vratimo se našim ovcama: pregledniku, serveru i recimo bazi podataka.

U sinkronom modelu, preglednik šalje zahtjev poslužitelju i zaustavlja se, čekajući da sve dovrši. potreban rad. Poslužitelj izvršava upite prema bazi podataka, umata odgovor u traženi format i šalje ga. preglednik. Nakon što primi odgovor, poziva funkciju prikazivanja.

Svi procesi se izvode sekvencijalno, jedan za drugim.

Mrežna kašnjenja uključena su tijekom vremena čekanja, označena sivom bojom na dijagramu.

Korisnik ne može raditi ništa drugo na istoj stranici dok se razmjenjuju sinkroni podaci.

U asinkroni model zahtjev je poslan ("štap je postavljen"), a vi možete učiniti nešto drugo. Kada je zahtjev ispunjen ("becked") - pokreće se unaprijed
funkcija pripremljena od strane programera (“povucite šipku za predenje”) za prikaz poruke poslužitelja.

Ovdje poslužitelj odmah obavještava preglednik da je zahtjev prihvaćen za obradu i pušta ga na obradu. daljnji rad. Kada je odgovor spreman, poslužitelj će ga proslijediti, a na pregledniku će se pozvati odgovarajuća funkcija prikaza, ali dok se ovaj odgovor generira i šalje, preglednik je slobodan.

Korisnik može pisati komentare, ispuniti i poslati obrazac, itd.: Mogu se napraviti novi asinkroni zahtjevi.

Asinkroni model karakterizira gotovo trenutni odgovor na radnje korisnika, tako da se aplikacija čini udobnom i brzom.

Zbog ovog jaza između akcije i stvarnog rezultata, aplikacija postaje mnogo osjetljivija na pogreške.

Posebno u slučaju više istodobnih asinkronih zahtjeva, potrebno je voditi računa o redoslijedu izvršavanja i odgovora (uvjeti utrke) te, u slučaju greške, ostaviti aplikaciju u konzistentnom stanju.

Značajke asinkronog modela

• Teško za provedbu
  • Nedovoljne mogućnosti preglednika (javascript)
  • Asinkroni model je teže otkloniti pogreške
• Uvjeti utrke
  • Nedefiniran slijed izvršavanja
  • Možete raditi mnogo istovremenih zadataka ("štapovi za pecanje"), ali zadatak koji je prvi započet može završiti posljednji.
• Reakcija je trenutna, ali se ne zna kakav će biti rezultat. Rješavanje pogrešaka je složenije
  • Greške u komunikaciji - prekid veze, itd.
  • Korisničke pogreške - na primjer, nije bilo dovoljno privilegija
• Kontrola integriteta (otporan na greške)
  • Na primjer, urednik je poslao asinkroni zahtjev ukloniti granu drveta. Dodavanje u njega mora biti onemogućeno dok ne stigne odgovor poslužitelja. Ako odjednom nije bilo dovoljno privilegija, operacija nije uspjela.
• Interaktivnost
• Brzo sučelje

Postoje samo dvije prednosti, ali kakve! Igra je vrijedna svijeća.

Asinkrono povlačenje i ispuštanje.

Ponekad je za asinkrone operacije potrebno raditi razne "trikove za uši". Na primjer, želite napraviti drag"n"drop u stablu, odnosno mišem povući članke iz jedne sekcije u drugu, i to tako da oni promijene svog roditelja na serveru u bazi podataka.

Povucite "n" ispustite - ovo je "uzeo objekt miša - stavio ga gdje treba biti - gotovo." Ali u asinkronom modelu ne može sve biti "spremno" odmah.
Morate provjeriti privilegije na poslužitelju, provjeriti postoji li objekt još uvijek, u slučaju da ga je neki drugi korisnik obrisao.

Treba nekako pokazati da je proces krenuo, ali rezultat će biti “što će biti...”. Ali kao? U asinkronom modelu, pokazivač miša ne može samo lebdjeti iznad objekta, pretvarajući se u sat.

U ovom slučaju ili koriste sinkrone zahtjeve prema poslužitelju - i onda se sve stvarno zamrzne, ili je originalno rješenje staviti objekt kao da je prenesen i obavijestiti animiranom ikonom da se čeka odgovor.
Ako je odgovor negativan, obrađivač odgovora vraća objekt natrag.

Ustajali kontekst, zastarjeli kontekst

Primjer s drag"n"drop također dotiče problem "ustajalog konteksta" - zastarjelog konteksta.

Web je višekorisničko okruženje. Ako se koristi za navigaciju,
Recimo stablo članaka, onda mnogi ljudi rade na njemu. Jedan od njih može izbrisati granu stabla na kojoj drugi radi: sukob.

U pravilu se za prevladavanje takvih incidenata koriste sljedeća sredstva:

Politika uređivanja

Tada se zna tko što radi i na razini podjele vlasti i osobne komunikacije dogovaraju se takva brisanja. Ova opcija očito nije sigurna, ali obično radi.

Zaključavanje i/ili kontrola verzija

Zaključavanje - blokiranje uređenih dokumenata.

Kontrola verzija - svaki novi dokument postaje verzija, tako da se promjene nikada ne gube. Verzija uključuje sukobe kada je Petja počeo uređivati ​​dokument prije Vasje, a kasnije ga je spremio. U isto vrijeme, u posljednjoj verziji, Vasyine promjene su izgubljene, iako je pretposljednja (Vasya) verzija definitivno dostupna u sustavu.

Možete pročitati više o zaključavanju i verzijama, na primjer, u dokumentaciji za Subversion sustav kontrole verzija.

Automatsko ažuriranje konteksta

Problem zastarjelog sadržaja može se 99% riješiti trenutnim automatskim ažuriranjem.

Preglednik održava stalnu vezu s poslužiteljem (ili s vremena na vrijeme postavlja ispravne zahtjeve) - i potrebne promjenešalju se ovim kanalom.

Na primjer, novi se članci ponekad učitavaju u otvorenu granu stabla; mail sučelje- nova slova.

Općenito, problem zastarjelog konteksta izravno je povezan s problemom integriteta podataka. U svakom slučaju, poslužitelj je odgovoran za konačnu provjeru integriteta, kao i kod provjere valjanosti obrasca.

Skraćenica AJAX(Asinkroni JavaScript i XML) simbolizira koncept korištenja niza tehnologija web programiranja za omogućavanje asinkrono ažurirati sadržaj pojedinih područja HTML stranice. Asinkrono znači ažuriranje bloka koji vam je potreban HTML označavanje može se dogoditi asinkrono s ažuriranjem cijele stranice. Kao rezultat toga, preglednik neće doživjeti titranje koje često prati osvježavanje stranice ili korisnikovo premještanje na drugu stranicu putem hiperveze.

Asinkrono također može značiti paralelno ažuriranje nekoliko fragmenata odjednom. Na primjer, kada se stranica učita veliki iznos oznake , tada se same slike mogu pojaviti postupno i paralelno jedna s drugom. To je mogućnost ažuriranja ne cijele internetske stranice, već njenog zasebnog dijela, što čini AJAX tehnologije tako popularnim i traženim u području web dizajna. Često se AJAX koristi u autorizacijskim skriptama (generiranje snimanja) ili pri prikazu statusa dugotrajnih operacija koje se izvode na poslužitelju.

Ne ulazeći u detalje, AJAX kombinira dva glavna pristupa stvaranju interaktivnih internetskih stranica:

Korištenje objekta XMLHttpZahtjev kontaktirati poslužitelj i primiti odgovor od njega u pozadini putem http protokola.

Dinamičko ažuriranje same stranice kroz njezina softverska sučelja objektni model (Objektni model dokumenta, DOM) u kodu. Sve skupa ovo se zove .

Koje su prednosti korištenja AJAX-a? Da biste ovo razumjeli, morate ga koristiti i usporediti s onim što se dogodilo bez njega. Ispod je nekoliko nepobitnih. prednosti korištenja AJAX-a prilikom izrade internet stranica:

Smanjenje prometa i opterećenja na poslužitelju, budući da poslužitelj i klijent ne razmjenjuju cijeli markup Internet stranice, već samo dio njega.

Bolja ergonomija i više velika brzina rad korisničkog sučelja stranice.

Korištenje AJAX-a ima ne samo prednosti, već i nedostatke s kojima se morate pomiriti ako odlučite koristiti ovaj softverski koncept u svojim internetskim projektima. Evo nekih koje treba imati na umu:

• Podaci preuzeti tijekom pozadinske komunikacije s poslužiteljem putem objekta XMLHttpRequest nisu uključeni u povijest pregledavanja i ne mogu se dodati u oznake preglednika.


• Sadržaj prikazan kao rezultat AJAX zahtjeva možda nikada neće biti vidljiv tražilicama (Google, Yandex), budući da one ne oponašaju ponašanje korisnika i ne izvršavaju JavaScript kod.


• Standardne usluge brojanja posjetitelja i pregledavanja stranica mogu generirati netočnu statistiku.


• Korištenje ne samo AJAX softvera, već i bilo koje JavaScript skripte može dovesti do toga da se vaša stranica drugačije ponaša pod različitim preglednicima, a to ponašanje neće uvijek biti ispravno.

Objekt XMLHttpRequest

Sada ću ukratko opisati scenarij kako se AJAX koristi u svom čistom obliku, a zatim ću vam detaljnije reći kako . Kao što je već spomenuto, asinkroni pozivi poslužitelju vrše se preko objekta XMLHttpRequest. Najprije ga trebate izraditi, a to se u različitim preglednicima radi različito. Procedura za kreiranje XMLHttpRequesta koji ima šanse da svugdje ispravno radi izgleda otprilike ovako.

Function createRequest() ( var request = null; if (window.XMLHttpRequest) ( request = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( try (request = new ActiveXObject("Msxml2.XMLHTTP");) catch ( ex) ( try ( request = new ActiveXObject("Microsoft.XMLHTTP");) catch (ex)(return null;) ) return request)

//Kreirajte zahtjev var request = createRequest() //Proslijedite tip http zahtjev a (GET ili POST), URL zahtjeva i način: asinkroni zahtjev (true) //ili sinkroni (false), kada je preglednik suspendiran dok se zahtjev izvršava. request.open("GET", url, istina); //Definiranje obrađivača završetka zahtjeva request.onreadystatechange = onSuccess; //Izvrši zahtjev request.send();

Gdje funkcija za rukovanje uspješnim završetkom onSuccess zahtjeva može izgledati otprilike ovako:

Function onSuccess () ( try ( if (request.readyState == 4) ( //Zahtjev je dovršen if (request.status == 200) ( //i uspješno dovršen //ovdje radimo nešto s rezultatom zahtjeva var result = request .responseText;) else ( //ovdje obrađujemo neuspješno izvršenje zahtjeva alert(request.statusText); ) ) catch(ex) () )

AJAX i jQuery

U principu, u gornjem primjeru nema ništa komplicirano, ali obratite pozornost na funkciju createRequest. Sposobnost programskog koda da jednako ispravno radi pod bilo kojim preglednikom naziva se kompatibilnost s različitim preglednicima. Vašem programski kod postao cross-browser trebate uložiti ozbiljne napore: morate znati nijanse svakog preglednika i načine rješavanja problema nekompatibilnosti njegove infrastrukture s onima koje koristite softver. Popularan među web programerima Javascript biblioteka Ne samo da jQuery olakšava rad s objektom XMLHttpRequest, on također osigurava (i pokušava) da je vaše rješenje kompatibilno s više preglednika. jQuery ima nekoliko metoda za rad s AJAX tehnologijama. Prije svega, ovo je sama ajax metoda, koja je najuniverzalnija i prikladna za sastavljanje bilo kakvih zahtjeva prema poslužitelju. Metode get i post interno također koriste ajax metodu (one su njeni omotači) i namijenjene su, kao što možete pogoditi iz njihovog naziva, za slanje na poslužitelj DOBITI I POST zahtjeva u skladu s tim. Ispod su primjeri JavaScript koda koristeći AJAX koristeći jQuery.

Funkcija loadArticle_ajax(tip, id) ( $..php", podaci: ((article_id:id)), uspjeh: OnComplete, pogreška: OnFail )); ) funkcija loadArticle_get(id) ( $..php", (article_id: id), OnComplete).fail(OnFail); ) funkcija loadArticle_post(id) ( $..php", (article_id:id), OnComplete).fail(OnFail); ) funkcija OnComplete(html) ( $("#content").html(html); ) funkcija OnFail (odgovor) ( $("#content").html("Pogreška pri učitavanju podataka:
"+response.statusText+"
" + response.responseText); )

Gore navedene funkcije izvode parametrizirani http zahtjev putem veze (URL) sljedećeg oblika:

Http://site/readarticle_content.php?article_id=id

Dohvaćeni sadržaj ovisi o id parametru. Ako u vašem slučaju ne trebate proslijediti nikakve parametre, ostavite prazan skup () kao odgovarajući argument. Možete pogledati radni primjer. To je sve za mene o AJAX-u i jQueryju.