AJAX: šta je to, uticaj na SEO, prednosti i mane tehnologije. Koristeći Ajax

AJAX je akronim koji označava asinhroni Javascript i XML. Zapravo, AJAX nije nova tehnologija, pošto i Javascript i XML postoje već neko vrijeme, a AJAX je sinteza ovih tehnologija. AJAX se najčešće povezuje sa pojmom Web 2.0 i reklamira se kao najnovija Web aplikacija.

Sa AJAX-om, nema potrebe za osvježavanjem cijele stranice svaki put, jer se ažurira samo određeni dio stranice. 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 biti siguran da je korisnik svjestan onoga što se dešava na stranici. Ovo se može uraditi pomoću indikatora učitavanja, tekstualnih poruka koje ukazuju da se podaci razmjenjuju sa serverom. Takođe treba imati na umu da svi pretraživači ne podržavaju AJAX (starije verzije pretraživača i tekstualnih pretraživača). Plus Javascript korisnik može onemogućiti. Stoga ne biste trebali zloupotrebljavati korištenje tehnologije i pribjegavati alternativnim metodama predstavljanja informacija na web stranici.

Da sumiramo prednosti AJAX-a:

• Mogućnost kreiranja prikladnog web sučelja
• Aktivna interakcija korisnika
• Pogodnost upotrebe

AJAX koristi dvije metode rada sa web stranicom: mijenjanje web stranice bez ponovnog učitavanja i dinamički pristup serveru. Drugi se može uraditi na nekoliko načina, posebno XMLHttpRequest, o čemu ćemo govoriti, i korištenje tehnike skrivenog okvira.

Razmjena podataka

Za razmjenu podataka na stranici mora biti kreiran XMLHttpRequest objekat, koji je svojevrsni posrednik između pretraživača korisnika i servera (slika 1). Koristeći XMLHttpRequest, možete poslati zahtjev serveru, kao i dobiti odgovor u obliku različitih vrsta podataka.

Postoje dva načina za razmjenu podataka sa serverom. Prvi način je GET zahtjev. U ovom zahtjevu pristupate dokumentu na serveru prosljeđivanjem argumenata preko samog URL-a. U ovom slučaju, na strani klijenta će biti logično koristiti Javascript escape funkciju kako neki podaci ne bi prekinuli zahtjev.

Klijentski dio, napisan u Javascriptu, mora obezbijediti potrebnu funkcionalnost za sigurnu komunikaciju sa serverom i obezbijediti metode za razmjenu podataka na bilo koji od gore navedenih načina. Serverska strana mora obraditi ulazne podatke i na osnovu njih generisati nove informacije (na primjer, rad sa bazom podataka) i vratiti ih klijentu. Na primjer, da biste zatražili informacije od servera, možete koristiti običan GET zahtjev sa prijenosom nekoliko i malih parametara, a za ažuriranje informacija, ili dodavanje novih informacija, morat ćete koristiti POST zahtjev, jer on omogućava da prenosite velike količine podataka.

Kao što je već rečeno, AJAX koristi asinhroni prijenos podataka. To znači da dok je prijenos podataka u toku, korisnik može obavljati druge radnje koje su mu potrebne. U ovom trenutku trebate obavijestiti korisnika da je u toku neka vrsta razmjene podataka, inače će korisnik pomisliti da se nešto dogodilo i može napustiti stranicu ili ponovo pozvati funkciju koja je po njegovom mišljenju "zamrznuta". Indikacija tokom razmene podataka u Web 2.0 aplikaciji igra veoma važnu ulogu: posetioci se možda još nisu navikli na ovaj način osvežavanja stranice.

Odgovor servera može biti ne samo XML, kao što naziv tehnologije sugerira. Pored XML-a, možete dobiti odgovor u običnom tekstu ili JSON-u (Javascript Object Notation). Ako je odgovor primljen u običnom tekstu, onda se može odmah prikazati u kontejneru na stranici. Kada se primi XML odgovor, rezultirajući XML dokument se obično obrađuje na strani klijenta i podaci se konvertuju u (X) HTML. Kada primi JSON odgovor, klijent samo treba da izvrši primljeni kod (funkcija Javascript eval) da bi dobio kompletan Javascript objekat. Ali ovdje morate biti oprezni i uzeti u obzir činjenicu da se korištenjem ove tehnologije može prenijeti zlonamjerni kod, pa ga prije izvršavanja koda primljenog sa servera treba pažljivo provjeriti i obraditi. Postoji praksa kao što je "lažni" zahtjev, u kojem se ne prima odgovor od servera, samo se mijenjaju podaci na strani servera.

Ovaj objekat ima različita svojstva u različitim pretraživačima, ali općenito je isti.

Metode objekata XMLHttpRequest

Imajte na umu da su imena metoda napisana u istom Camel stilu kao i druge Javascript funkcije. Budite oprezni kada ih koristite.

prekinuti ()- otkazivanje trenutnog zahtjeva serveru.

getAllResponseHeaders ()- dobiti sva zaglavlja odgovora sa servera.

getResponseHeader ("header_name")- dobiti navedeni naslov.

open ("request_type", "url", "asynchronous", "username", "password")- inicijalizacija zahtjeva prema serveru, indikacija metode zahtjeva. Vrsta zahtjeva i URL su obavezni parametri. Treći argument je logička vrijednost. Obično je uvijek navedeno kao istinito ili uopće nije navedeno (podrazumevano je tačno). Četvrti i peti argument se koriste za autentifikaciju (veoma je nesigurno pohranjivati ​​podatke o autentifikaciji u skriptu, jer svaki korisnik može vidjeti skriptu).

pošalji ("sadržaj")- poslati HTTP zahtjev serveru i dobiti odgovor.

setRequestHeader ("header_name", "value")- postavite vrijednosti zaglavlja zahtjeva.

Svojstva objekta XMLHttpRequest

onreadystatechange je jedno od najvažnijih svojstava XMLHttpRequest objekta. Uz pomoć ovog svojstva postavlja se rukovalac koji se poziva svaki put kada se status objekta promijeni.

readyState- broj koji označava status objekta.

responseText- prezentacija odgovora servera u obliku običnog teksta (string).

responseXML- DOM-kompatibilan dokument objekta primljen od servera.

status- stanje odgovora sa servera.

statusText- tekstualni prikaz stanja odgovora sa servera.

Trebali biste pobliže pogledati 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 može komunicirati s korisnikom.
• 4 - Objekt je potpuno inicijaliziran; dobio odgovor od servera.

Na osnovu stanja spremnosti objekta posjetitelju možete dati informaciju o fazi u kojoj se nalazi proces razmjene podataka sa serverom i, eventualno, o tome ga obavijestiti vizualno.

Kreiranje XMLHttpRequest objekta

Kao što je gore spomenuto, kreiranje ovog objekta za svaki tip pretraživača je jedinstven proces.

Na primjer, za kreiranje objekta u Gecko kompatibilnim pretraživačima, Konqueror i Safari, koristili biste sljedeći izraz:

Var Zahtjev = novi XMLHttpRequest ();

A za Internet Explorer se koristi sljedeće:

Var Request = novi ActiveXObject ("Microsoft.XMLHTTP");

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

Sada, da biste postigli kompatibilnost među pretraživačima, morate dodati sve funkcije u jednu:

