AJAX: što je to, utjecaj na seo, prednosti i mane tehnologije. Korištenje Ajaxa

AJAX je akronim koji označava asinkroni Javascript i XML. Zapravo, AJAX nije nova tehnologija jer su i Javascript i XML prisutni već neko vrijeme, a AJAX je sinteza tih tehnologija. AJAX se najčešće povezuje s pojmom Web 2.0 i reklamira se kao najnovija web aplikacija.

Kada koristite AJAX, nema potrebe svaki put ažurirati cijelu stranicu, jer se ažurira samo određeni dio. Mnogo je praktičnije, jer ne morate dugo čekati, i ekonomičnije, jer nemaju svi neograničeni Internet. Istina, u ovom slučaju programer mora osigurati da korisnik bude svjestan što se događa na stranici. To se može implementirati pomoću indikatora učitavanja, tekstualnih poruka da se podaci razmjenjuju s poslužiteljem. Također morate razumjeti da ne podržavaju svi preglednici AJAX (stari preglednici i tekstualni preglednici). Osim toga, Javascript korisnik može onemogućiti. Stoga ne biste trebali zlorabiti korištenje tehnologije i pribjegavati alternativnim metodama predstavljanja informacija na web stranici.

Rezimirajmo prednosti AJAX-a:

• Mogućnost izrade korisničkog web sučelja
• Aktivna interakcija s korisnikom
• Jednostavnost korištenja

AJAX koristi dvije metode rada s web stranicom: mijenjanje web stranice bez ponovnog učitavanja i dinamičko kontaktiranje poslužitelja. Drugi se može učiniti na nekoliko načina, posebno XMLHttpRequestom, o kojem ćemo govoriti, i korištenjem tehnike skrivenog okvira.

Za razmjenu podataka potrebno je na stranici kreirati XMLHttpRequest objekt koji je svojevrsni posrednik između preglednika korisnika i poslužitelja (slika 1). Pomoću XMLHttpRequesta možete poslati zahtjev poslužitelju, kao i primiti odgovor u obliku raznih vrsta podataka.

Postoje dva načina za razmjenu podataka s poslužiteljem. Prvi način je GET zahtjev. U ovom zahtjevu pristupate dokumentu na poslužitelju, prosljeđujući mu argumente putem samog URL-a. U isto vrijeme, na strani klijenta, bit će logično koristiti Javascript escape funkciju tako da neki podaci ne prekidaju zahtjev.

Klijentski dio, napisan u Javascriptu, mora osigurati potrebnu funkcionalnost za sigurnu komunikaciju s poslužiteljem i osigurati metode za razmjenu podataka na bilo koji od gore navedenih načina. Poslužiteljski dio mora obraditi ulazne podatke, te na temelju njih generirati nove informacije (npr. rad s bazom podataka), te ih vratiti klijentu. Na primjer, za traženje informacija od poslužitelja možete koristiti uobičajeni GET zahtjev s prijenosom nekoliko i malih parametara, a za ažuriranje informacija ili dodavanje novih informacija morat ćete koristiti POST zahtjev, jer vam omogućuje prijenos velike količine podataka.

Kao što je već spomenuto, AJAX koristi asinkroni prijenos podataka. To znači da tijekom prijenosa podataka korisnik može obavljati druge radnje koje su mu potrebne. U ovom trenutku korisnik bi trebao biti obaviješten da se odvija neka vrsta razmjene podataka, inače će korisnik pomisliti da se nešto nije u redu dogodilo i može napustiti stranicu ili ponovno pozvati funkciju koja je "visjela", po njegovom mišljenju. Indikacija tijekom komunikacije u Web 2.0 aplikaciji igra vrlo važnu ulogu: posjetitelji možda još nisu navikli na ove načine osvježavanja stranice.

Odgovor poslužitelja ne može biti samo XML, kao što implicira naziv tehnologije. Uz XML, možete dobiti odgovor u obliku običnog teksta ili JSON (Javascript Object Notation). Ako je odgovor primljen u običnom tekstu, tada se može odmah prikazati u spremniku na stranici. Kada se primi XML odgovor, rezultirajući XML dokument obično se obrađuje na strani klijenta i pretvara u (X)HTML. Prilikom primanja JSON odgovora, klijent treba samo izvršiti primljeni kod (Javascriptova funkcija eval) kako bi dobio potpuni Javascript objekt. Ali ovdje treba biti oprezan i uzeti u obzir činjenicu da se zlonamjerni kod može prenijeti ovom tehnologijom, pa prije izvršenja koda primljenog s poslužitelja treba ga pažljivo provjeriti i obraditi. Postoji takva praksa kao "idle" zahtjev, u kojem nema odgovora od poslužitelja, samo se mijenjaju podaci na strani poslužitelja.

U različitim preglednicima ovaj objekt ima različita svojstva, ali općenito je isti.

Metode objekta XMLHttpRequest

Imajte na umu da su nazivi metoda napisani u istom stilu (Camel-stil) kao i druge Javascript funkcije. Budite oprezni kada ih koristite.

abortus()- poništiti trenutni zahtjev prema poslužitelju.

getAllResponseHeaders()- dobiti sva zaglavlja odgovora s poslužitelja.

getResponseHeader("naziv_zaglavlja")- dobiti navedeni naslov.

open("request_type","URL","asynchronous","username","password")- inicijalizacija zahtjeva prema poslužitelju, navodeći metodu zahtjeva. Vrsta zahtjeva i URL su obavezni parametri. Treći argument je Booleova vrijednost. Obično je uvijek postavljeno na true ili nije uopće postavljeno (zadano je true). Četvrti i peti argument koriste se za provjeru autentičnosti (vrlo je nesigurno pohraniti podatke za provjeru autentičnosti u skriptu, budući da skriptu može vidjeti svaki korisnik).

poslati ("sadržaj")- poslati HTTP zahtjev poslužitelju i dobiti odgovor.

setRequestHeader("naziv_zaglavlja","vrijednost")- postavite vrijednosti zaglavlja zahtjeva.

Svojstva objekta XMLHttpRequest

onreadystatechange jedno je od najvažnijih svojstava objekta XMLHttpRequest. Uz pomoć ovog svojstva postavlja se rukovatelj koji se poziva kad god se promijeni status objekta.

readyState- broj koji označava status objekta.

responseText- prikaz odgovora poslužitelja u obliku običnog teksta (string).

odgovorXML- objekt dokumenta kompatibilan s DOM-om primljenim od poslužitelja.

status- status odgovora poslužitelja.

statusText- tekstualni prikaz statusa odgovora poslužitelja.

Pogledajmo pobliže svojstvo readyState:

• 0 - Objekt nije inicijaliziran.
• 1 - Objekt učitava podatke.
• 2 - Objekt je učitao svoje podatke.
• 3 - Objekt nije u potpunosti učitan, ali korisnik s njime može komunicirati.
• 4 - Objekt je potpuno inicijaliziran; dobio odgovor od poslužitelja.

Na temelju stanja spremnosti objekta posjetitelju možete pružiti informacije o fazi razmjene podataka s poslužiteljem i, eventualno, o tome ga vizualno obavijestiti. Kreiranje objekta XMLHttpRequest

Kao što je gore spomenuto, stvaranje ovog objekta za svaku vrstu preglednika jedinstven je proces.

Na primjer, da biste stvorili objekt u Gecko-kompatibilnim preglednicima, Konqueroru i Safariju, upotrijebili biste sljedeći izraz:

VarZahtjev = novi XMLHttpZahtjev();

A za Internet Explorer koristi se sljedeće:

VarRequest = new ActiveXObject("Microsoft.XMLHTTP");

Var Zahtjev = novi ActiveXObject("Msxml2.XMLHTTP");

Sada, kako biste postigli kompatibilnost s više preglednika, trebate dodati sve funkcije u jednu:

Function CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( //Gecko kompatibilni preglednici, Safari, Konqueror Request = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( //Internet explorer try ( Request = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (CatchException) ( Request = new ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Request) ( alert("Unable to create XMLHttpRequest"); ) return Request; )

Nakon svega ovoga, možete stvoriti ovaj objekt i ne brinuti se o performansama na popularnim preglednicima. Ali možete stvoriti objekt na različitim mjestima. Ako ga kreirate globalno, tada će u određenom trenutku biti moguć samo jedan zahtjev poslužitelju. Možete kreirati objekt svaki put kada se uputi zahtjev poslužitelju (ovo će gotovo u potpunosti riješiti problem).

Zahtjev poslužitelja

Algoritam zahtjeva poslužitelja izgleda ovako:

• Provjera postojanja XMLHttpRequesta.
• Inicijalizacija veze s poslužiteljem.
• Slanje zahtjeva poslužitelju.
• Obrada primljenih podataka.

Za kreiranje zahtjeva prema poslužitelju izradit ćemo malu funkciju koja će kombinirati funkcionalnost za GET i POST zahtjeve.

/* Funkcija za slanje zahtjeva u datoteku na poslužitelju r_method - tip zahtjeva: GET ili POST r_path - put do datoteke r_args - argumenti poput a=1&b=2&c=3... r_handler - funkcija za obradu odgovora od poslužitelj */ funkcija SendRequest(r_method, r_path, r_args, r_handler) ( //Kreirajte zahtjev var Request = CreateRequest(); //Provjerite postoji li zahtjev ponovno if (!Request) ( return; ) //Dodijelite prilagođeni rukovatelj Request.onreadystatechange = function() ( // Ako je razmjena podataka dovršena if (Request.readyState == 4) ( //Dajte kontrolu korisničkom rukovatelju r_handler(Request); ) ) //Provjerite je li potreban GET zahtjev if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //Inicijaliziraj vezu Request.open(r_method, r_path, true); if (r_method.toLowerCase( ) == "post") ( //Ako je ovo POST- zahtjev //Postavi zaglavlje Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //Pošalji zahtjev Request.send(r_args); ) else ( //Ako je ovo GET zahtjev //Pošalji null zahtjev Request.send(null); ) )

Kreiranje zahtjeva postalo je mnogo lakše. Na primjer, napišimo funkciju koja će primiti sadržaj datoteke na poslužitelju i poslati ga u spremnik.

Function ReadFile(filename, container) ( //Stvorite funkciju rukovatelja var Handler = function(Request) ( document.getElementById(container).innerHTML = Request.responseText; ) //Pošaljite zahtjev SendRequest("GET",filename," ", voditelj); )

Tako se odvija interakcija s poslužiteljem.

Obrada odgovora

U prethodnom primjeru napravili smo funkciju zahtjeva poslužitelju. Ali zapravo je nesiguran jer ne obrađujemo stanje objekta i stanje odgovora s poslužitelja.

Dodajmo u naš kod tako da može prikazati vizualnu obavijest o procesu učitavanja.

Request.onreadystatechange = function() ( //Ako je razmjena podataka dovršena if (Request.readyState == 4) ( //Dajte kontrolu korisničkom rukovatelju r_handler(Request); ) else ( //Obavijestite korisnika o preuzimanju ) ) ...

Kao što već znate, XMLHttpRequest objekt vam omogućuje da saznate status odgovora s poslužitelja. Iskoristimo ovu priliku.

Request.onreadystatechange = function() ( //Ako je razmjena podataka dovršena if (Request.readyState == 4) ( if (Request.status == 200) ( //Prijenos kontrole korisničkom rukovatelju r_handler(Request); ) else ( // Obavijesti korisnika o pogrešci koja se dogodila ) ) else ( // Obavijesti korisnika o preuzimanju ) ) ...

Opcije odgovora poslužitelja

S poslužitelja se može primiti nekoliko vrsta podataka:

• čisti tekst

Ako primite običan tekst, možete ga odmah poslati u spremnik, odnosno na izlaz. Kada primate podatke kao XML, morate obraditi podatke pomoću DOM funkcija i prikazati rezultat pomoću HTML-a.

JSON je zapis Javascript objekta. Uz njegovu pomoć, možete prikazati objekt kao niz (ovdje možete povući analogiju s funkcijom serijalizacije). Kada primate JSON podatke, morate ih izvršiti kako biste dobili potpuni Javascript objekt i izvršili potrebne operacije na njemu. Imajte na umu da takav prijenos podataka i izvršenje nisu sigurni. Morate pratiti što ide u izvršenje.

Primjer JSON koda:
( "data": ( "razno": [ ( "name" : "JSON prvi element", "type" : "Podnaslov 1"), ( "name" : "JSON drugi element", "type" : " Podnaslov 2 " ] ) )

Po primitku takvog koda, izvršavamo sljedeće radnje:

var responsedata = eval("(" + Request.responseText + ")")

Nakon izvršavanja ovog koda, objekt će vam biti dostupan podaci o odgovoru.

Rad s programskim jezicima na strani poslužitelja

Takav se rad ne razlikuje od uobičajenog. Za primjer, uzet ću PHP kao jezik poslužitelja. Ništa se nije promijenilo na strani klijenta, ali stranu poslužitelja sada predstavlja PHP datoteka.

Po tradiciji, započnimo s pozdravom našem divnom svijetu:

echo "Zdravo, svijete!";

Prilikom pristupa ovoj datoteci, string Hello, World bit će vraćen klijentu. Kao što razumijete, ovo predstavlja najšire mogućnosti za izgradnju aplikacija. Prosljeđivanjem argumenata prilikom pozivanja poslužitelja s XMLHttpRequestom, možete parametrizirati izlaz, pružajući tako bogatu funkcionalnost web aplikaciji.

Osim PHP-a, može se koristiti bilo koji drugi programski jezik na strani poslužitelja.

AJAX - Što je to?

Kada je malo postojećih prilika, a nema mjesta za poboljšanje postojećih, tada dolazi do tehnološkog iskoraka. Takav iskorak je AJAX (Asynchronous JavaScript and XML) - pristup izgradnji korisničkih sučelja za web aplikacije, u kojem web stranica, bez ponovnog učitavanja, sama učitava podatke koji su korisniku potrebni. AJAX je jedna od komponenti DHTML koncepta.

Što nam daje ova tehnologija. Trenutačno, razvoj WEB aplikacija nastoji razlikovati stranu klijenta od strane poslužitelja, i to je razlog široke upotrebe predložaka kao što su Smarty i XSLT. Projekti su sada sve složeniji, a ispreplitanje različitih tehnologija postaje preskupo za vrijeme programera. Tako se, na primjer, svi stilovi oblikovanja prikazuju u CSS ili XSL datotekama, HTML ili XML podaci pohranjuju se u drugim odjeljcima, rukovatelji poslužitelja u trećem, baze podataka u četvrtom. I ako ste prije 5-6 godina gotovo posvuda mogli vidjeti isprepletanje svega toga u jednoj datoteci, sada to sve više postaje rijetkost.

Kod razvoja složenijih projekata postoji potreba za strukturiranim i čitljivim kodom. Ne biste trebali zatrpati programerov kod kodom dizajnera izgleda, a kod dizajnera izgleda dizajnerovim izmjenama, i tako dalje.

Postoji potreba za odvajanjem rada. Tako će, primjerice, dizajner raditi svoj posao, koder će raditi svoj posao, programer će raditi svoj posao, a pritom se nitko neće miješati jedni drugima. Kao rezultat toga, svaki sudionik projekta morat će znati samo podatke s kojima će morati raditi. U tom slučaju značajno se povećava produktivnost grupe i kvaliteta projekta. Trenutno se ovaj problem uspješno rješava korištenjem predložaka, ali to također stvara određene poteškoće, jer da biste, recimo, povezali Smarty, morate povezati softverski modul za obradu predložaka i jasno ga povezati sa strukturom projekta. Ali to nije uvijek moguće i zahtijeva određene troškove. Malo je lakše kada koristite paket XML + XSL, jer oni pružaju više opcija, ali ovo je alternativa, ništa više. Ali što ako gledamo prema nečem radikalno novom, što bi nam omogućilo da sve bolje kombiniramo, koristeći mogućnosti onoga što jest? Pokušajte zamisliti JavaScript koji ima svu moć PHP-a ili Perla, uključujući grafiku i baze podataka, koji ima mnogo bolju proširivost i upotrebljivost, a također je i višeplatformski.

Dakle, što je AJAX? O Ajaxu se prvi put počelo govoriti nakon članka Jesseja Jamesa Garretta "Rethinking Web Applications" iz veljače 2005. godine. Ajax nije samostalna tehnologija. Ovo je ideja koja se temelji na dva glavna principa.

Korištenje DHTML-a za dinamičku promjenu sadržaja stranice.

Korištenje XMLHttpRequesta za postavljanje upita poslužitelju u hodu.

Korištenje ova dva pristupa omogućuje vam stvaranje mnogo praktičnijih WEB korisničkih sučelja na onim stranicama web mjesta gdje je potrebna aktivna interakcija korisnika. Korištenje Ajaxa postalo je popularnije otkako ga je Google počeo aktivno koristiti na svojim stranicama kao što su Gmail, Google karte i Google Sugestije. Izrada ovih stranica potvrdila je učinkovitost ovog pristupa.

Dakle detaljnije: ako uzmemo klasični model WEB aplikacije:

Klijent, upisujući u traku za pretraživanje adresu resursa koji ga zanima, dolazi do poslužitelja, postavlja mu zahtjev. Poslužitelj vrši izračune u skladu sa zahtjevom, pristupa bazi podataka i tako dalje, nakon čega primljeni podaci idu klijentu i po potrebi se zamjenjuju u predloške i obrađuju u pregledniku. Rezultat je stranica koju vidimo, a koju 80% stanovništva zemlje koja se nalazi na WEB-u naziva Internetom. Ovo je klasični model koji se uspio dokazati i zaslužiti počasno mjesto na suncu. Ovo je najjednostavniji model interakcije i, kao rezultat toga, najčešći. Međutim, to sve više postaje nedovoljno. Zamislite on-line igru ​​"Battleship", koju igraju dva okorjela prijatelja - stanovnik Južne Afrike i stanovnik Japana. Kako iskoristiti takav model da im igra bude što ugodnija? U svakom slučaju, podaci o potopljenim brodovima bit će pohranjeni na serveru, a da bi se provjerilo je li protivnik bio takav, bit će potrebno svaki put ažurirati stranicu i podebljati zastarjele podatke. “Ali ljudi su se dosjetili cachinga” – reći ćete, i bit ćete potpuno u pravu, ali to ne olakšava. Predmemoriranje će samo ubrzati vrijeme interakcije s poslužiteljem, ali neće eliminirati potrebu za ponovnim učitavanjem stranice. Alternativno, možete postaviti određeno vrijeme samoažuriranja, ali u tom slučaju stranica će se potpuno ponovno učitati.

Sada pogledajmo AJAX model interakcije:

Redoslijed radnji klijenta je spremljen i on, najvjerojatnije, neće razumjeti što će se dogoditi, a riječ AJAX bit će povezana samo s imenom nogometnog kluba. Ali na strani poslužitelja stvari izgledaju drugačije.

Pristupom poslužitelju generira se stranica koja će se prikazati korisniku i ponuditi mu da izvrši niz radnji koje ga zanimaju. Uz svjestan (iako ne nužno) odabir klijenta, njegov zahtjev će se odnositi na AJAX modul, koji će izvršiti sve izračune koji ga zanimaju i raditi sa serverom kao takvim. Ali što je inovacija? Glavna razlika je u tome što nam ova metoda daje mogućnost dinamičkog pristupa poslužitelju i izvođenja radnji koje nas zanimaju. Na primjer, trebamo izvršiti poziv bazi podataka i dobiti podatke koji nas zanimaju, a koje ćemo onda koristiti. Podatke ćemo pohraniti u XML datoteku koja će se dinamički generirati, dakle:

Napravite novi JavaScript objekt:

Var req = new ActiveXObject("Microsoft.XMLHTTP"); (za IE) var req = new XMLHttpRequest(); (Za sve ostalo)

Zatim pišemo funkciju koristeći ovaj objekt

Varreq; funkcija loadXMLDoc(url) ( // grana za izvorni XMLHttpRequest objekt if (window.XMLHttpRequest) ( req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send( null); // grana za IE/Windows ActiveX verziju ) else if (window.ActiveXObject) ( req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) ( req.onreadystatechange = processReqChange; req.open("GET) ", url, true); req.send(); ) ) )

U tijelu HTML datoteke pišemo skriptu koja će:

Funkcija checkName(input, response) ( if (response != "")( // Response mode message = document.getElementById("nameCheckFailed"); if (response == "1")( message. className = "error"; )else( message.className = "hidden"; ) )else( // Način unosa url = "http://localhost/xml/checkUserName.php?q=" \\ + input; loadXMLDoc(url); ) )

U datoteci localhost/xml/checkUserName.php obrađujemo podatke primljene iz naredbenog retka u ovom slučaju u q varijabli. A rezultat se sprema u XML strukturu, koja je pohranjena u istoj datoteci. Tako možemo primati i obrađivati ​​podatke dobivene iz baze podataka ili nešto drugo što nam je potrebno. Osim toga, poslužitelj će obraditi samo podatke koje trebamo ažurirati, a ne cijelu stranicu ako se ponovno učita.

Vratimo se sada dvojici prijatelja - zaljubljenika u morske bitke: s obzirom na pojavu ove inovacije, možemo učiniti sljedeće: svake tri sekunde provjeriti XML datoteku, ova provjera uključuje provjeru baze podataka za novi zapis, tj. , za potez protivnika. Ako je potez napravljen, stranica potapa brodove bez ponovnog utovara, kvareći tako raspoloženje sudionika vodenih bitaka. Ova se funkcionalnost postiže elementarnom upotrebom Javascripta i stilskih listova. Ovaj primjer je sasvim jasan, ali daleko od potpunog, mnogo je značajnije korištenje ove tehnologije.

Međutim, nije sve tako jednostavno. Pogledajmo sada negativne osobine.

Prvo, podatke možemo prenijeti samo metodom GET, tako da ćemo velike količine podataka morati ostaviti na miru. Ovaj se problem više puta spominjao u različitim izvorima, ali gospodo, postoje kolačići koji su sasvim prihvatljivi u slučajevima prijenosa velikih količina podataka nego što GET zahtjev može primiti, a Javascript zauzvrat ima funkcije za rad s njima.

Drugi problem je kompatibilnost s više preglednika. Objekt XMLHttpRequest još nije dio nijednog standarda (iako je nešto slično već predloženo u specifikaciji W3C DOM Level 3 Load and Save). Stoga postoje dvije različite metode za pozivanje ovog objekta u kodu skripte. U Internet Exploreru, ActiveX objekt se poziva ovako:

Var req = new ActiveXObject("Microsoft.XMLHTTP");

U Mozilli i Safariju to je lakše (jer je to objekt ugrađen u JavaScript):

varreq = novi XMLHttpZahtjev();

Svi moderni preglednici podržavaju ovaj objekt, a samo 1,8% korisnika (prema statistici SpyLog-a) koji koriste vrlo stare verzije preglednika koji ne podržavaju ovaj objekt imat će problema.

I na kraju, sigurnost. Stanimo na ovome detaljnije. Glavni problem je što se svi podaci i izvorni kod JavaScript funkcija mogu vidjeti pregledom izvornog koda stranice, odnosno napadač može pratiti logiku izvršavanja upita i pod određenim okolnostima izvršiti skup naredbi koje su mu potrebne . To ne igra posebnu ulogu kada imamo jednostavno podudaranje podataka, ali što učiniti u složenijim situacijama, kao što je autorizacija, i kako proslijediti lozinke u tom slučaju. Kao što je gore spomenuto, kolačići dolaze u pomoć. Uz njihovu pomoć mogu se poslati potrebni podaci, ali i obraditi. Uzmimo primjer u kojem će se korisnik autentificirati pomoću tehnologije kojoj je članak posvećen.

Generiranje stranice, generiramo jedinstvene vrijednosti koje zatim stavljamo u varijable poslužitelja. A u kolačićima preglednika, tada tijekom autorizacije dobivamo korisničko ime i lozinku, koje trebamo proslijediti modulu za obradu na poslužitelju.

Nakon što korisnik unese podatke i pritisne gumb Pošalji, njegova lozinka se upisuje u Kolačiće, a korisničko ime se prenosi otvoreno - poveznicom, npr. http://www.mubestajax.com/ajax.php?login=pupkin , prilikom primanja podataka poslužitelj prije svega provodi usklađivanje primljenih podataka. Budući da se vrijednosti koje smo generirali od početka poslužitelja, a zatim ih proslijedili globalnim varijablama poslužitelja i kolačića moraju podudarati, prilikom provjere integriteta prenesenih podataka, program prestaje raditi ako postoji neslaganje. Ako je sve prošlo dobro, tada se izdvajaju svi potrebni podaci i provode potrebni izračuni i rad. Ova metoda zaštite je vrlo jednostavna i učinkovita. Ali za velike projekte nije prikladan.

Kada je sigurnost u prvom planu, bolje je koristiti složenija i pouzdanija rješenja. Ali u većini slučajeva ove mjere opreza bit će više nego dovoljne, budući da korištenje složenijih modula podrazumijeva korištenje tehnologija koje nisu uvijek uključene u standardni softver modernih poslužitelja, čija je glavna značajka jednostavnost. Zbog toga su tehnologije kao što su MySQL i PHP postale vrlo raširene. oni pružaju jednostavnost rada s malom potrošnjom resursa i dovoljnom pouzdanošću. A u okviru ovog softvera, gore predloženo rješenje najbolje odgovara.

Zaključno, želio bih reći da je AJAX, s jedne strane, veliki korak u WEB inženjerstvu, ali s druge strane, to je davno završena faza evolucije koja je otvorila nove horizonte u području razvoja softvera . U isto vrijeme, ova tehnologija je još uvijek prilično "sirova", jer je njezina uporaba u ovom trenutku prilično ugodna iznimka. Ali siguran sam da će svi čuti za to više puta.

Većina modernih web stranica koristi tehnologiju zvanu AJAX za brzu i učinkovitu interakciju s posjetiteljem. AJAX je postao vrlo popularna metoda za dobivanje 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 izvrsnu implementaciju AJAX-a na visokoj razini u obliku skupa metoda i funkcija koje olakšavaju i ubrzavaju izradu web stranica.

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

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

Napomena: lekcije se fokusiraju na JavaScript dio na strani klijenta. Ali razvoj poslužiteljske strane također je prilično jednostavan. Za više informacija pročitajte materijal o programskim jezicima na strani poslužitelja kao što je PHP.

Što je AJAX i zašto je koristan?

AJAX je tehnika razvoja web aplikacija u kojoj JavaScript kod koji se izvršava u pregledniku posjetitelja komunicira s web poslužiteljem asinkrono, odnosno u pozadini. Razlika od običnih web aplikacija je sljedeća:

• Tipična web stranica sadrži poveznice ili obrasce koji, kada se klikne ili pošalju, postavljaju zahtjev za novi URL na web poslužitelju. Poslužitelj šalje potpuno novu HTML stranicu, koju preglednik zatim prikazuje, zamjenjujući originalnu stranicu. Ovakav pristup oduzima dosta vremena i loše utječe na posjetitelja jer mora čekati da se učita nova stranica.
• 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, posjetitelju se šalje poruka o ažuriranju baze podataka na poslužitelju.

Budući da se AJAX zahtjev izvodi u pozadini, JavaScript kod (i posjetitelj) mogu nastaviti raditi na stranici 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 JavaScript AJAX koda za više preglednika može biti prilično naporan proces. Srećom, jQuery vam daje neke AJAX metode jednostavne za korištenje koje vam omogućuju apstrahiranje mnogih operacija niske razine.

Za one znatiželjnije, riječ AJAX je skraćenica od prvih slova engleskog izraza "A synchronous JavaScript A nd X ML" (Asynchronous JavaScript and 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 s $.get()

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

U najjednostavnijem obliku, metodu možete pozvati ovako:

Gdje je url URL resursa od kojeg se očekuje odgovor. Ovo je obično 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 što biste to učinili s normalnim GET zahtjevom:

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

Ispravno je učiniti isto prosljeđivanjem podatkovnog objekta kao drugog parametra metodi $.get(). Podatkovni objekt mora sadržavati informacije u obliku parova naziv/vrijednost svojstva. Na primjer:

var data = (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);

Dobivanje podataka s poslužitelja

Do sada smo gledali samo primjere korištenja $.get() 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 se izvodi u pozadini dok se ostatak JavaScript koda još izvodi. 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. Najmanje, vaša funkcija mora uzeti podatke koje vraća poslužitelj kao svoj prvi argument:

Funkcija myCallback(returnedData) ( // Obrada podataka returnedData )

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

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

Određivanje vrste podataka odgovora

Tipič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 najprikladniji format i analizirati podatke u skladu s tim. Ali bolje je eksplicitno definirati format.

Za određivanje formata, četvrti argument mora se proslijediti 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, pozovite metodu $.get() ovako:

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

Primjer korištenja metode $.get().

Ovdje je primjer kreiranja AJAX zahtjeva pomoću metode $.get() i jednostavnog rukovanja odgovorom. 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": "Vrhunska hladnoća i bljuzgavica", "maxTemp": +1 )

Ova će datoteka oponašati JSON odgovor koji je možda generirala 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"); )); funkcija uspjeh(forecastData) ( var prognoza = prognozaData.city + " prognoza za " + prognozaData.date; prognoza += ": " + prognozaData.forecast + ". Maksimalna temperatura: " + 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 ovaj 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 spreman.

JavaScript kôd prvo veže rukovatelja događajem klika na gumb #getForecast. Ovaj rukovatelj postavlja AJAX GET zahtjev za getForecast.txt, prosljeđujući ime grada i datum za prognozu. Također definira funkciju 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 od getForecast.txt, pretvara ih u JavaScript objekt i prosljeđuje u funkciju.

Funkcija vraća objekt podataka forecastData 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().

Prije pet godina bili ste ružno pače (s kojim nitko nije razgovarao) ako niste znali XML. Prije osamnaest mjeseci Ruby je bio u središtu pozornosti, a programeri koji nisu znali što se s njim događa nisu bili pozvani u spremnik za rashlađenu vodu. Danas, ako želite doći na tech party, trebate Ajax.

Međutim, Ajax jest daleko nije hir, već moćan pristup izradi web stranica koji nije tako težak za naučiti kao potpuno novi jezik.

Prije nego što zaronim u detalje Ajaxa, uzmimo nekoliko minuta da shvatimo što radi Ajax. Kada ovih dana pišete molbu, imate dvije glavne mogućnosti:

• Aplikacije za stolna računala
• Web aplikacije

Obje opcije su poznate; aplikacije za radnu površinu obično se isporučuju na CD-u (ili se ponekad preuzimaju s web stranice) i u potpunosti instaliraju na vaše računalo. Oni mogu koristiti internet za preuzimanje ažuriranja, ali kod koji pokreće te aplikacije nalazi se na vašoj radnoj površini. Web aplikacije (što nije iznenađujuće) izvode se negdje na web poslužitelju, a tim aplikacijama pristupate putem web preglednika.

Što je još važnije, gdje se kôd u tim aplikacijama izvodi određuje kako će se ponašati i kako ćete s njima djelovati. Aplikacije za stolna računala obično su prilično brze (pokreću se na vašem računalu; ne morate čekati internetsku vezu), imaju odlična korisnička sučelja (obično komuniciraju s vašim operativnim sustavom) i nevjerojatno su dinamične. Možete klikati, tipkati, koristiti padajuće i skočne izbornike i kretati se kroz prozore gotovo bez odgode.

S druge strane, web aplikacije obično su najažurnije i pružaju značajke koje nikada ne biste mogli imati na svom računalu (mislite na Amazon.com i eBay). Međutim, sa snagom Weba dolazi i čekanje—čekanje odgovora s poslužitelja, čekanje da se zaslon ažurira, čekanje da se odgovori na zahtjev i da se generira nova stranica.

Jasno je da je ovo sve pojednostavljenje, ali ste dobili opću ideju. Kao što možda već sumnjate, Ajax pokušava premostiti jaz između funkcionalnosti i interaktivnosti desktop aplikacije i uvijek ažurne web aplikacije. Možete koristiti dinamička korisnička sučelja slična onima koja se nalaze u desktop aplikaciji, ali su dostupna u web aplikaciji.

Dakle, što čekamo? Počnimo promatrati Ajax i kako pretvoriti vaša nezgrapna web sučelja u osjetljive Ajax aplikacije.

Stara tehnologija, novi trikovi

Kada je riječ o Ajaxu, stvarnost je takva da pokriva puno tehnologija - da biste njime ovladali, morate se udubiti u nekoliko različitih tehnologija (zbog čega ću prvih nekoliko članaka u ovoj seriji podijeliti na neovisne dijelove). Dobra vijest je da vjerojatno već znate dovoljno o mnogim od ovih tehnologija - većinu tih pojedinačnih tehnologija lako je naučiti (definitivno nije tako teško kao potpuni programski jezik poput Jave ili Rubyja).

Definicija Ajaxa

Usput, Ajax je skraćenica za Asynchronous JavaScript i XML (i DHTML, itd.). Izraz je skovao Jesse James Garrett iz Adaptive Path (vidi odjeljak ) i, prema Jesseju, Ne trebao je biti akronim.

Ovdje su glavne tehnologije uključene u Ajax aplikacije:

• HTML se koristi za stvaranje web obrazaca i određivanje polja koja će se koristiti u vašoj aplikaciji.
• JavaScript kod je glavni kod koji pokreće Ajax aplikacije i komunicira s aplikacijama poslužitelja.
• DHTML ili dinamički HTML pomaže vam da dinamički ažurirate obrasce. Za označavanje HTML-a koristit ćete div, span i druge dinamičke HTML elemente.
• DOM, Document Object Model, koristit će se (putem JavaScript koda) za rad sa strukturom vašeg HTML-a i (u nekim slučajevima) XML-a primljenog od poslužitelja.

Pogledajmo svaku od njih pojedinačno i shvatimo što svaka od ovih tehnologija radi. Istražit ću svaku od njih u sljedećim člancima; za sada, pogledajmo pobliže ove komponente i tehnologije. Što više znate o njima, to je lakše prijeći s nasumičnog znanja na svladavanje svake od njih (i stvarno poboljšati proces razvoja web aplikacija).

Objekt XMLHttpRequest

Prva stavka o kojoj želite znati može biti najnovija za vas; zove se XMLHttpRequest. To je JavaScript objekt i jednostavno ga je stvoriti kao što je prikazano u .

Ispis 1. Stvaranje novog XMLHttpRequest objekta

var xmlHttp = novi XMLHttpZahtjev();

Govorit ću o ovom objektu u detalje u sljedećem članku, ali za sada shvatite da je ovo objekt koji kontrolira svu vašu interakciju s poslužiteljem. Prije nego što krenete dalje, zastanite i razmislite o tome - to je tehnologija JavaScript u objektu XMLHttpRequest koji komunicira s poslužiteljem. Ovo nije normalan tok aplikacije i tu leži gotovo sva magija Ajaxa.

U normalnim web aplikacijama korisnici ispunjavaju polja obrasca i kliknu gumb. podnijeti(potvrdite). Obrazac se zatim šalje poslužitelju u cijelosti, poslužitelj obrađuje skriptu (obično PHP ili Java, možda CGI proces ili nešto slično), a zatim šalje natrag cijelu novu stranicu. Ova stranica može biti HTML stranica s novim obrascem s nekim popunjenim podacima, ili stranica za potvrdu, ili možda stranica s nekim izborima na temelju podataka unesenih u izvorni obrazac. Naravno, dok se skripta ili program na poslužitelju ne obradi i ne vrati novi obrazac, korisnici moraju čekati. Njihovi zasloni bit će izbrisani i ponovno iscrtani kako novi podaci stignu s poslužitelja. Ovdje dolazi do niske interaktivnosti - korisnici ne dobivaju trenutnu povratnu informaciju i definitivno se osjećaju drugačije nego kada koriste aplikacije za stolna računala.

Ajax u biti stavlja JavaScript tehnologiju i XMLHttpRequest objekt između vaš web obrazac i poslužitelj. Kada korisnici ispunjavaju obrasce, podaci se prosljeđuju nekom JavaScript kodu, a ne izravno poslužitelju. Umjesto toga, JavaScript kôd prikuplja podatke obrasca i prosljeđuje zahtjev poslužitelju. Dok se to događa, obrazac na korisničkom zaslonu ne treperi, ne trepće, ne nestaje niti se blokira. Drugim riječima, JavaScript kod prosljeđuje zahtjev u pozadini; korisnik niti ne primijeti da postoji zahtjev prema poslužitelju. Štoviše, zahtjev se šalje asinkrono, što znači da vaš JavaScript kod (i korisnik) ne čekaju da poslužitelj odgovori. Odnosno, korisnici mogu nastaviti unositi podatke, pomicati stranicu i raditi s aplikacijom.

Poslužitelj zatim prosljeđuje podatke natrag u vaš JavaScript kod (još uvijek u vašem web obrascu), koji odlučuje što će učiniti s podacima. Može ažurirati polja obrasca u hodu, dajući vašoj aplikaciji neposredan dojam - korisnici dobivaju nove podatke bez podnošenja ili ažuriranja svojih obrazaca. JavaScript kôd može čak dobiti podatke, napraviti neke izračune i poslati drugi zahtjev, sve bez intervencije korisnika! Ovo je moć XMLHttpRequesta. Sa serverom može komunicirati do mile volje, a korisnik niti ne zna što se zapravo događa. Kao rezultat toga dobivamo dinamičnost, osjetljivost, visoku interaktivnost desktop aplikacije, uz sve mogućnosti interneta.

Dodavanje JavaScript koda

Nakon što shvatite XMLHttpRequest, ostatak JavaScript koda postaje dosadan posao. Zapravo, koristit ćete JavaScript kôd za mali broj osnovnih zadataka:

Da biste izvršili prva dva zadatka, morate biti dobro upoznati s metodom getElementById() navedenom u .

Ispis 2. Prikupljanje i postavljanje vrijednosti polja s JavaScriptom

// Dobivanje vrijednosti polja "phone" i pohranjivanje u varijablu telefona var phone = document.getElementById("phone").value; // Postavite vrijednosti u obrascu pomoću niza odgovora document.getElementById("order").value = response; document.getElementById("adresa").vrijednost = odgovor;

Ovdje nema ničeg posebnog, što je sjajno! Morate početi shvaćati da u svemu tome nema ništa previše komplicirano. Jednom kada naučite XMLHttpRequest, ostatak vaše Ajax aplikacije bit će jednostavan JavaScript poput onog u , pomiješan s malo pametnijim HTML-om. Osim toga, s vremena na vrijeme ima malo posla s DOM-om... Pa pogledajmo to.

Završetak s DOM-om

Posljednje, ali ne manje važno, je DOM, Document Object Model. Za neke od vas, glasine o DOM-u mogle bi biti pomalo zastrašujuće - ne koriste ga često HTML dizajneri, a čak je i pomalo neuobičajen za JavaScript kodere (osim ako se stvarno ne bavite programiranjem na visokoj razini). Možete pronaći opsežnu upotrebu DOM-a u teškim programima napisanim u Javi i C/C++; zapravo, to je DOM-u pribavilo reputaciju složenog i teškog za učenje.

Na sreću, korištenje DOM-a u JavaScript tehnologiji jednostavno je i uglavnom intuitivno. Sada sam vam vjerojatno trebao reći kako koristiti DOM, ili vam barem dati nekoliko primjera koda, ali čak i to bi vas odvelo na krivi put. Poanta je da možete stići prilično daleko s Ajaxom bez potrebe za miješanjem u DOM, a to je upravo način na koji vam želim pokazati. Vratit ću se DOM-u u sljedećem članku, ali za sada samo znajte da je tu negdje. Kako počnete prosljeđivati ​​XML podatke naprijed-natrag između vašeg JavaScript koda i stvarnih promjena HTML obrasca, zaronit ćete dublje u DOM. U međuvremenu, možete učinkovito raditi s Ajaxom bez DOM-a, pa ostavimo to zasad po strani.

Dobivanje Request objekta

Naoružani ovim općim pregledom, spremni ste pogledati pobliže. Budući da je XMLHttpRequest središnji za Ajax aplikacije (i vjerojatno nov za mnoge od vas), počet ću s njim. Kao što ste vidjeli u , stvaranje ovog objekta i njegovo korištenje trebalo bi biti jednostavno, zar ne? Pričekaj minutu.

Sjećate li se onih strašnih ratova preglednika od prije nekoliko godina i kako ništa nije radilo isto u različitim preglednicima? Vjerovali ili ne, ti ratovi još uvijek traju, iako u puno manjem obimu. I, iznenađenje: XMLHttpRequest je jedna od žrtava ovih ratova. Stoga morate poduzeti nekoliko različitih koraka kako bi XMLHttpRequest funkcionirao. Pokazat ću vam kako to učiniti korak po korak.

Rad s Microsoftovim preglednicima

Preglednik Microsoft Internet Explorer koristi MSXML parser za obradu XML-a (veze na više informacija o MSXML-u mogu se pronaći u odjeljku). Dakle, kada pišete Ajax aplikacije koje se trebaju izvoditi u Internet Exploreru, trebate kreirati objekt na poseban način.

Međutim, nije to tako lako. U upotrebi su zapravo dvije različite verzije MSXML-a. Verzija MSXML-a ovisi o verziji JavaScripta instaliranoj u Internet Exploreru, tako da morate napisati kod koji radi za obje verzije. Pogledajte kod za kreiranje XMLHttpRequesta u Microsoftovim preglednicima.

Ispis 3. Stvaranje XMLHttpRequest objekta u Microsoftovim preglednicima

varxmlHttp = lažno; pokušaj ( xmlHttp = novi ActiveXObject("Msxml2.XMLHTTP"); ) uhvati (e) ( pokušaj ( xmlHttp = novi ActiveXObject("Microsoft.XMLHTTP"); ) uhvati (e2) ( xmlHttp = lažno; ) )

Sve ovo možda još nema smisla, ali to je u redu. Prije kraja ovog članka udubit ćete se u JavaScript programiranje, rukovanje pogreškama, uvjetnu kompilaciju i više. U međuvremenu, trebali biste zapisati dva glavna retka u svojoj glavi:

xmlHttp = novi ActiveXObject("Msxml2.XMLHTTP");

xmlHttp = novi ActiveXObject("Microsoft.XMLHTTP"); .

Ukratko, ovaj kod pokušava stvoriti objekt pomoću jedne verzije MSXML-a; ako to ne uspije, kreira se objekt za drugu verziju. Graciozno, zar ne? Ako ništa ne radi, varijabla xmlHttp postavljena je na false kako bi vašem kodu ukazala da nešto nije u redu. U ovom slučaju možda koristite preglednik koji nije Microsoftov i trebate koristiti drugačiji kod da biste obavili posao.

Rad s preglednicima Mozilla i ne-Microsoft

Ako Internet Explorer nije vaš preglednik ili ako pišete kod za preglednike koji nisu Microsoftovi, potreban vam je drugačiji kod. Zapravo, ovo je jednostavna linija koju ste vidjeli u:

var xmlHttp = novi objekt XMLHttpRequest; .

Ova mnogo jednostavnija linija stvara objekt XMLHttpRequest u Mozilli, Firefoxu, Safariju, Operi i gotovo svakom pregledniku koji nije Microsoftov i koji podržava Ajax u bilo kojem obliku ili okusu.

Udruga

Želimo podržati svi preglednici. Tko želi napisati aplikaciju koja radi samo u Internet Exploreru ili aplikaciju koja radi samo u svim ostalim preglednicima? Još gore, želite li svoju prijavu napisati dva puta? Naravno da ne! Dakle, kombinirajmo podršku za Internet Explorer i druge preglednike. Evo koda koji to radi.

Ispis 4. Stvaranje XMLHttpRequest objekta za sve preglednike

/* Kreirajte novi XMLHttpRequest objekt za komunikaciju s web poslužiteljem */ var xmlHttp = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) pokušaj ( xmlHttp = novi ActiveXObject("Msxml2.XMLHTTP"); ) uhvati (e) ( pokušaj ( xmlHttp = novi ActiveXObject("Microsoft.XMLHTTP" ); ) catch (e2) ( xmlHttp = false; ) ) @end @*/ if (!xmlHttp && typeof XMLHttpRequest != "undefined") ( xmlHttp = new XMLHttpRequest(); )

Za sada zanemarite komentare i opskurne oznake poput @cc_on ; ovo su posebne naredbe JavaScript prevoditelja koje ćemo detaljno pokriti u mom sljedećem članku, koji će se baviti XMLHttpRequestom. Osnova ovog koda može se podijeliti u tri koraka:

Izradite varijablu xmlHttp koja će se odnositi na objekt XMLHttpRequest koji ćete izraditi.

U bloku pokušaja stvorite objekt u Microsoftovim preglednicima:

• U bloku pokušaja stvorite objekt pomoću objekta Msxml2.XMLHTTP.
• Ako to ne uspije, u bloku pokušaja stvorite objekt pomoću objekta Microsoft.XMLHTTP.

Ako xmlHttp još uvijek nije postavljen, stvorite objekt za druge preglednike.

Na kraju ovog procesa, xmlHttp se mora odnositi na važeći objekt XMLHttpRequest, bez obzira na preglednik koji korisnik koristi.

Nekoliko riječi o zaštiti

Što kažete na zaštitu? Moderni preglednici korisnicima nude mogućnost povećanja sigurnosti, onemogućavanja JavaScript tehnologije i onemogućavanja mnogih postavki u svojim preglednicima. U tim situacijama vaš kôd vjerojatno neće raditi ni pod kojim okolnostima. Za ovakve situacije morate probleme rješavati elegantno - postoji barem jedan članak o tome, a jedan ću napisati kasnije (vjerojatno će to biti dug niz, ali ne brinite - sve ćete savladati prije kraja ove serije članaka). U međuvremenu, pišete robustan, ali ne i savršen kod, što je odlično za učenje Ajaxa. Kasnije ćete se vratiti na bolji kod.

Zahtjev/odgovor u svijetu Ajaxa

Dakle, već ste upoznati s Ajaxom i imate osnovno razumijevanje XMLHttpRequest objekta i kako ga stvoriti. Ako pažljivo čitate, čak ćete shvatiti da tehnologija JavaScript komunicira s bilo kojom web aplikacijom na poslužitelju, a ne vaš HTML obrazac koji ste izravno poslali.

Što smo propustili? Kako zapravo koristiti XMLHttpRequest. Budući da je ovo kritičan kod koji ćete koristiti u nekim oblicima svatko vašu Ajax aplikaciju, pogledajmo na brzinu kako izgleda osnovni Ajax model zahtjeva/odgovora.

Izvršenje zahtjeva

Imate svoj sjajan novi XMLHttpRequest objekt; pustimo ga u pokret. Prvo, trebat će nam JavaScript metoda koju vaša web stranica može pozvati (na primjer, kada korisnik unese tekst ili odabere opciju iz izbornika). Zatim trebate slijediti isti osnovni obrazac u gotovo svim svojim Ajax aplikacijama:

Dobijte neke podatke iz web obrasca.

Stvorite URL veze.

Otvorite vezu s poslužiteljem.

Postavite funkciju koju će poslužitelj izvršiti nakon odgovora.

Pošaljite zahtjev.

Ispis 6. Rukovanje odgovorom s poslužitelja

funkcija updatePage() ( if (xmlHttp.readyState == 4) ( var response = xmlHttp.responseText; document.getElementById("zipCode").value = response; ) )

Opet, kôd nije težak niti složen. Čeka dok ga poslužitelj ne pozove sa željenim stanjem spremnosti i zatim koristi vrijednost koju poslužitelj vraća (u ovom slučaju poštanski broj za grad i državu koju je unio korisnik) za postavljanje drugog polja obrasca. Kao rezultat toga, polje zipCode neočekivano se pojavljuje s poštanskim brojem, ali korisnik nikada nisam kliknuo gumb! Ovo je ponašanje aplikacije za stolna računala, o čemu sam ranije govorio. Učinkovitost, osjećaj dinamičnosti itd., a sve uz mali Ajax kod.

Pažljivi čitatelji možda su primijetili da je polje zipCode normalno tekstualno polje. Nakon što poslužitelj vrati poštanski broj i metoda updatePage() postavi ovo polje na vrijednost poštanskog broja grada/države, korisnici svibanj nadjačati ovu vrijednost. Ovo je učinjeno namjerno iz dva razloga: da ovaj primjer bude jednostavan i da vam pokažemo da ponekad želite da korisnici mogu nadjačati vrijednosti koje vraća poslužitelj. Imajte na umu obje točke; oni su važni u dobrom dizajnu korisničkog sučelja.

Presretanje u web obrascima

Što nam preostaje? U biti, ne puno. Imate JavaScript metodu koja prikuplja korisnički unos obrasca, prosljeđuje ga poslužitelju, pruža drugu JavaScript metodu za obradu odgovora, pa čak i postavlja vrijednost polja kada taj odgovor stigne. Sve što je zapravo ostalo je poziv ovu prvu metodu i započnite cijeli proces. Očito biste mogli dodati gumb u svoj HTML obrazac, ali to je dobra stara 2001., zar ne? Iskoristimo snagu JavaScript tehnologije, kao što je prikazano u .

Ispis 7. Pokretanje Ajax procesa

Grad:

Država:

Poštanski broj:

Ako izgleda kao samo još jedan dio rutine, donekle, šifre – u pravu ste, jeste! Kada korisnik unese novu vrijednost za bilo koje polje grada ili države, pokreće se metoda callServer() i počinje Ajax funkcija. Osjećate li da počinjete shvaćati bit stvari? Sjajno!

Konačno

U ovom trenutku možda niste spremni izaći i napisati svoju prvu Ajax aplikaciju, barem ne dok ne istražite . Međutim, već možete početi shvaćati osnovnu ideju o tome kako takve aplikacije rade i što je XMLHttpRequest objekt. U nadolazećim člancima naučit ćete o ovom objektu, kako kontrolirati interakcije između JavaScripta i poslužitelja i raditi s HTML obrascima, pa čak i razumjeti DOM.

Za sada odvojite malo vremena za razmišljanje o tome koliko Ajax aplikacije mogu biti moćne. Zamislite web obrazac koji reagira ne samo kada kliknete na gumb, već i kada unesete podatke u polje, kada odaberete opciju s popisa opcija, pa čak i kada pomičete kursor po ekranu. Razmislite što ta riječ zapravo znači asinkroni. Zamislite JavaScript kod koji se izvršava i ne očekujući dok poslužitelj vraća odgovore na njegove zahtjeve. S kojim se problemima možete suočiti? Na koje stvari treba biti oprezan? I kako će se vaš dizajn obrasca promijeniti da bi se prilagodio ovom novom programskom pristupu?

Provođenje vremena na ovim točkama dat će vam veću vrijednost od pukog dobivanja koda koji možete kopirati i zalijepiti u svoju aplikaciju, a da ga zapravo ne razumijete. U sljedećem ćete članku ove ideje provesti u praksi; Dat ću pojedinosti o kodu koji vam je potreban da bi slične aplikacije radile. Do tada uživajte u snazi ​​Ajaxa.

ResursiNaučite

• Orginalni članak.
• Adaptive Path jedna je od vodećih tvrtki u području dizajna korisničkih sučelja. Možete dobiti mnogo informacija o Ajaxu pregledavajući njihove stranice. (developerWorks, listopad 2005.) pokazuje pet načina za serijalizaciju podataka u Ajax aplikacijama. (O"Reilly Media, Inc., veljača 2006.) preuzima ideje istaknute u ovom članku i cijeloj seriji i donosi vam ih (i još mnogo toga) u inovativnom i vrhunskom formatu koji je usmjeren prema naprijed.
• JavaScript: Potpuni vodič 4. izdanje (O"Reilly Media, Inc., studeni 2001.) odličan je izvor za JavaScript i rad s dinamičkim web stranicama.

Razgovarajte

• Ajax.NET Professional izvrstan je blog o svemu što se tiče Ajaxa.
• Pridružite se developerWorks zajednici sudjelovanjem u .

Naš život je nestalan. Sve na ovom svijetu se razvija i mijenja. Uključujući virtualnu stvarnost. A jedna od riječi s kojom su povezane ove promjene je AJAX. Za AJAX su već čuli ne samo web programeri, već i obični korisnici. Što se zapravo krije iza ove čarobne kratice? Kako ga koristiti na svojoj stranici? Ovo su pitanja na koja ću pokušati odgovoriti u ovom članku.

Za AJAX sam prvi put čuo ovo proljeće. Odmah sam se zainteresirao za ovu tehnologiju i, kako i priliči u takvim slučajevima, dao sam se u potragu za člancima koji bi mogli odgovoriti na moja pitanja: "Što je to? Kako radi? I koje su prednosti? Što mi treba dodatno instalirati na poslužitelj/klijent za rad s AJAX-om? Kako ga mogu koristiti na svojoj stranici?". Nakon desetak pročitanih članaka dobio sam odgovor samo na prva dva pitanja, a na ostala nisam nigdje našao odgovor. I tek nakon što sam pročitao nekoliko publikacija na engleskom, konačno sam shvatio što se događa. To me potaknulo da napišem ovaj članak.

Prije svega, članak je namijenjen obučenim ljudima koji pišu programe za Internet i upoznati su s pojmovima kao što su "objekt", "metoda", "svojstva". Međutim, djelomično može biti od koristi i onima koji su jednostavno zainteresirani za ovo pitanje. Popis referenci sadrži potrebnu listu veza pomoću kojih je sasvim moguće svladati tehnologiju od nule.

U sklopu prezentacije pod pojmom "preglednik" podrazumijevat će se preglednici: Internet Explorer 5.0+, Safari 1.3 i 2.0+, Netscape 7+, Opera 8.5+, Mozilla Firefox (plus znači ova verzija i novije). Ako govorimo o drugim verzijama, ovo će biti spomenuto odvojeno."Što je to? Kako radi i koje su prednosti?"

Da biste razumjeli prednosti AJAX-a, morate znati kako web aplikacije trenutno rade. I rade na tehnologiji klijent-poslužitelj (slika 1).

Korisnik otvara stranicu u pregledniku stranica. Stranica ima hiperlinkove koji vode na druge stranice. Kada kliknete na bilo koji od njih, preglednik šalje zahtjev URL na poslužitelj na koji je ova poveznica povezana. Ako u prirodi ne postoji poslužitelj povezan s ovom vezom (na primjer, prilikom upisivanja URL-a u adresnu traku, pogrešno ste napisali naziv resursa) ili postoje problemi s povezivanjem na Internet, tada će preglednik generirati stranicu sličnu na ovaj prikazan na slici (ovako izgleda u Operi):

Ako poslužitelj postoji, ali u zahtjevu nema navedenog dokumenta, poslužitelj će sam kreirati HTML stranicu s opisom greške. Na primjer, to bi mogla biti dobro poznata pogreška 404 (dokument nije pronađen). Ili, ako je sve ispravno, poslužitelj će kao odgovor vratiti novu stranicu. U svakom slučaju, nova će se stranica učitati u preglednik. nova_stranica,čak i ako se usporedi sa starim, na njemu je promijenjeno samo par riječi. Prilično značajan nedostatak ove tehnologije. Osim toga, rad se odvija u sinkronom načinu rada. Odnosno, nakon što je preglednik poslao zahtjev poslužitelju, očekuje odgovor od njega i ništa se neće učiniti dok se odgovor ne primi. Ponekad odgovor i učitavanje nove stranice mogu trajati predugo. Toliko dugo da korisnik možda neće pričekati da se stranica učita i jednostavno je zatvoriti. Stoga web programeri pribjegavaju nekim trikovima.

SVOJSTVA:

samo za čitanje onreadystatechange funkcija

Određuje funkciju povratnog poziva koja će biti pozvana svaki put kad dođe do promjene. readyState vlasništvo. Unatoč činjenici da je funkcija pozvana, parametri joj se ne mogu proslijediti. Ali više o tome kasnije u primjeru.

readonly readyState cijeli broj

Status zahtjeva. Može uzeti vrijednosti:

• 0 - ne neinicijalizirano(neinicijalizirano), metoda otvoren() još nije pozvan;
• još nije pozvan;
• 2 - nabijen(učitano), metoda poslati() je pozvan i zaglavlja/status odgovora (svojstvo status) primljeno;
• 3 - interaktivni(interaktivno), primaju se podaci koji su dostupni putem nekretnine responseText;
• 4 - dovršeno(završeno), kao odgovor na zahtjev, ne samo da su primljena sva zaglavlja i status, već su primljeni i svi podaci s poslužitelja, odgovor je završen.

tekst odgovora samo za čitanje niz

Odgovor poslužitelja u običnom tekstu. Samo čitanje.

odgovor samo za čitanjeXML objekt

Odgovor poslužitelja kao objekt DOM dokumenta. Koristi se ako je odgovor poslužitelja važeći XML dokument. Ako dokument nije valjan, podaci nisu primljeni ili još nisu poslani, tada je svojstvo NULL. Samo čitanje.

status samo za čitanje niz

Status odgovora. Na primjer: 200 (OK), 404 (dokument nije pronađen), 503 (privremeno preopterećenje poslužitelja). METODE:

poništiti abortus()

Prekinite HTTP zahtjev ili primite podatke. Briše sva svojstva objekta koja su postavljena na početne vrijednosti. Metoda je korisna u kombinaciji s mjeračem vremena, kada nakon što je prošlo određeno vrijeme od zahtjeva (odlazak u vremenskom ograničenju), nije primljen odgovor od poslužitelja.

niz getAllResponseHeaders()

Vraća sva zaglavlja odgovora poslužitelja kao formatirani niz. Svaki novi naslov počinje u novom retku.

niz getResponseHeader( niz Zaglavlje)

Vrati zaglavlje pod nazivom zaglavlje.

poništiti otvoren( niz metoda, niz uri, [ Booleov asinkrono])

Priprema zahtjev za uri koristeći metodu metode (POST ili GET) specificirajući asinkroni način rada, asinkroni način ili ne. Kao rezultat pozivanja imovine readyState postati jednak 1.

poništiti poslati( niz podaci)

Pokreće zahtjev prema poslužitelju. Zahtjev šalje podatkovne podatke.

poništiti setHeader( niz Zaglavlje, niz vrijednost)

Postavlja zaglavlje pod nazivom zaglavlje na vrijednost vrijednosti. Prije korištenja ove metode, ne zaboravite nazvati otvoren()! "Kako to možete koristiti na svojoj stranici?"

Sada kada imamo ne samo potrebna teorijska znanja, već i ideju o tome na što se AJAX praktično oslanja, možemo početi pisati našu aplikaciju. Zatim ću dati jedan primjer od trenutka kada je problem formuliran do njegove pune implementacije, u obliku aplikacije, objašnjavajući usput neke od suptilnosti.

Dakle, imamo zadatak: moramo implementirati bazu podataka (DB) upravljačkih programa za različite uređaje. Istovremeno, baza podataka je toliko velika da je nema smisla slati klijentskoj aplikaciji i vršiti odabir iz nje koristeći JavaScript. Zbog promjene jedne vrijednosti na stranici, također je nepoželjno preopteretiti je. Osobno koristim PHP za poslužiteljske skripte za implementaciju ovog zadatka, a koristim XML datoteku za implementacije baze podataka.

Odabrao sam sljedeću strukturu baze podataka:

DB popis datoteka podaci.xml: ATI 9600 128 DDR (128 bita) ATI 9600 256 DDR (128 bita) ATI 9600XT 256 DDR (128 bita) ATI X800GTO 256 DDR (256 bita) ATI X1300 512 DDR (128 bita) ATI X1300 256 DDR (128 bita) NVidia 6600 128DDR (128 bita) NVidia 7800GS 256 DDR (256 bita) ATI X1300Pro 256 DDR (128 bita) ATI X1600Pro 256 DDR (128 bita) ATI X1800GTO 256 DDR (256 bita) ATI X1600Pro 256 DDR (128 bita) ATI X1900XT 512 DDR (256 bita) ) NVidia 6600 prigušivač 128 DDR ( 128bit) NVidia 6600GT 128 DDR (128bit) ATI X1900XT 512 DDR (256bit) ATI X1900XTX 512 DDR (256bit) ATI X800 SilentPipe 128 DDR (256bit) Nvidia 6600GT 128 DDR (128bit) NVidia 660 0 GT pasivni hladnjak 128 DDR (128bit) PCI-E ATI X550 128 DDR (128bit) PCI-E ATI X800GT Uniwise 256 DDR (256 bit) ATI X800GTO 256 DDR (128bit) Audigy 2 6.1 Audigy 2 ZS 7.1 X-Fi Platinum Audiophile 192 Revolution 5.1 Audiophile Audiophile Fast Track PIXMA iP 90 P IXMA iP4200 PIXMA iP6600D Picture Mate 100 Stylus Color C48 Stylus Color C87U DeskJet 1280 DeskJet 5443 Photo Smart 385 Laser Shot LBP2900 Laser Shot LBP3300 ML 1615 ML 2015 LaserJet 1018 LaserJet 2420 LaserJet 2420DN 4200 F LiDE500F LiDE60 Savršenstvo 1270 Savršenstvo 3590 Savršenstvo 4990 Medvjeđa šapa 2400CU Savršenstvo 4990

Kako osoba pretražuje ovu bazu podataka? Najvjerojatnije bi išao od korijenskog elementa kroz stablo dokumenta dok ne bi pronašao vezu u traženoj grani ili se uvjerio da upravljački program za ovaj uređaj nije u bazi podataka. Također ćemo učiniti isto, koristeći XPath jezične izraze da pronađemo željeni čvor ili skup čvorova.

Popis obrazaca za slanje podataka indeks.htm:

video kartica zvučna kartica printer skener

Obrazac ima dvije varijable: staza I zastava. Prvi pohranjuje traženi put koji se šalje poslužitelju. Budući da već postoji jedan element u obrascu, ova varijabla već ima početnu vrijednost. Druga se varijabla koristi za označavanje skripti poslužitelja da određeni element treba izdvojiti iz dokumenta. uređaj. Osim toga, promijenit će se format podataka vraćenih s poslužitelja.

Sada pogledajmo JS motor. Sve funkcije klijentske strane skupljene su u skriptu ajax.js: y = novi Objekt(); function httpRequest() ( if (window.XMLHttpRequest) ( //stvori objekt za sve preglednike osim IE requestObj = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( //za IE requestObj = new ActiveXObject("Msxml2. XMLHTTP "); if (!requestObj) ( requestObj = new ActiveXObject("Microsoft.XMLHTTP"); ); ); ); funkcija sendRequest (url,data) ( httpRequest(); //definirajte funkciju povratnog poziva requestObj.onreadystatechange = responseServer; //pripremite se za slanje podataka, readyState=1 requestObj.open("POST",url,true); / * T Budući da se podaci šalju metodom POST, poslužitelj mora poslati zaglavlje koje ga obavještava o tome */ requestObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF- 8"); // slanje podataka poslužitelju requestObj.send(data); ); funkcija responseServer() ( if (requestObj.readyState == 4) ( var status = requestObj.status; if (status == 200) ( addSelect(y); ) else if (status == 400) ( alert("Loš zahtjev "); ) else if (status == 500) ( alert("Interna greška poslužitelja"); ) else if (status == 503) ( var time = requestObj.getResponseHeader("Retry-After")*1000; alert ( "Poslužitelj je preopterećen. Zahtjev će se ponoviti za: "+vrijeme+" sekundi"); setTimeout(sendRequest(url,path),vrijeme); ) else ( alert("Odgovor poslužitelja o pogrešci"); ); ); ) ; funkcija sendData(obj) ( var Elpath = document.form.path; var url = "index.php"; if (document.form.flag.value == "0") ( var path = Elpath.value + "/" + obj.value; ) else ( var path = Elpath.value + "/Device["" + obj.value + ""]"; /* koristeći GET metodu šaljemo informacije poslužiteljskoj skripti da određeni element uređaja potreban je */ url = "index.php?flag=1"; ); //postavite varijablu obrasca staze na vrijednost trenutnog zahtjeva Elpath.value = staza; //kodirajte proslijeđeni niz staze staza = "staza= "+encodeURIComponent(path); y = obj; sendRequest (url,path); ); funkcija addSelect(obj) ( //odgovor poslužitelja u običnom tekstu var docTEXT = requestObj.responseText; obj.setAttribute("disabled",true); //stvori div element var div = document.createElement("div"); / / dodaj odgovor poslužitelja u div div.innerHTML = docTEXT;//dodaj odgovor poslužitelja div u stablo dokumenata document.form.appendChild(div); ); funkcija reset() (document.form.path.value="//Devices"; document.form.flag.value="0"; var NodeListDiv = document.form.getElementsByTagName("div"); var length = NodeListDiv.length; if (length > 1) { while (NodeListDiv != undefined) { document.form.removeChild(NodeListDiv); }; }; document.form.Devices.removeAttribute("disabled"); };!}

Kao što sam rekao, u funkciji vlasništva onreadystatechange parametri se ne mogu proslijediti. Točnije, ne možete proslijediti parametre koji su objekti. Stoga na samom početku kreiramo varijablu u koju ćemo pohraniti referencu na objekt koji je pozvao funkciju. Budući da je ova varijabla u opsegu globalne varijable, može joj se pristupiti iz bilo kojeg dijela programa. Ovo je daleko najpametniji način za prosljeđivanje parametara povratnog poziva funkciji svojstva. onreadystatechange objekt.

A sada ćemo korak po korak analizirati rad motora.

Kada se događaj dogodi onblur(element Izaberi izgubljen fokus) funkcija se zove pošaljiPodatke(), koji priprema POST podatke za slanje zahtjeva. Osim toga, generira XPath izraz ovisno o vrijednosti varijable. zastava=0(Na primjer, //Uređaji/Video kartice) ili zastava=1(Na primjer, //Uređaji/VideoKartice/AGP/Sapphire/Uređaj["ATI 9600XT 256 DDR (128bit)"]).

Zatim pozivamo funkciju Pošalji zahtjev(), u koji prosljeđujemo URL poslužiteljske skripte, kao i varijablu tipa string, koja sadrži gotove POST podatke. I prvo stvaramo XMLHttpZahtjev objekt čija je referenca pohranjena u varijabli zahtjevObj. Funkcija httpZahtjev() je cross-browser i radit će u svim preglednicima.

Jednom poziv funkcije httpZahtjev() Učinio sam odmah pri učitavanju stranice a nije stvorio XMLHttpZahtjev objekt. Ali kako se pokazalo, ovo radi za sve preglednike osim za IE, koji svaki put zahtijeva stvaranje novog objekta. Stoga se ova funkcija poziva svaki put prije slanja podataka.

Nakon slanja podataka preglednik čeka odgovor poslužitelja. Svaki put kada se imanje promijeni readyState funkcija će biti pozvana responseServer(). Ako je status odgovora došao s kodom "200" (sve je u redu), tada će se funkcija pozvati addSelect(), koji će primljene podatke dodati u DOM trenutnog dokumenta. Svi će preglednici čekati odgovor poslužitelja. Međutim, nakon nekog vremena (time-out), oni će prisilno dodijeliti XMLHttpRequest.readyState = 4 i prestati čekati odgovor od poslužitelja. Na primjer, za Operu vrijednost vremenskog ograničenja je 10 sekundi. Koristeći druge statuse, možete dodati rukovatelj greškama mehanizmu u odgovorima poslužitelja.

Funkcija addSelect() dodaje još jedan čvor u DOM trenutnog dokumenta div, u koji smješta odgovor poslužitelja. Netko bi se mogao zapitati zašto se nekretnina koristi responseText, ali ne odgovorXML? Netko će sigurno htjeti koristiti ovo svojstvo za uvoz odgovora poslužitelja (a skripta poslužitelja šalje XML dokument kao odgovor) izravno u DOM dokumenta. Imao sam istu želju. Htio sam uvesti korijenski element poslane XML datoteke i sve njezine potomke pomoću metode importNode. Ali preglednik je uvezao element bez djece, iako je drugi parametar ove metode bio postavljen na pravi: importNode(Object importedNode,true). Stoga neprecizna primjena ove metode zasad onemogućuje njezinu primjenu.

Ekvivalentno rješenje pronađeno je pomoću unutarnjiHTML metoda elementa.

Ovo dovršava posao klijentske strane. Preostala nepregledana značajka reset() dizajniran je za vraćanje DOM-a dokumenta u izvorni oblik. Istu stvar možete postići osvježavanjem stranice tipkom F5, ali AJAX motor je samo napisan kako bi se izbjeglo ponovno učitavanje stranice. Stoga svi elementi koje je skripta dodala u dokument također moraju biti uklonjeni skriptom iz njega.

Kao odgovor na zahtjev, poslužiteljska skripta generira XML podatke u obliku: ChildrenElementName_1 .... childrenElementName_1

Ako je traženi čvor imenovan uređaj, vraća se normalno formatirani tekst. Poslužiteljska skripta je napisana u PHP V5 i neće raditi na ranijim verzijama ovog interpretera, jer je DOM ekstenzija uvedena u ovaj jezik tek od pete verzije, a zamijenila je DOM XML ekstenziju, čije sučelje nije bilo u skladu sa specifikacijom. Sada pogledajmo kod skripte poslužitelja.

Popis datoteka indeks.php :load("podaci.xml"); //stvori XPath objekt $DOMXPath = new DOMXPath($doc); $DOMNodeList = $DOMXPath -> upit($_POST); //prema zahtjevu izdvajamo željeni element $DOMNode = $DOMNodeList -> item(0); //stvori objekt XML dokumenta $replyXML = new DOMDocument("1.0", "windows-1251"); /* ako zastavica nije jednaka jedinici, tada trenutni element nije element uređaja i potrebno je pronaći sve elemente potomke trenutnog elementa DOMNode */ if ($_GET != 1) ( //dobiti popis svi potomci elementa $childNodes = $DOMNode -> childNodes; /* Budući da djeca mogu biti ne samo elementi, već i čvorovi, stvaramo indeksni niz koji sadrži samo elemente dijete */ foreach ($childNodes kao $Node) ( ako ($Node->nodeType == 1) ( $ arrayNodes = $Node; ); ); //stvori korijenski element XML dokumenta $root = $replyXML->createElement("select"); $optgroup = $replyXML ->createElement("optgroup"); /* ako su elementi podređeni nisu uređaj, tada postavljamo atribute za korijenski element i njegov podređeni element optgroup */ if ($arrayNodes -> nodeName != "Uređaj") ( $ root->setAttribute("name",$DOMNode->nodeName); $AttributeNode = $arrayNodes->getAttributeNode("title"); $optgroup->setAttribute("label",$AttributeNode->value); $root- >setAttribute("onblur","sendData(this)"); ) else ( /* inače stvorite atribut s JS kodom koji će postaviti varijablu u obrascu zastavice na "1" */ $root->setAttribute("onblur", "document.form.flag.value=1;sendData (ovo );"); ); /* petlja koja stvara nove elemente opcija za svaki podređeni element; koliko djece, koliko elemenata */ foreach ($arrayNodes as $Node) ( $option = $replyXML->createElement("option"); $setNode = $Node->nodeName; if ($Node->nodeName == " Uređaj") ( $setNode = $Node->nodeValue; ); $option-> nodeValue = $setNode; $option->setAttribute("value",$setNode); $optgroup->appendChild($option); ) ; //umetnite rezultirajuće elemente u XML dokument $replyXML->appendChild($root); $root->appendChild($optgroup); /* ako je zastavica=1, tada je trenutni element element uređaja; elementi potomci nisu potrebni, ali su potrebni atributi trenutnog elementa */ ) else ( //stvori korijenski element $root = $replyXML->createElement("pre"); $DOMText = new DOMText(" OS URL") ; $root - > appendChild($DOMText); $NamedNodeMapAttr = $DOMNode->attributes; $i = 0; /* Petlja koja pronalazi sve atribute elementa Device i za svaki atribut stvara podatkovni niz koji sadrži referentni sadržaj * / dok (($NodeAttr = $NamedNodeMapAttr ->item($i)) ! = null) ( if ($NodeAttr->name != "id") ( $DOMText = new DOMText(" $NodeAttr->name "); $DOMElement = $replyXML->createElement("a"); $DOMElement - > setAttribute("href",$NodeAttr->value); $DOMElement -> nodeValue = $NodeAttr->value; $root -> appendChild($DOMText); $root -> appendChild($DOMElement); ); $i++ ; $NodeAttr = $NamedNodeMapAttr->item($i); ); $replyXML->appendChild($root); ); //pošalji odgovor klijentu echo $replyXML->saveHTML(); ?>