Funkcija CreateRequest () (var Request = false; if (window.XMLHttpRequest) (// Gecko kompatibilni pretraživači, Safari, Konqueror Request = novi XMLHttpRequest ();) else if (window.ActiveXObject) (// Internet explorer pokušajte (Request = novi ActiveXObject ("Microsoft.XMLHTTP");) catch (CatchException) (Zahtev = novi ActiveXObject ("Msxml2.XMLHTTP");)) if (! Zahtev) (upozorenje ("Nije moguće kreirati XMLHttpRequest");) return Zahtev; )

Nakon svega ovoga, možete kreirati ovaj objekat i ne brinite o performansama na popularnim pretraživačima. Ali možete kreirati objekt na različitim mjestima. Ako ga kreirate globalno, tada će u određenom trenutku biti moguć samo jedan zahtjev prema serveru. Moguće je kreirati objekat kad god postoji zahtjev prema serveru (ovo će skoro u potpunosti riješiti problem).

Zahtjev servera

Algoritam za traženje servera izgleda ovako:

• Provjera postojanja XMLHttpRequest-a.
• Inicijalizacija veze sa serverom.
• Slanje zahtjeva serveru.
• Obrada primljenih podataka.

Da bismo kreirali zahtjev za server, napravit ćemo malu funkciju koja će funkcionalno kombinirati funkcije za GET i POST zahtjeve.

/ * Funkcija za slanje zahtjeva u datoteku na serveru r_method - tip zahtjeva: GET ili POST r_path - putanja do datoteke r_args - argumenti oblika a = 1 & b = 2 & c = 3 ... r_handler - funkcija koja rukuje odgovorom servera * / funkcija SendRequest (r_method, r_path, r_args, r_handler) (// Kreirajte zahtjev var Request = CreateRequest (); // Provjerite postojanje zahtjeva ponovo ako (! Request) (return; ) // Dodijeli prilagođeni rukovalac Request.onreadystatechange = function () (// Ako je razmjena podataka završena if (Request.readyState == 4) (// Prenesi kontrolu na rukovatelja korisnika r_handler (Zahtjev);)) // Provjeri ako je GET zahtjev potreban if (r_method.toLowerCase () == "get" && r_args.length> 0) r_path + = "?" + r_args; // Inicijaliziranje veze Request.open (r_method, r_path, true); if (r_method.toLowerCase () == "post") (// Ako je ovo POST- zahtjev // Postavite Request.setRequestHeader ("Content-Type", "application / x-www-form-urlencoded; charset = utf -8"); // Slanje m zahtjev Request.send (r_args); ) else (// Ako je ovo GET zahtjev // Pošalji null zahtjev Request.send (null);))

Postalo je mnogo lakše kreirati zahtjev. Na primjer, napišimo funkciju koja će primiti sadržaj datoteke na serveru i poslati ga u kontejner.

Funkcija ReadFile (ime datoteke, kontejner) (// Kreirajte funkciju rukovatelja var Handler = function (Request) (document.getElementById (container) .innerHTML = Request.responseText;) // Pošaljite zahtjev SendRequest ("GET", naziv datoteke, " ", Handler);)

Ovako se odvija interakcija sa serverom.

Obrada odgovora

U prethodnom primjeru napravili smo funkciju zahtjeva servera. Ali to je, u stvari, nesigurno, jer ne obrađujemo stanje objekta i stanje odgovora sa servera.

Ažurirajmo naš kod tako da može prikazati vizualno obavještenje o procesu učitavanja.

Request.onreadystatechange = funkcija () (// Ako je razmjena podataka završena if (Request.readyState == 4) (// Prenesi kontrolu na rukovaoca korisnika r_handler (Zahtjev);) else (// Obavijesti korisnika o učitavanju)) ...

Kao što već znate, objekat XMLHttpRequest vam omogućava da saznate status odgovora sa servera. Iskoristimo ovu priliku.

Request.onreadystatechange = funkcija () (// Ako je razmjena podataka završena if (Request.readyState == 4) (if (Request.status == 200) (// Prenesi kontrolu na rukovaoca korisnika r_handler (Request);) else (// Obavijesti korisnika o grešci)) else (// Obavijesti korisnika o preuzimanju)) ...

Opcije odgovora servera

Sa servera se može primiti nekoliko vrsta podataka:

• Običan tekst

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

Json je notacija Javascript objekata. Može se koristiti za predstavljanje objekta kao string (ovdje je analogija s funkcijom serijalizacije). Kada primite JSON podatke, morate ih izvršiti da biste dobili punopravni Javascript objekat i izvršili potrebne operacije na njemu. Imajte na umu da takav prijenos i izvršenje podataka nije siguran. Morate pratiti šta dolazi za izvršenje.

Uzorak JSON koda:
("podaci": ("razno": [("name": "JSON stavka jedan", "tip": "Podnaslov 1"), ("naziv": "JSON stavka dva", "tip": " Podnaslov 2 ")]))

Po prijemu takvog koda, vršimo sljedeću radnju:

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

Nakon izvršenja ovog koda, objekat će vam biti dostupan responsedata.

Rad sa programskim jezicima na strani servera

Ovakav posao se ne razlikuje od uobičajenog. Za primjere, uzeću PHP kao jezik na strani servera. Ništa se nije promijenilo na strani klijenta, ali strana servera je sada predstavljena PHP datotekom.

Po tradiciji, počnimo tako što ćemo pozdraviti naš divni svijet:

Eho "Zdravo, svet!";

Kada se pristupi ovoj datoteci, klijent će vratiti string Hello, World. Kao što možete zamisliti, ovo predstavlja najšire mogućnosti za izgradnju aplikacija. Prenošenjem argumenata prilikom pozivanja servera koristeći XMLHttpRequest, možete parametrizovati izlaz, pružajući tako bogatu funkcionalnost za vašu Web aplikaciju.

Osim PHP-a, možete koristiti bilo koji drugi programski jezik na strani servera.

AJAX - Šta je to?

Kada postojećih mogućnosti postane malo, a postojeću se nema gdje poboljšati, tada dolazi do tehnološkog iskora. Takav proboj je AJAX (Asynchronous JavaScript and XML) - pristup izgradnji korisničkih interfejsa za web aplikacije u kojima web stranica, bez ponovnog učitavanja, učitava podatke koji su potrebni korisniku. AJAX je jedna od komponenti DHTML koncepta.

Šta nam ova tehnologija daje? Trenutno, razvoj WEB aplikacija teži razlikovanju između klijentske i serverske strane, i to je razlog za široku upotrebu šablona kao što su Smarty i XSLT. Sada projekti postaju složeniji, a preplitanje različitih tehnologija postaje preskupo za vrijeme programera. Tako se, na primjer, svi stilovi oblikovanja izvode u CSS ili XSL datotekama, HTML ili XML podaci se pohranjuju u drugim odjeljcima, rukovaoci servera u trećem, baze podataka u četvrtom. I ako se prije 5-6 godina gotovo svuda moglo vidjeti preplitanje svega ovoga u jednom fajlu, sada to postaje sve više rijetkost.

Prilikom razvoja složenijih projekata, postoji potreba za strukturiranošću i čitljivošću koda. Ne biste trebali zasipati programerski kod kodom dizajnera rasporeda, a kod dizajnera izgleda sa izmjenama dizajnera i tako dalje.

Postoji potreba da se rad razlikuje. Tako će, na primjer, dizajner raditi svoj posao, layout dizajner svoj, programer svoj, i niko se neće miješati jedni u druge. Kao rezultat toga, svaki učesnik projekta moraće da zna samo podatke sa kojima će morati da radi. U ovom slučaju se značajno povećava produktivnost grupe i kvaliteta projekta. Trenutno se ovaj problem uspješno rješava korištenjem šablona, ​​ali i to stvara određene poteškoće, jer je za, recimo, povezivanje Smartyja potrebno povezati softverski modul za obradu šablona i jasno ga povezati sa strukturom projekta. A to je daleko od uvijek moguće i zahtijeva određene troškove. Malo je lakše kada koristite XML + XSL pakete jer oni pružaju više opcija, ali ovo je alternativa, ništa više. Ali šta ako pogledate nešto radikalno novo, što bi vam omogućilo da sve bolje kombinujete, koristeći mogućnosti onoga što jeste? Pokušajte zamisliti JavaScript, koji ima sve mogućnosti PHP-a ili Perl-a, uključujući grafiku i baze podataka, koji je mnogo proširiviji i upotrebljiviji, a također je i cross-platformski.

Dakle, šta je zapravo AJAX? O Ajaxu se prvi put govorilo nakon članka Jesseja Jamesa Garretta iz februara 2005. "Novi pristup web aplikacijama". Ajax nije tehnologija za sebe. Ovo je ideja zasnovana na dva glavna principa.

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

Korištenje XMLHttpRequest za pristup serveru u hodu.

Korištenje ova dva pristupa omogućava vam da kreirate mnogo pogodnije WEB-korisničke interfejse na onim stranicama sajtova gde je potrebna aktivna interakcija korisnika. Upotreba Ajaxa je postala popularnija nakon što je Google počeo da ga aktivno koristi u kreiranju svojih stranica, kao što su Gmail, Google mape i Google sugeriraju. Kreiranje ovih sajtova je potvrdilo efikasnost ovog pristupa.

Dakle, detaljnije: ako uzmete klasični model WEB aplikacije:

Klijent, upisivanjem adrese resursa koji ga zanima u traku za pretragu, dolazi do servera i postavlja mu zahtjev. Server vrši proračune u skladu sa zahtjevom, pristupa bazi podataka i tako dalje, nakon čega primljeni podaci odlaze do klijenta i po potrebi se zamjenjuju u šablone i obrađuju pretraživač. Rezultat je stranica koju vidimo, a koju 80% stanovništva zemlje na WEB-u naziva internetom. Ovo je klasičan model koji se uspio dokazati i zaslužiti počasno mjesto na suncu. Ovo je najjednostavniji model interakcije i, kao posljedica toga, najrašireniji. Međutim, to sve više postaje nedovoljno. Zamislite on-line igru ​​"Sea Battle", koju igraju dva prekaljena prijatelja - stanovnik Južne Afrike i stanovnik Japana. Kako možete učiniti njihovu igru ​​što ugodnijom koristeći takav model? U svakom slučaju, podaci o potopljenim brodovima biće pohranjeni na serveru, a kako bi se provjerilo da li se protivniku ne sviđa, bit će potrebno svaki put osvježiti stranicu i ažurirati zastarjele podatke. "Ali ljudi su izmislili keširanje" - kažete, i bićete potpuno u pravu, ali to ne olakšava. Keširanje će samo ubrzati vrijeme interakcije sa serverom, ali neće eliminirati potrebu za ponovnim učitavanjem stranice. Alternativno, možete postaviti određeno vrijeme samoosvježavanja, ali u tom slučaju stranica će se u potpunosti ponovo učitati.

Pogledajmo sada AJAX model interakcije:

Redoslijed radnji klijenta je očuvan i on, najvjerovatnije, neće razumjeti šta će se dogoditi, a riječ AJAX će biti povezana samo s imenom fudbalskog kluba. Ali stvari izgledaju drugačije na strani servera.

Prilikom kontaktiranja servera generira se stranica koja će se prikazati korisniku i ponuditi mu da izvrši redoslijed radnji koje ga zanimaju. Uz svjesni (iako nije neophodan) izbor klijenta, njegov zahtjev će se odnositi na AJAX modul, koji će vršiti sve proračune od interesa za njega i raditi sa serverom kao takvim. Ali šta je inovacija? Glavna razlika je u tome što nam ova metoda omogućava dinamički pristup serveru i obavljanje radnji koje nas zanimaju. Na primjer, trebamo pristupiti bazi podataka i dobiti podatke koji nas zanimaju, a koje ćemo onda koristiti. Podatke ćemo pohraniti u XML datoteku koja će se generirati dinamički, na sljedeći način:

Kreirajte novi JavaScript objekat:

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

Zatim pišemo funkciju koristeći ovaj objekt

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

U tijelu HTML datoteke napišite skriptu koja će:

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

U datoteci localhost / xml / checkUserName.php obrađujemo podatke primljene iz komandne linije u ovom slučaju u varijablu q. Rezultat spremamo u XML strukturu, koju pohranjujemo u istu datoteku. Tako možemo primati i obraditi podatke primljene iz baze podataka ili bilo šta drugo što nam je potrebno. Osim toga, server će obraditi samo podatke koje trebamo ažurirati, a ne cijelu stranicu ako se ponovo učita.

A sada da se vratimo na naša dva prijatelja - ljubitelja pomorskih borbi: s obzirom na pojavu ove inovacije, možemo učiniti sljedeće: staviti provjeru svake tri sekunde XML datoteke, ova provjera podrazumijeva provjeru baze podataka za novi zapis, da je, potez protivnika. Ako je potez napravljen, stranica potapa brodove bez ponovnog utovara, čime se kvari raspoloženje učesnika vodenih bitaka. Ova funkcionalnost se postiže jednostavnom upotrebom Javascript-a i stilova. Ovaj primjer je prilično ilustrativan, ali daleko od potpune primjene ove tehnologije je mnogo značajnija.

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

Prvo, podatke možemo prenijeti samo koristeći GET metodu; stoga će velike količine podataka morati ostati na miru. Ovaj problem je već više puta pokrenut u raznim izvorima, ali gospodo, postoje kolačići koji su sasvim prihvatljivi u slučajevima prijenosa velikih podataka, koji mogu prihvatiti GET zahtjev, a Javascript zauzvrat ima funkcije za rad s njima.

Drugi problem je kompatibilnost među pretraživačima. XMLHttpRequest objekat još nije dio nijednog standarda (iako je nešto slično već predloženo u W3C DOM Level 3 specifikaciji Load and Save). Stoga, postoje dvije različite metode za pozivanje ovog objekta u kodu skripte. U Internet Exploreru, ActiveX objekat se poziva na sljedeći način:

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

U Mozili i Safariju, ovo je lakše (pošto je to objekat ugrađen u JavaScript):

Var req = novi XMLHttpRequest ();

Svi moderni pretraživači podržavaju ovaj objekat i samo 1,8% korisnika (prema statistici iz SpyLog-a) koji koriste veoma stare verzije pretraživača koji ne podržavaju ovaj objekat imaće problema.

I konačno, sigurnost. Hajde da se zadržimo na ovome detaljnije. Glavni problem je što se svi podaci i izvorni kod JavaScript funkcija mogu vidjeti pregledom izvornog koda stranice, shodno tome, napadač može pratiti logiku izvršenja zahtjeva i, pod određenim skupom okolnosti, izvršiti skup komande koje su mu potrebne. To ne igra posebnu ulogu kada imamo jednostavno poređenje podataka, već šta učiniti u složenijim situacijama, na primjer, prilikom autorizacije i kako, u ovom slučaju, proći lozinke. Kao što je već spomenuto, kolačići dolaze u pomoć. Uz njihovu pomoć se mogu slati potrebni podaci, kao i obraditi. Uzmimo primjer u kojem će korisnik biti autentificiran korištenjem tehnologije o kojoj je članak riječ.

Generirajući stranicu, formiramo jedinstvene vrijednosti, koje zatim stavljamo u varijable servera. A u kolačićima pretraživača, nakon autorizacije, dobijamo korisničko ime i njegovu lozinku, koje trebamo prenijeti u modul za obradu na serveru.

Nakon što korisnik unese podatke i pritisne dugme Pošalji, njegova lozinka se unosi u kolačiće, a korisničko ime se prenosi otvoreno - linkom npr. http://www.mubestajax.com/ajax.php?login=pupkin pri prijemu podataka server prije svega provjerava primljene podatke. S obzirom da se vrijednosti koje smo generirali od početka rada servera i potom ih prenijeli na globalne serverske varijable i kolačiće moraju poklapati, onda prilikom provjere integriteta prenesenih podataka, ako postoji neusklađenost, program prestaje s radom. Ako je sve prošlo dobro, tada se izvlače svi potrebni podaci i izvode se potrebni proračuni i rad. Ovaj način zaštite je prilično jednostavan i efikasan. Ali za velike projekte to neće raditi.

Kada je sigurnost na prvom mjestu, bolje je koristiti sofisticiranija i pouzdanija rješenja. Ali u većini slučajeva ove mjere opreza će biti više nego dovoljne, jer korištenje složenijih modula podrazumijeva korištenje tehnologija koje nisu uvijek uključene u standardni softver modernih servera, čija je glavna karakteristika jednostavnost. Zbog toga su tehnologije kao što su MySQL i PHP postale veoma raširene oni pružaju jednostavnost rada sa svojom malom potrošnjom resursa i dovoljnom pouzdanošću. A u okviru ovog softvera, rješenje koje je gore predloženo najbolje odgovara.

U zaključku, želio bih reći da je AJAX, s jedne strane, veliki skok u WEB inženjeringu, ali s druge strane, davno prevaziđena faza evolucije koja je otvorila nove horizonte u oblasti razvoja softvera. . Istovremeno, ova tehnologija je još uvijek prilično "vlažna", jer je njena upotreba u ovom trenutku prilično prijatan izuzetak. Ali siguran sam da će za nju svi čuti više puta.

Većina modernih web stranica koristi tehnologiju zvanu AJAX za brzu i efikasnu interakciju s posjetiteljem. AJAX je postao vrlo popularna tehnika za dohvaćanje podataka sa servera u pozadini i dinamičko osvježavanje stranice.

Razvoj JavaScript koda za implementaciju AJAX-a od nule je veoma naporan i zamoran proces. Međutim, mnoge JavaScript biblioteke, uključujući jQuery, imaju odlične implementacije AJAX visokog nivoa kao skup metoda i funkcija koje čine izradu web stranica lakšom i bržom.

U ovoj seriji tutorijala proći ćemo preko osnova izgradnje AJAX zahtjeva pomoću jQueryja. Obrađivaće se sljedeće teme:

• Šta je AJAX tehnologija? Kako to radi? Koje su njegove prednosti?
• Kako mogu napraviti različite vrste AJAX zahtjeva koristeći jQuery?
• Slanje podataka na server pomoću AJAX zahtjeva.
• Obrada i izdvajanje podataka iz AJAX odgovora sa servera.
• Kako da prilagodim jQuery AJAX rukovanje i promijenim zadane postavke?

Napomena: Tutorijali se fokusiraju na JavaScript dio na strani klijenta. Ali razvoj na strani servera je takođe prilično jednostavan. Za više informacija, trebali biste proučiti materijale o programskim jezicima na strani servera kao što je PHP.

Šta je AJAX i koliko je koristan?

AJAX je tehnika razvoja web aplikacija u kojoj JavaScript kod koji se izvodi u pretraživaču posjetitelja asinhrono komunicira s web serverom, odnosno u pozadini. Razlike od konvencionalnih web aplikacija su sljedeće:

• Redovna web stranica sadrži linkove ili obrasce koji, kada se kliknu ili predaju, generiraju zahtjev za novi URL na web serveru. Server šalje potpuno novu HTML stranicu, koju pretraživač zatim prikazuje, zamjenjujući originalnu stranicu. Ovaj pristup oduzima mnogo vremena i loše utiče na posjetitelja, jer moraju čekati da se nova stranica učita.
• Kada koristite AJAX tehnologiju, JavaScript kod postavlja zahtjev za URL na serveru. Kod također može slati podatke zajedno sa zahtjevom. JavaScript kod zatim obrađuje odgovor servera i djeluje u skladu s tim. Na primjer, mogu se izvršiti kalkulacije sa vraćenim podacima, dodati ili ažurirati widget na stranici, može se poslati poruka posjetitelju o ažuriranju baze podataka na serveru.

Budući da AJAX zahtjev radi u pozadini, JavaScript (i posjetitelj) mogu nastaviti interakciju sa stranicom dok se zahtjev obrađuje. Proces je skriven od posjetitelja koji ne mora napustiti stranicu koju gleda u određenom trenutku. Ovaj pristup čini AJAX stranice veoma ugodnim za rad.

Srce AJAX-a je JavaScript XMLHttpRequest objekat. Pruža brojne metode kao što su open (), send () i onreadystatechange () koje se mogu koristiti prilikom slanja AJAX zahtjeva serveru i obrade odgovora u pozadini.

Razvoj JavaScript AJAX koda za više pretraživača može biti naporan proces. Na sreću, jQuery vam daje neke jednostavne AJAX metode koje apstrahuju mnoge operacije niskog nivoa.

Za one znatiželjnije, riječ AJAX je skraćenica za prva slova izraza na engleskom " A sinhroni J avaScript A nd X ML "(Asinhroni JavaScript i XML.) Međutim, termin može biti pogrešan - zahtjev ne mora biti asinhroni i nije potrebno koristiti XML za slanje podataka.

Izrada GET zahtjeva sa $.get ()

Metoda jQuery $ .get () pruža jednostavan i zgodan način da napravite jednostavan AJAX zahtjev. Zahtjev pravi koristeći HTTP GET metodu (koristi se za dobivanje URL-ova kao što su stranice i slike) umjesto POST metode (koja se tradicionalno koristi za slanje podataka obrasca).

U svom najjednostavnijem obliku, možete pozvati metodu poput ove:

Gdje je url URL resursa s kojeg se očekuje odgovor. Ovo je obično skripta na strani servera koja izvodi neku radnju i može vratiti neke podatke:

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

Iako je moguće zatražiti i statički dokument:

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

Kada tražite URL, možete poslati podatke uz zahtjev. Možete proslijediti podatke u nizu upita, baš kao i normalan GET zahtjev:

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

Bilo bi ispravno učiniti isto tako što ćete proslijediti objekt podataka kao drugi parametar metodi $ .get (). Objekt podataka mora sadržavati informacije u obliku parova ime svojstva / vrijednost svojstva. Na primjer:

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

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

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

Podatke primamo sa servera

Do sada smo gledali primjere korištenja $.get() samo za slanje zahtjeva serveru, zanemarujući svaki odgovor koji bi skripta na strani servera mogla generirati. Ali u većini slučajeva, vaš JavaScript kod će očekivati ​​odgovor od skripte na strani servera i obraditi primljene podatke.

AJAX zahtjev je asinhroni, što znači da se izvršava u pozadini dok ostatak JavaScripta nastavlja da radi. Kako onda dobiti odgovor od servera kada se zahtjev završi?

Moraš pisati funkcija povratka koji će se automatski izvršiti kada se AJAX zahtjev završi i server pošalje odgovor. U najmanju ruku, vaša funkcija treba prihvatiti podatke koje vraća server kao svoj prvi argument:

Funkcija myCallback (returnedData) (// Obradite returnedData)

Jednom kada je funkcija povratnog poziva kreirana, možete je proslijediti kao treći argument metodi $ .get ():

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

Određivanje tipa podataka odgovora

Obično serverska strana 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 u skladu s tim analizirati podatke. Ali bolje je eksplicitno definirati format.

Da biste naveli format, prosledite četvrti argument metodi $ .get (). Ovaj argument može biti niz sa sljedeće liste:

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

Na primjer, ako znate da serverska skripta vraća podatke u JSON formatu, pozovite metodu $ .get () na sljedeći način:

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

Primjer korištenja metode $ .get ().

Evo primjera kreiranja AJAX zahtjeva pomoću metode $.get () i jednostavnog rukovanja odgovorom. Da bi primjer funkcionirao, trebate kreirati jednostavnu tekstualnu datoteku na serveru pod nazivom getForecast.txt koja sadrži sljedeći tekst:

("grad": "Vasyuki", "datum": "18. mart 2012", "prognoza": "Prohladno hladno i bljuzgavica", "maxTemp": +1)

Ova datoteka će simulirati JSON odgovor koji je mogao biti generiran skriptom vremenske prognoze na serveru.

Zatim kreiramo stranicu showForecast.html u istom folderu kao getForecast.txt:

Dobijte vremensku prognozu

Otvorite showForecast.html u pretraživaču i kliknite na dugme Dobij vremensku prognozu. U prozoru za poruke primat ćemo vremensku prognozu sa našeg servera.

Ovako radi dati kod:

1. showForecast.html sadrži element dugmeta Get Weather Forecast sa ID-om getForecast.
2. JavaScript na vrhu stranice se izvršava čim se stranica učita i DOM je spreman.
3. JavaScript kod prvo povezuje rukovalac događaja klika za dugme #getForecast. Ovaj obrađivač pravi AJAX GET zahtjev za getForecast.txt, prenoseći ime grada i datum za prognozu. Također definira funkciju vraćanja uspjeha () koja će biti izvršena kada se zahtjev završi. Format podataka koje vraća server je definisan kao JSON.
4. Datoteka getForecast.txt vraća podatke prognoze u JSON formatu u pretraživač.
5. Poziva se funkcija uspjeha (). jQuery analizira JSON podatke primljene od getForecast.txt, pretvara ih u JavaScript objekat i prosljeđuje ih funkciji.
6. 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 u nekoliko redova pokazuje kako AJAX zahtjev funkcionira koristeći metodu $.get ().

Prije pet godina, bili ste ružno pače (niko nije razgovarao) ako niste znali XML. Prije osamnaest mjeseci, Ruby je bila u centru pažnje, a programeri koji nisu znali šta se s njom dešava nisu bili pozvani u rezervoar za hladnu vodu. Danas, ako želite doći na tehničku zabavu, potreban vam je Ajax.

Međutim, Ajax jeste daleko ne samo hir, već moćan pristup izradi web stranica koji nije tako teško naučiti kao potpuno novi jezik.

Prije nego što zaronim u detalje Ajaxa, odvojimo nekoliko minuta da shvatimo šta radi Ajax. Kada ovih dana pišete aplikaciju, imate dvije glavne opcije:

• Desktop aplikacije
• Web aplikacije

Obje opcije su poznate; desktop aplikacije se obično nalaze na CD-u (ili se ponekad preuzimaju sa web stranice) i u potpunosti se instaliraju na vašem računaru. Oni mogu koristiti internet za preuzimanje ažuriranja, ali kod koji pokreće ove aplikacije nalazi se na vašoj radnoj površini. Web aplikacije (što nije iznenađujuće) rade negdje na web serveru, a tim aplikacijama pristupate preko svog web pretraživača.

Što je još važnije, mjesto na kojem se izvršava kod za ove aplikacije određuje kako se ponašaju i kako ćete s njima komunicirati. Desktop aplikacije su obično prilično brze (pokreću na vašem računaru; ne očekujete internet vezu), imaju sjajna korisnička sučelja (obično su u interakciji s vašim operativnim sistemom) i nevjerovatno su dinamične. Možete kliknuti, unijeti tekst, koristiti padajuće i iskačuće menije, kretati se kroz prozore gotovo bez odlaganja.

S druge strane, web aplikacije su obično najnovije i pružaju mogućnosti koje nikada ne biste imali na svom računaru (mislite na Amazon.com i eBay). Međutim, sa snagom Weba dolazi i čekanje — čekanje odgovora od servera, čekanje da se ekran osveži, čekanje odgovora na zahtev i generisanje nove stranice.

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

Pa šta čekamo? Počnimo gledajući Ajax i kako možete pretvoriti svoje nezgrapne web sučelje u Ajax aplikacije koje odgovaraju.

Stara tehnologija, novi trikovi

Što se Ajaxa tiče, realnost je da on obuhvata mnoge tehnologije - da biste ga savladali, potrebno je dublje proći u nekoliko različitih tehnologija (zbog čega ću prvih nekoliko članaka ove serije podijeliti na nezavisne dijelove). Dobra vest je da možda već znate dovoljno o mnogim od ovih tehnologija - većinu ovih pojedinačnih tehnologija je lako naučiti (definitivno nije tako teško kao kompletan programski jezik kao što su Java ili Ruby).

Definicija Ajaxa

Inače, Ajax je skraćenica za Asinhroni JavaScript i XML (i DHTML, itd.). Frazu je skovao Jesse James Garrett iz Adaptive Path (vidi odjeljak) i, prema Jesseju, ne trebalo je da bude akronim.

Glavne tehnologije uključene u Ajax aplikacije su:

• HTML se koristi za kreiranje web obrazaca i specificiranje polja za upotrebu u vašoj aplikaciji.
• JavaScript kod je glavni kod koji izvršava Ajax aplikacije i pruža interakciju sa serverskim aplikacijama.
• DHTML, ili dinamički HTML, pomaže vam da dinamički ažurirate obrasce. Koristit ćete div, span i druge dinamičke HTML elemente da označite svoj HTML.
• DOM, model objekta dokumenta, će se koristiti (putem JavaScripta) za manipulaciju i strukturom vašeg HTML-a i (u nekim slučajevima) XML-om primljenim od servera.

Pogledajmo sve ovo posebno i shvatimo šta svaka od ovih tehnologija radi. Svaki od njih ću istražiti u sljedećim člancima; sada samo pobliže pogledajte ove komponente i tehnologije. Što više znate o njima, lakše je preći sa nasumičnih znanja na savladavanje svakog od njih (i zaista poboljšati proces razvoja web aplikacija).

XMLHttpRequest Objekat

Prvi objekat o kome želite da znate je verovatno najnoviji za vas; zove se XMLHttpRequest. To je JavaScript objekat i lako ga je kreirati kao što je prikazano.

Listing 1. Kreiranje novog objekta XMLHttpRequest

Ići ću detaljnije o ovom objektu u sljedećem članku, ali za sada shvatite da je to objekt koji kontrolira svu vašu interakciju sa serverom. Prije nego što krenete dalje, zastanite i razmislite o tome - to je tehnologija JavaScript u objektu XMLHttpRequest koji razgovara sa serverom. Ovo nije normalan tok aplikacije, i tu leži skoro sva magija Ajaxa.

U normalnim web aplikacijama, korisnici popunjavaju polja obrasca i kliknu na dugme Submit(potvrdi). Cijeli obrazac se zatim šalje serveru, server 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 novom formom s nekim popunjenim podacima, ili stranica za potvrdu, ili možda stranica s nekim izborima u zavisnosti od podataka unesenih u originalni obrazac. Naravno, dok se skripta ili program na serveru ne obradi i vrati novi obrazac, korisnici moraju čekati. Njihovi ekrani će biti obrisani i ponovo iscrtani kako novi podaci stignu sa servera. Ovdje dolazi do niske interaktivnosti – korisnici ne dobijaju trenutne povratne informacije i definitivno se ne osjećaju kao sa desktop aplikacijama.

Ajax u suštini postavlja JavaScript tehnologiju i XMLHttpRequest objekat između vaš web obrazac i server. Kada korisnici popune formulare, podaci se šalju u neku vrstu JavaScript koda, a ne direktno na server. Umjesto toga, JavaScript kod prikuplja podatke obrasca i šalje zahtjev serveru. Dok se to dešava, obrazac na ekranu korisnika ne treperi, ne trepće, nestaje ili se blokira. Drugim riječima, JavaScript kod prosljeđuje zahtjev u pozadini; korisnik ni ne primjećuje da postoji zahtjev prema serveru. Štaviše, zahtjev se šalje asinhrono, što znači da vaš JavaScript kod (i korisnik) ne čeka odgovor servera. Odnosno, korisnici mogu nastaviti da unose podatke, skroluju kroz stranicu i koriste aplikaciju.

Server zatim prosljeđuje podatke nazad vašem JavaScript kodu (još uvijek u vašem web obrascu), koji odlučuje šta će učiniti s podacima. Može ažurirati polja obrasca u hodu, čineći vašu aplikaciju trenutnom — korisnici dobijaju nove podatke bez podnošenja ili ažuriranja svojih obrazaca. JavaScript kod može čak primiti podatke, izvršiti neke kalkulacije i proslijediti drugi zahtjev, sve bez intervencije korisnika! Ovo je moć XMLHttpRequest-a. Sa serverom može komunicirati po želji, a korisnik ni ne zna šta se zapravo dešava. Kao rezultat, dobijamo dinamičnost, osjetljivost, visoku interaktivnost desktop aplikacije uz sve mogućnosti interneta.

Dodavanje JavaScript koda

Jednom kada shvatite XMLHttpRequest, preostali JavaScript postaje naporan. Zapravo, koristit ćete JavaScript za mali broj osnovnih zadataka:

Da biste izvršili prva dva zadatka, trebali biste biti dobro upoznati s metodom getElementById () koja je navedena u.

Listing 2. Prikupljanje i postavljanje vrijednosti polja pomoću JavaScript koda

// Dobivamo vrijednost polja "telefon" i upisujemo je u varijablu telefona var phone = document.getElementById ("telefon").Vrijednost; // Postavite vrijednosti na obrascu pomoću niza odgovora document.getElementById ("red"). Vrijednost = odgovor; document.getElementById ("adresa").vrijednost = odgovor;

Ovdje nema ništa posebno, što je odlično! Trebali biste početi shvaćati da u svemu ovome nema ništa pretjerano komplikovano. Jednom kada se naviknete na XMLHttpRequest, ostatak vaše Ajax aplikacije će biti jednostavan JavaScript poput onog u, pomiješan sa malo pametnijim HTML-om. Plus, s vremena na vrijeme postoji malo DOM posla... Pa hajde da pogledamo ovo.

Završetak sa DOM-om

Posljednji, ali ne i najmanje važan je DOM, model objekta dokumenta. Za neke od vas, glasine o DOM-u mogu biti pomalo zastrašujuće – HTML dizajneri ga ne koriste često, pa čak i malo neuobičajeno za JavaScript kodere (osim ako se zaista ne bavite programskim zadacima visokog nivoa). Možete pronaći široku upotrebu DOM-a u teškim programima napisanim na Javi i C / C ++; u stvari, ovo je DOM-u steklo reputaciju teškog i teškog za učenje.

Na sreću, korištenje DOM-a u JavaScript tehnologiji je jednostavno i uglavnom intuitivno. Sada bih vam vjerovatno trebao reći kako da koristite DOM, ili barem da vam dam nekoliko primjera koda, ali čak i to bi vas odvelo na krivi put. Poenta je da možete dosta ući u Ajax bez potrebe da mešate DOM ovde, a to je upravo način na koji želim da vam pokažem. Vratit ću se na DOM u sljedećem članku, ali za sada samo znajte da je tu negdje. Kako počnete da prenosite XML naprijed-nazad između vašeg JavaScript koda i stvarnih promjena HTML obrasca, dublje ćete zaroniti u DOM. U međuvremenu, možete efikasno raditi sa Ajaxom bez DOM-a, tako da ostavimo to za sada po strani.

Dobivanje objekta Request

Naoružani ovim pregledom, spremni ste da pogledate izbliza. Pošto je XMLHttpRequest centralni deo Ajax aplikacija (i verovatno nov za mnoge od vas), počeću s njim. Kao što ste vidjeli, kreiranje ovog objekta i njegovo korištenje bi trebali biti laki, zar ne? Sačekaj minutu.

Sjećate se onih užasnih ratova pretraživača prije nekoliko godina i kako ništa nije funkcionisalo isto u svim pretraživačima? Vjerovali ili ne, ti ratovi traju i dan-danas, iako u mnogo manjim razmjerima. I iznenađenje: XMLHttpRequest je jedna od žrtava ovih ratova. Stoga morate poduzeti nekoliko različitih koraka da bi XMLHttpRequest funkcionirao. Pokazat ću vam kako to učiniti korak po korak.

Rad sa Microsoft pretraživačima

Microsoft Internet Explorer koristi MSXML parser za obradu XML-a (pogledajte odjeljak za veze do više informacija o MSXML-u). Stoga, kada pišete Ajax aplikacije koje treba da se pokreću u Internet Exploreru, morate kreirati objekat na poseban način.

Međutim, to nije tako lako. Postoje zapravo dvije različite verzije MSXML-a u upotrebi. MSXML verzija zavisi od verzije JavaScript tehnologije instalirane u Internet Explorer-u, tako da morate napisati kod koji radi za obje verzije. Pogledajte koji sadrži kod za kreiranje XMLHttpRequest u Microsoft pretraživačima.

Listing 3. Kreiranje XMLHttpRequest objekta u Microsoft pretraživačima

var xmlHttp = false; try (xmlHttp = novi ActiveXObject ("Msxml2.XMLHTTP");) catch (e) (pokušaj (xmlHttp = novi ActiveXObject ("Microsoft.XMLHTTP");) catch (e2) (xmlHttp = false;))

Sve ovo možda još nema smisla, ali u redu je. Proći ćete dublje u JavaScript programiranje, rukovanje greškama, uslovnu kompilaciju i još mnogo toga prije kraja ovog članka. U međuvremenu, trebali biste napisati dvije glavne linije u svojoj glavi:

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

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

Ukratko, ovaj kod pokušava da kreira objekat koristeći jednu verziju MSXML-a; ako to ne uspije, kreira se objekt za drugu verziju. Graciozno, ha? Ako ništa drugo ne uspije, varijabla xmlHttp je postavljena na false da ukaže vašem kodu da nešto nije u redu. U ovom slučaju, možda radite sa pretraživačem koji nije Microsoft i morate koristiti drugačiji kod da biste obavili posao.

Rad sa Mozilla i ne-Microsoft pretraživačima

Ako Internet Explorer nije vaš pretraživač ili pišete kod za pretraživače koji nisu Microsoftovi, potreban vam je drugačiji kod. Zapravo, ovo je jednostavan red koji ste vidjeli u:

var xmlHttp = novi XMLHttpRequest objekat; ...

Ova mnogo jednostavnija linija kreira XMLHttpRequest objekat u Mozili, Firefoxu, Safariju, Operi i u velikoj mjeri u svakom pretraživaču koji nije Microsoftov koji podržava Ajax u bilo kojem obliku ili obliku.

Udruženje

Želimo da podržimo sve pretraživači. Ko želi da napiše aplikaciju koja radi samo u Internet Explorer-u ili aplikaciju koja radi samo u svim drugim pretraživačima? Još gore, da li želite da napišete svoju prijavu dvaput? Naravno da ne! Dakle, hajde da kombinujemo podršku za Internet Explorer i ostale pretraživače. Evo koda za ovo.

Listing 4. Kreiranje XMLHttpRequest objekta za sve pretraživače

/ * Kreirajte novi XMLHttpRequest objekat za komunikaciju sa Web serverom * / 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! = "nedefinisano") (xmlHttp = novi XMLHttpRequest ();)

Za sada zanemarite komentare i nejasne oznake poput @cc_on; ovo su posebne komande JavaScript kompajlera koje ćemo detaljno razmotriti u mom sledećem članku, koji će se u potpunosti fokusirati na XMLHttpRequest. Jezgro ovog koda može se podijeliti u tri koraka:

1. Kreirajte varijablu xmlHttp za referencu na objekt XMLHttpRequest koji ćete kreirati.
2. U bloku pokušaja kreirajte objekat u Microsoft pretraživačima:
   • U bloku try kreirajte objekt koristeći Msxml2.XMLHTTP objekt.
   • Ako to ne uspije, u bloku try kreirajte objekt koristeći Microsoft.XMLHTTP objekt.
3. Ako xmlHttp još uvijek nije instaliran, kreirajte objekt za ostale pretraživače.

Na kraju ovog procesa, xmlHttp mora referencirati važeći XMLHttpRequest objekat, bez obzira na pretraživač koji korisnik koristi.

Nekoliko riječi o zaštiti

Šta je sa zaštitom? Moderni pretraživači nude korisnicima mogućnost poboljšanja sigurnosti, onemogućavanja JavaScript tehnologije i onemogućavanja mnogih postavki u svojim pretraživačima. U ovim situacijama vaš kod vjerovatno neće raditi ni pod kojim okolnostima. Za takve situacije morate elegantno rješavati probleme - postoji barem jedan članak o tome, a ja ću ga napisati kasnije (ovo će vjerovatno biti duga serija, ali ne brinite - savladaćete ga prije kraja ovog serija članaka). U međuvremenu, pišete robustan, ali ne savršen kod koji je odličan za učenje Ajaxa. Kasnije ćete se vratiti na kvalitetniji kod.

Zahtjev/odgovor u Ajax svijetu

Dakle, već ste upoznati sa Ajax-om i imate osnovno razumijevanje objekta XMLHttpRequest i kako ga kreirati. Ako pažljivo čitate, čak ćete shvatiti da JavaScript tehnologija komunicira sa bilo kojom web aplikacijom na serveru, a ne vaš HTML obrazac, koji ste direktno poslali.

Šta smo propustili? Kako zapravo koristiti XMLHttpRequest. Pošto je ovo kritičan kod, koristit ćete neke forme u svaki vašu Ajax aplikaciju, pogledajmo na brzinu kako izgleda osnovni model zahtjeva/odgovora u Ajaxu.

Izvršavanje zahtjeva

Imate svoj odličan novi XMLHttpRequest objekat; hajde da ga pokrenemo. Prvo, potrebna nam je JavaScript metoda koju vaša web stranica može pozvati (na primjer, kada korisnik unese tekst ili odabere opciju iz menija). Zatim, morate slijediti isti osnovni obrazac u gotovo svim vašim Ajax aplikacijama:

1. Uzmite neke podatke iz web obrasca.
2. Kreirajte URL za povezivanje.
3. Otvorite vezu sa serverom.
4. Postavite funkciju za server koja će se izvršiti nakon njegovog odgovora.
5. Pošaljite zahtjev.

Listing 6. Obrada odgovora sa servera

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

Opet, kod nije težak niti složen. Čeka da ga server pozove sa željenim stanjem spremnosti, a zatim koristi vrijednost koju server vraća (u ovom slučaju poštanski broj za grad i državu koje je unio korisnik) za postavljanje drugog polja obrasca. Kao rezultat toga, polje zipCode se neočekivano pojavljuje sa poštanskim brojem, ali korisnik nikada nije kliknuo na dugme! Ovo je ponašanje desktop aplikacije o kojoj sam ranije govorio. Efikasnost, osjećaj dinamike itd., i sve to uz malo Ajax koda.

Pažljivi čitaoci će verovatno primetiti da je polje zipCode obično tekstualno polje. Nakon što server vrati poštanski broj i postavi ovo polje metodom updatePage () na poštanski broj grada/države, korisnici svibanj nadjačati ovu vrijednost. Ovo je namjerno iz dva razloga: da ovaj primjer bude jednostavan i da vam pokaže da ponekad želite da korisnici mogu nadjačati vrijednosti koje vraća server. Zapamtite obe tačke; oni su važni u dobrom dizajnu korisničkog interfejsa.

Presretanje u web obrascima

Šta nam preostaje? U stvari, ne mnogo. Imate JavaScript metodu koja prikuplja informacije koje je korisnik uneo u obrazac, prosleđuje ih serveru, obezbeđuje drugu JavaScript metodu za rukovanje odgovorom, pa čak i postavlja vrednost polja kada taj odgovor stigne. Sve što zaista ostaje je prizvati ovu prvu metodu i pokrenite cijeli proces. Očigledno biste mogli dodati dugme u svoj HTML obrazac, ali to je dobra stara 2001, zar ne? Iskoristimo prednosti JavaScript tehnologije, kao što je prikazano u.

Listing 7. Pokretanje Ajax procesa

Grad: onChange = "callServer ();" />

država: onChange = "callServer ();" />

Poštanski broj:

Ako ovo izgleda kao još jedan dio rutine, u određenoj mjeri, kod - u pravu ste, tako je! Kada korisnik unese novu vrijednost za bilo koje od polja grada ili države, pokreće se metoda callServer () i Ajax funkcija počinje. Mislite li da počinjete shvaćati suštinu stvari? Fino!

Konačno

U ovom trenutku, možda niste spremni da napišete svoju prvu Ajax aplikaciju, barem ne dok ne istražite ovaj odjeljak. Međutim, već možete početi shvaćati osnovnu ideju o tome kako takve aplikacije rade i što je objekt XMLHttpRequest. U nadolazećim člancima naučit ćete o ovom objektu, kako kontrolirati interakcije JavaScript-u-serveru i kako raditi sa HTML formama, pa čak i razumjeti DOM.

U međuvremenu, odvojite malo vremena da razmislite o tome koliko moćne Ajax aplikacije mogu biti. Zamislite web obrazac koji ne odgovara samo kada kliknete na dugme, već i kada unesete podatke u polje, kada izaberete opciju sa liste opcija, pa čak i kada pomerate kursor po ekranu. Razmislite šta ta riječ zapravo znači asinhroni... Razmislite o izvršavanju JavaScript koda i ne očekujući sve dok server ne vrati odgovore na svoje zahtjeve. S kojim problemima se možete suočiti? Na koje stvari treba biti oprezan? I kako će se dizajn vaših obrazaca promijeniti s ovim novim pristupom programiranju?

Ako potrošite neko vrijeme na ove točke, to će vam dati veću vrijednost od samo dobivanja nekog koda koji možete kopirati i zalijepiti u svoju aplikaciju bez stvarnog razumijevanja. U sljedećem članku ćete ove ideje provesti u praksi; Navest ću detalje o kodu koji vam je potreban da bi slične aplikacije funkcionirale. Do tada uživajte u moći Ajaxa.

Resursi

Naučiti

• Originalni članak.
• Adaptive Path je jedna od vodećih kompanija u oblasti dizajna korisničkog interfejsa. Možete dobiti gomilu informacija o Ajaxu ako pažljivo pogledate njihove stranice. (developerWorks, oktobar 2005.) pokazuje pet načina za serijalizaciju podataka u Ajax aplikacijama. (O "Reilly Media, Inc., februar 2006.) uzima uvide istaknute u ovom članku i kroz čitav niz i donosi ih (i više) u inovativnom i vrhunskom Head-Up formatu.
• JavaScript: Potpuni vodič 4. izdanje (O "Reilly Media, Inc., novembar 2001.) je odličan izvor za JavaScript i dinamičke web stranice.

Diskusija

• Ajax.NET Professional je odličan blog za sve što je vezano za Ajax.
• Uključite se u developerWorks zajednicu tako što ćete učestvovati u.

Naš život je nestalan. Sve se na ovom svijetu razvija i mijenja. Uključujući virtuelnu stvarnost. A jedna od riječi s kojom se ove promjene povezuju je AJAX. Ne samo web programeri, već i obični korisnici su već čuli za AJAX. Šta se zapravo krije iza ovog magičnog akronima? Kako da ovo koristim na svojoj web stranici? Pokušat ću odgovoriti na ova pitanja u ovom članku.

Prvi put sam čuo za AJAX ovog proleća. Odmah sam se zainteresovao za ovu tehnologiju i, kako bi to trebalo biti u takvim slučajevima, krenuo sam u potragu za člancima koji bi mogli odgovoriti na moja pitanja: "Šta je ovo? Kako funkcionira? I koje su prednosti? Šta treba biti dodatno instaliran na serveru/klijentu za rad sa AJAX-om? Kako ga možete koristiti na svom sajtu? ". Nakon što sam pročitao desetak članaka, dobio sam odgovor samo na prva dva pitanja, a na ostala nikada nisam našao. I tek nakon što sam pročitao nekoliko publikacija na engleskom, konačno sam shvatio šta je šta. To me je potaklo da napišem ovaj materijal.

Prije svega, članak je namijenjen obučenim ljudima koji pišu programe za Internet i upoznati su s pojmovima kao što su "objekat", "metod", "svojstva". Međutim, može biti djelimično korisno onima koje ovo pitanje jednostavno zanima. Lista referenci sadrži potrebnu listu referenci, pomoću koje je sasvim moguće savladati tehnologiju "od nule".

U toku prezentacije, pod pojmom „pretraživač“ podrazumevaće se pretraživači: Internet Explorer 5.0+, Safari 1.3 i 2.0+, Netscape 7+, Opera 8.5+, Mozilla Firefox (plus znači ova verzija i novija). Ako govorimo o drugim verzijama, ovo će biti posebno spomenuto "Šta je to? Kako radi i koje su prednosti?"

Da biste razumjeli prednosti AJAX-a, morate znati kako web aplikacije trenutno rade. I rade koristeći klijent-server tehnologiju (slika 1).

Korisnik otvara stranicu u pretraživaču stranica... Stranica sadrži hiperveze koje vode na druge stranice. Kada kliknete na bilo koju od njih, pretraživač šalje zahtjev Url na server s kojim je ova veza povezana. Ako u prirodi ne postoji server povezan s ovom vezom (na primjer, kada ste upisali URL u adresnu traku, pogriješili ste prilikom pisanja naziva resursa), ili postoje problemi s vezom na Internet, tada će pretraživač generirajte stranicu sličnu onoj prikazanoj na slici (ovako to izgleda u Operi):

Ako server postoji, ali dokument naveden u zahtjevu ne postoji na njemu, server će sam kreirati HTML stranicu s opisom greške. Na primjer, to može biti dobro poznata greška 404 (dokument nije pronađen). Ili, ako je sve ispravno, server će vratiti novu stranicu kao odgovor. U svakom slučaju, nova stranica će biti učitana u pretraživač. nova_stranica,čak i ako se samo nekoliko riječi promijenilo od stare. Prilično značajan nedostatak ove tehnologije. Osim toga, rad se obavlja u sinkronom režimu. Odnosno, nakon što pretraživač pošalje zahtjev serveru, očekuje odgovor od njega, a sve dok odgovor ne dobije ništa neće biti urađeno. A ponekad odgovor i učitavanje nove stranice može potrajati predugo. Toliko dugo da korisnik ne može čekati da se stranica učita i jednostavno je zatvori. Stoga web programeri pribjegavaju nekim trikovima.

NEKRETNINE:

samo za čitanje onreadystatechange funkcija

Određuje funkciju povratnog poziva koja će se pozivati ​​svaki put kada se promijeni readyState imovine. Unatoč činjenici da je funkcija pozvana, parametri joj se ne mogu proslijediti. Ali više o tome kasnije u primjeru.

samo za čitanje readyState cijeli broj

Status zahtjeva. Može uzeti vrijednosti:

• 0 - ne neinicijaliziran(neinicijalizirana) metoda otvori () još nije pozvan;
• još nije pozvan;
• 2 - napunjeno(učitana) metoda pošalji () je pozvan i zaglavlja odgovora / status (svojstvo status) primljeno;
• 3 - interaktivno(interaktivno), primaju se podaci koji su dostupni putem nekretnine responseText;
• 4 - završeno(završeno), kao odgovor na zahtjev ne primaju se samo sva zaglavlja i status, već se primaju svi podaci sa servera, odgovor je potpun.

samo za čitanje responseText string

Odgovor servera u običnom tekstu. Samo čitanje.

samo za čitanje responseXML objekt

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

samo za čitanje status string

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

METODE:

void prekinuti ()

Prekida HTTP zahtjev ili prijem podataka. Briše sva svojstva objekta koji su inicijalizirani. Metoda je korisna u kombinaciji sa tajmerom, kada nakon određenog vremena od trenutka zahtjeva (van vremena) nije primljen odgovor od servera.

string getAllResponseHeaders ()

Vraća sva zaglavlja odgovora servera kao formatirani niz. Svaki novi naslov počinje u novom redu.

string getResponseHeader(string zaglavlje)

Vrati zaglavlje pod nazivom zaglavlje.

void otvoren(string metoda, string uri, [ boolean asynch])

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

void poslati(string podaci)

Inicira zahtjev serveru. Podaci se prosljeđuju u podacima zahtjeva.

void setHeader(string zaglavlje, string vrijednost)

Dodjeljuje zaglavlje pod nazivom zaglavlje, vrijednost. Ne zaboravite nazvati otvori ()!

"Kako ovo možete koristiti na svojoj web lokaciji?"

Sada kada imamo ne samo potrebno teorijsko znanje, već i ideju na čemu se AJAX praktično zasniva, možemo preći na pisanje naše aplikacije. Dalje, dajem jedan primjer od trenutka kada je zadatak formuliran do njegove pune implementacije, u obliku aplikacije, objašnjavajući neke od suptilnosti na tom putu.

Dakle, imamo zadatak: trebamo implementirati bazu podataka (DB) drajvera za različite uređaje. Istovremeno, baza podataka je toliko velika da nema smisla slati je klijentskoj aplikaciji i vršiti izbor iz nje koristeći JavaScript. Zbog promjene jedne vrijednosti na stranici, također je nepoželjno preopteretiti. Lično, koristim PHP za skripte na strani servera da izvršim ovaj zadatak, i koristim XML fajl za implementaciju baze podataka.

Ja biram sljedeću strukturu baze podataka:

Listing DB fajla data.xml: ATI 9600 128 DDR (128bit) ATI 9600 256 DDR (128bit) ATI 9600XT 256 DDR (128bit) ATI X800GTO 256 DDR (256bit) ATI X1300 512 DDR (128bit) ATI 9600XT 256 DDR (128bit) ATI X800GTO 256 DDR (256 bit) ATI X1300 512 DDRATI128bit (DDRATI128bit) (DDRATI128bit) ) ) NVidia 7800GS 256 DDR (256bit) ATI X1300Pro 256 DDR (128bit) ATI X1600Pro 256 DDR (128bit) ATI X1800GTO 256 DDR (256bit) ATI X1600Pro 256 DDR (128bit) ATI X1600Pro 256 DDR (128bit) ATI X1800GTO 256 DDR (256bit) ATI X1600Pro 256 DDR (128bit) (128bit) NVidia 6600GT 128 DDR (128-bitni) ATI X1900XT 512 DDR (256bit) ATI X1900XTX 512 DDR (256bit) ATI X800 SilentPipe 128 DDR (256bit) Nvidia 6600GT 128 DDR (128-bitni) NVidia 6600GT PassiveHeatsink 128 DDR (128-bitni) 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 Mate 5.1 Audiophile 5.1 Revolution 5.1 Audiophile Track0MA PIX0MA iPIX PIX0MA 100 Stylus Color C48 Stylus Color C87U DeskJet 1280 Des kJet 5443 Photo Smart 385 Laser Shot LBP2900 Laser Shot LBP3300 ML 1615 ML 2015 LaserJet 1018 LaserJet 2420 LaserJet 2420DN 4200F LiDE500F LiDE500F LiDE60 Perfection0 30 Perfe9 Perfe40 Perfe9 Perfe40 Perfe9 Perfe40 Perfe9

Kako osoba pretražuje ovu bazu podataka? Najvjerovatnije bi hodao od korijenskog elementa duž stabla dokumenta sve dok ne pronađe vezu u željenoj grani ili se uvjeri da drajver za ovaj uređaj nije u bazi podataka. Uradićemo isto, koristeći XPath izraze da pronađemo željeni čvor ili skup čvorova.

Ispis obrasca za dostavljanje podataka index.htm:

skener za štampač zvučne kartice video kartice

Postoje dvije varijable u formi: put i zastava... Prvi pohranjuje traženu putanju, koja se šalje na server. Pošto već postoji jedan element u obrascu, ova varijabla već ima početnu vrijednost. Druga varijabla se koristi da kaže serverskoj skripti da izdvoji određeni element iz dokumenta. Uređaj... Osim toga, promijenit će se format podataka vraćenih sa servera.

Hajde sada da pogledamo JS motor. Sve funkcije na strani klijenta skupljene su u skriptu ajax.js: y = novi objekat (); funkcija httpRequest () (if (window.XMLHttpRequest) (// kreiranje objekta za sve pretraživače osim IE requestObj = novi XMLHttpRequest ();) else if (window.ActiveXObject) (// za IE requestObj = novi ActiveXObject ("Msxml2. XMLHTTP "); if (! requestObj) (requestObj = novi ActiveXObject (" Microsoft.XMLHTTP ");););); funkcija sendRequest (url, data) (httpRequest (); // definirajte funkciju povratnog poziva requestObj.onreadystatechange = responseServer; // pripremite podatke za slanje, readyState = 1 requestObj.open ("POST", url, true); / * T pošto se podaci šalju metodom POST, server treba poslati zaglavlje koje ga obavještava o tome * / requestObj.setRequestHeader ("Content-Type", "application / x-www-form-urlencoded; charset = UTF-8 "); // slanje podataka serveru requestObj.send (data);); funkcija responseServer () (if (requestObj.readyState == 4) (var status = requestObj.status; if (status == 200) (addSelect (y);) else if (status == 400) (upozorenje ("Nevažeći zahtjev ");) else if (status == 500) (upozorenje (" Interna greška na serveru ");) else if (status == 503) (var time = requestObj.getResponseHeader (" Ponovni pokušaj") * 1000; alert ("Server je preopterećen. Zahtjev će se ponoviti za:" + vrijeme + "sekunde"); setTimeout (sendRequest (url, putanja), vrijeme);) else (upozorenje ("Pogrešan odgovor servera"); );); 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 + "/ Uređaj [" "+ obj.value +" "]"; / * pomoću metode GET pošaljite serveru informacije o skripti da je potreban određeni element uređaja * / url = "index.php? flag = 1";); // dodijeli vrijednost trenutnog zahtjeva varijabli staze Elpath.value = path; // kodiraj preneseni niz path path = "path =" + encodeURIComponent (putanja);y = obj;sendRequest (url, path);); funkcija addSelect (obj) (// odgovor servera u običnom tekstu var docTEXT = requestObj.responseText; obj.setAttribute ("disabled", true); // kreirajte div element var div = document.createElement ("div"); / / dodaj odgovor servera div div.innerHTML = docTEXT; // dodaj odgovor servera div stablu dokumenta document.form.appendChild (div);); funkcija reset () (document.form.path.value = "(! LANG: // Uređaji"; 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 već rekao, u funkciji imovine onreadystatechange parametri se ne mogu proslijediti. Preciznije, 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. Pošto je ova varijabla u globalnom opsegu varijabli, biće joj moguće pristupiti iz bilo kojeg dijela programa. U ovom trenutku, ovo je najpametniji način za prosljeđivanje parametara povratnog poziva funkciji svojstva. onreadystatechange objekt.

Sada pogledajmo kako motor radi.

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

Zatim pozivamo funkciju posalji zahtjev (), u koji prosljeđujemo URL serverske skripte, kao i varijablu tipa string koja sadrži gotove POST podatke. I prva stvar koju radimo je stvaranje XMLHttpRequest objekt, referenca na koju pohranjujemo u varijablu requestObj... Funkcija httpRequest () je unakrsni pretraživač i radit će u svim pretraživačima.

Ponekad poziv funkcije httpRequest () Uradio sam to odmah prilikom učitavanja stranice i nikad stvorena XMLHttpRequest objekat. Ali kako se ispostavilo, ovo radi za sve pretraživače osim IE, koji zahtijeva kreiranje novog objekta svaki put. Stoga se ova funkcija poziva svaki put prije slanja podataka.

Nakon slanja podataka, pretraživač čeka odgovor od servera. Svaki put kada se nekretnina promijeni readyState funkcija će biti pozvana responseServer ()... Ako je status odgovora došao s kodom "200" (sve je u redu), funkcija će biti pozvana addSelect (), koji će dodati rezultirajuće podatke u DOM trenutnog dokumenta. Svi pretraživači će čekati odgovor od servera. Međutim, nakon određenog vremena (tajm-aut), bit će prisiljen dodijeliti XMLHttpRequest.readyState = 4 i prestanite čekati odgovor od servera. Na primjer, Opera ima vrijeme čekanja od 10 sekundi. Koristeći druge statuse, možete dodati rukovao greškama u motor u odgovorima servera.

Funkcija addSelect () dodaje još jedan čvor u DOM trenutnog dokumenta DIV, u koji postavlja odgovor sa servera. Moglo bi se zapitati zašto se imovina koristi responseText, ali ne responseXML? Neko će definitivno želeti da koristi ovo svojstvo za uvoz odgovora servera (a serverska skripta kao odgovor šalje XML dokument) direktno u DOM dokumenta. Za mene je postojala takva želja. Htio sam uvesti korijenski element poslane XML datoteke i sve njene potomke koristeći metodu importNode... Ali pretraživač je uvezao element bez djece, iako je drugi parametar ove metode postavljen na tačno: importNode (Objekat importedNode, istina)... Stoga, neprecizna primjena ove metode još uvijek isključuje njenu upotrebu.

Ekvivalentno rješenje pronađeno je korištenjem innerHTML metoda elementa.

Ovim se završava rad na strani klijenta. Preostala nerazmotrena funkcija resetovati () je dizajniran da vrati DOM dokumenta u originalni oblik. Isto možete postići osvježavanjem stranice pomoću F5, ali AJAX motor je napisan kako bi se izbjeglo ponovno učitavanje stranice. Dakle, svi elementi koje skripta dodaje dokumentu moraju biti uklonjeni iz njega i skriptom.

Kao odgovor na zahtjev, serverska skripta generiše XML podatke u obliku: childrenElementName_1 .... childrenElementName_1

Ako traženi čvor ima ime Uređaj, zatim se vraća običan formatirani tekst. Serverska skripta je napisana u PHP V5 i neće raditi na ranijim verzijama ovog interpretatora, budući da je DOM ekstenzija uvedena u ovaj jezik tek od pete verzije, a zamijenila je DOM XML ekstenziju, čiji interfejs nije odgovarao specifikaciji. Sada pogledajmo kod serverske skripte.

Popis fajlova index.php : učitavanje ("data.xml"); // kreiramo XPath objekat $ DOMXPath = novi DOMXPath ($ doc); $ DOMNodeList = $ DOMXPath -> upit ($ _ POST); // dohvati traženi element prema zahtjevu $ DOMNode = $ DOMNodeList -> item (0); // kreiranje objekta XML dokumenta $ replyXML = novi DOMDocument ("1.0", "windows-1251"); / * ako zastavica nije jednaka jedan, tada trenutni element nije element uređaja i morate pronaći sve elemente potomke trenutnog elementa DOMNode * / if ($ _GET! = 1) (// dobiti listu svih potomci elementa $ childNodes = $ DOMNode -> childNodes; / * Pošto djeca mogu biti ne samo elementi, već i čvorovi, kreiramo indeksni niz koji sadrži samo podređene elemente * / foreach ($ childNodes kao $ čvor) (ako ( $ Node-> nodeType == 1) ($ arrayNodes = $ Node;);); // kreirajte osnovni element XML dokumenta $ root = $ replyXML-> createElement ("select"); $ optgroup = $ replyXML- > createElement ("optgroup"); / * ako su elementi potomci nisu Device, tada postavljamo atribute za osnovni element i njegov potomak element optgroup * / if ($ arrayNodes -> nodeName! = "Device") ($ root-> setAttribute ("name", $ DOMNode-> nodeName); $ AttributeNode = $ arrayNodes-> getAttributeNode ("title"); $ optgroup-> setAttribute ("label", $ AttributeNode-> vrijednost); $ root- > setAttribute ("onblur", "sendData (ovo) "); ) inače (/ * inače, kreirajte atribut sa JS kodom koji će dodijeliti vrijednost "1" varijabli u formi zastavice * / $ root-> setAttribute ("onblur", "document.form.flag.value = 1 ; sendData (ovo ); ");); / * petlja koja kreira nove elemente opcija za svaki podređeni element; koliko potomaka, toliko elemenata * / foreach ($ arrayNodes kao $ Čvor) ($ opcija = $ replyXML-> createElement ("opcija"); $ setNode = $ Node-> Ime čvora; if ($ Node-> NodeName == " Uređaj ") ($ setNode = $ Node-> nodeValue;); $ opcija-> nodeValue = $ setNode; $ opcija-> setAttribute (" vrijednost ", $ setNode); $ optgroup-> appendChild ($ opcija);) ; // ubacite rezultirajuće elemente u XML dokument $ replyXML-> appendChild ($ root); $ root-> appendChild ($ optgroup); / * ako je zastava = 1, tada je trenutni element element uređaja; podređeni elementi nisu potrebni, ali su potrebni atributi trenutnog elementa * /) inače (// kreirajte korijenski element $ root = $ replyXML-> createElement ("pre"); $ DOMText = novi DOMText ("OS URL" ); $ root - > appendChild ($ DOMText); $ NamedNodeMapAttr = $ DOMNode-> atributi; $ i = 0; / * petlja koja pronalazi sve atribute elementa Device i za svaki atribut kreira liniju podataka sa vezom sadržaj * / while (($ NodeAttr = $ NamedNodeMapAttr -> stavka ($ i))! = null) (if ($ NodeAttr-> name! = "id") ($ DOMText = novi DOMText ("$ NodeAttr-> ime"); $ DOMElement = $ replyXML-> createElement ("a"); $ DOMElement - > setAttribute ("href", $ NodeAttr-> vrijednost); $ DOMElement -> nodeValue = $ NodeAttr-> vrijednost; $ root -> appendChild ($ DOMText); $ root -> appendChild ($ DOMElement); $ i $ NodeAttr = $ NamedNodeMapAttr-> item ($ i);); $ replyXML-> appendChild ($ root); ); // šalje odgovor klijentu echo $ replyXML-> saveHTML (); ?>