AJAX: ce este, impactul asupra seo, avantajele și dezavantajele tehnologiei. Folosind Ajax

AJAX este un acronim care înseamnă Javascript asincron și XML. De fapt, AJAX nu este o tehnologie nouă, deoarece atât Javascript, cât și XML există de ceva timp, iar AJAX este o sinteză a acelor tehnologii. AJAX este cel mai frecvent asociat cu termenul Web 2.0 și este prezentată ca cea mai nouă aplicație Web.

Când utilizați AJAX, nu este nevoie să actualizați întreaga pagină de fiecare dată, deoarece doar o anumită parte a acesteia este actualizată. Este mult mai convenabil, deoarece nu trebuie să așteptați mult și mai economic, deoarece nu toată lumea are internet nelimitat. Adevărat, în acest caz, dezvoltatorul trebuie să se asigure că utilizatorul este conștient de ceea ce se întâmplă pe pagină. Acest lucru poate fi implementat folosind indicatori de încărcare, mesaje text că datele sunt schimbate cu serverul. De asemenea, trebuie să înțelegeți că nu toate browserele acceptă AJAX (vechi browsere și browsere de text). Plus Javascript poate fi dezactivat de către utilizator. Prin urmare, nu trebuie să abuzați de utilizarea tehnologiei și să apelați la metode alternative de prezentare a informațiilor pe site-ul Web.

Să rezumăm avantajele AJAX:

• Posibilitatea de a crea o interfață web ușor de utilizat
• Interacțiune activă cu utilizatorul
• Comoditatea utilizării

AJAX folosește două metode de lucru cu o pagină web: schimbarea paginii web fără a o reîncărca și contactarea dinamică a serverului. Al doilea poate fi realizat în mai multe moduri, în special, XMLHttpRequest, despre care vom vorbi, și folosind tehnica cadru ascuns.

Schimb de date

Pentru a face schimb de date, pe pagină trebuie creat un obiect XMLHttpRequest, care este un fel de intermediar între browserul utilizatorului și server (Fig. 1). Folosind XMLHttpRequest, puteți trimite o solicitare către server, precum și puteți primi un răspuns sub formă de diferite tipuri de date.

Există două moduri de a face schimb de date cu serverul. Prima modalitate este o solicitare GET. În această solicitare, accesați un document de pe server, transmițându-i argumente prin adresa URL în sine. În același timp, din partea clientului, va fi logic să folosiți funcția de evadare Javascript, astfel încât unele date să nu întrerupă cererea.

Partea client, scrisă în Javascript, trebuie să ofere funcționalitatea necesară pentru comunicarea securizată cu serverul și să ofere metode de schimb de date în oricare dintre modurile de mai sus. Partea server trebuie să prelucreze datele de intrare și pe baza acestora să genereze informații noi (de exemplu, lucrul cu baza de date) și să le restituie clientului. De exemplu, pentru a solicita informații de la server, puteți utiliza o solicitare GET obișnuită cu transferul mai multor parametri mici și pentru a actualiza informații sau pentru a adăuga informații noi, va trebui să utilizați o solicitare POST, deoarece vă permite să transferați mari cantități de date.

După cum sa menționat deja, AJAX utilizează transferul de date asincron. Aceasta înseamnă că în timp ce datele sunt transferate, utilizatorul poate efectua alte acțiuni de care are nevoie. În acest moment, utilizatorul ar trebui să fie anunțat că are loc un fel de schimb de date, în caz contrar, utilizatorul se va gândi că s-a întâmplat ceva greșit și poate părăsi site-ul sau reapelează funcția care a „atârnat”, în opinia sa. Indicarea în timpul comunicării într-o aplicație Web 2.0 joacă un rol foarte important: este posibil ca vizitatorii să nu fie încă obișnuiți cu aceste modalități de reîmprospătare a paginii.

Răspunsul de la server poate fi nu numai XML, după cum sugerează numele tehnologiei. Pe lângă XML, puteți obține un răspuns sub formă de text simplu sau JSON (Javascript Object Notation). Dacă răspunsul a fost primit în text simplu, atunci acesta poate fi afișat imediat într-un container pe pagină. Când se primește un răspuns XML, documentul XML rezultat este de obicei procesat pe partea clientului și convertit în (X)HTML. Când primește un răspuns JSON, clientul trebuie doar să execute codul primit (funcția de eval a Javascript) pentru a obține un obiect Javascript cu drepturi depline. Dar aici trebuie să fii atent și să ții cont de faptul că codul rău intenționat poate fi transmis folosind această tehnologie, așa că înainte de a executa codul primit de la server, acesta ar trebui verificat și procesat cu atenție. Există o astfel de practică precum o solicitare „inactivă”, în care niciun răspuns nu vine de la server, doar datele de pe partea serverului sunt modificate.

În diferite browsere, acest obiect are proprietăți diferite, dar în general este același.

Metode obiect XMLHttpRequest

Rețineți că numele metodelor sunt scrise în același stil (stil Camel) ca și alte funcții Javascript. Aveți grijă când le folosiți.

intrerupere de sarcina()- anulați cererea curentă către server.

getAllResponseHeaders()- obțineți toate anteturile de răspuns de la server.

getResponseHeader ("nume_header")- obțineți titlul specificat.

deschide("request_type","URL","asincron","nume utilizator","parolă")- inițializarea cererii către server, cu specificarea metodei de solicitare. Tipul cererii și adresa URL sunt parametri obligatorii. Al treilea argument este o valoare booleană. De obicei, întotdeauna setat la adevărat sau nu este setat deloc (implicit este adevărat). Al patrulea și al cincilea argument sunt folosite pentru autentificare (este foarte nesigur să stocați datele de autentificare în script, deoarece scriptul poate fi vizualizat de orice utilizator).

trimite ("conținut")- trimiteți o cerere HTTP către server și obțineți un răspuns.

setRequestHeader("header_name","valoare")- setați valorile antetului cererii.

Proprietățile obiectului XMLHttpRequest

onreadystatechange este una dintre cele mai importante proprietăți ale obiectului XMLHttpRequest. Cu ajutorul acestei proprietăți, este setat un handler, care este apelat ori de câte ori starea obiectului se schimbă.

readyState- un număr care indică starea obiectului.

text de răspuns- reprezentarea răspunsului serverului sub formă de text simplu (șir).

răspunsXML- un obiect document compatibil cu DOM-ul primit de la server.

stare- starea răspunsului de la server.

statusText- reprezentarea textuală a stării răspunsului de la server.

Să aruncăm o privire mai atentă asupra proprietății readyState:

• 0 - Obiectul nu este inițializat.
• 1 - Obiectul încarcă date.
• 2 - Obiectul și-a încărcat datele.
• 3 - Obiectul nu este încărcat complet, dar poate fi interacționat de către utilizator.
• 4 - Obiectul este inițializat complet; a primit un răspuns de la server.

Se bazează pe starea de pregătire a obiectului pe care îl puteți oferi vizitatorului informații despre stadiul schimbului de date cu serverul și, eventual, să îl notificați vizual despre acest lucru.

Crearea unui obiect XMLHttpRequest

După cum am menționat mai sus, crearea acestui obiect pentru fiecare tip de browser este un proces unic.

De exemplu, pentru a crea un obiect în browsere compatibile cu Gecko, Konqueror și Safari, veți folosi următoarea expresie:

VarRequest = noua XMLHttpRequest();

Și pentru Internet Explorer, se utilizează următoarele:

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

Var Request = nou ActiveXObject("Msxml2.XMLHTTP");

Acum, pentru a obține compatibilitatea între browsere, trebuie să adăugați toate funcțiile într-una singură:

Funcția CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( // Browsere compatibile Gecko, Safari, Konqueror Request = nou XMLHttpRequest(); ) else if (window.ActiveXObject) ( //Internet Explorer try ( Solicitare = nou ActiveXObject("Microsoft.XMLHTTP"); ) catch (CatchException) ( Solicitare = nou ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Request) ( alert("Nu se poate crea XMLHttpRequest"); ) return Request; )

După toate acestea, puteți crea acest obiect și nu vă faceți griji cu privire la performanța pe browserele populare. Dar puteți crea un obiect în locuri diferite. Dacă îl creați global, atunci la un anumit moment în timp va fi posibilă o singură solicitare către server. Puteți crea un obiect de fiecare dată când se face o solicitare către server (acest lucru va rezolva aproape complet problema).

Solicitare server

Algoritmul de solicitare a serverului arată astfel:

• Verificarea existenței XMLHttpRequest.
• Inițializarea conexiunii la server.
• Trimiterea unei cereri către server.
• Prelucrarea datelor primite.

Pentru a crea o cerere către server, vom crea o mică funcție care va combina funcționalitatea pentru cererile GET și POST.

/* Funcție pentru trimiterea unei cereri către un fișier de pe server r_method - tipul cererii: GET sau POST r_path - calea către fișierul r_args - argumente ca a=1&b=2&c=3... r_handler - funcție pentru a gestiona răspunsul de la server */ function SendRequest(r_method , r_path, r_args, r_handler) ( //Creați o cerere var Request = CreateRequest(); //Verificați dacă cererea există din nou dacă (!Request) ( return; ) //Atribuiți un handler personalizat Request.onreadystatechange = function() ( // Dacă schimbul de date este complet dacă (Request.readyState == 4) ( //Ofer controlul utilizatorului handler r_handler(Request); ) ) //Verificați dacă este necesară o cerere GET if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //Inițializați conexiunea Request.open(r_method, r_path, true); if (r_method.toLowerCase( ) == „post”) ( //Dacă aceasta este o cerere POST //Setează antetul Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //Trimit m cerere Request.send(r_args); ) else ( //Dacă aceasta este o cerere GET //Trimite o cerere nulă Request.send(null); ) )

Crearea unei cereri a devenit mult mai ușoară. De exemplu, să scriem o funcție care va primi conținutul unui fișier pe server și să-l scoată într-un container.

Funcția ReadFile(nume fișier, container) ( //Creează o funcție de gestionare var Handler = function(Request) ( document.getElementById(container).innerHTML = Request.responseText; ) //Trimite cererea SendRequest("GET",filename," ", Handler); )

Așa are loc interacțiunea cu serverul.

Procesarea răspunsului

În exemplul anterior, am făcut o funcție de solicitare către server. Dar este, de fapt, nesigur, deoarece nu procesăm starea obiectului și starea răspunsului de la server.

Să adăugăm la codul nostru, astfel încât să poată afișa o notificare vizuală despre procesul de încărcare.

Request.onreadystatechange = function() ( //Daca schimbul de date este finalizat daca (Request.readyState == 4) ( //Ofer controlul utilizatorului handler r_handler(Request); ) else ( //Anuntati utilizatorul despre descărcare )) ...

După cum știți deja, obiectul XMLHttpRequest vă permite să cunoașteți starea răspunsului de la server. Să profităm de această oportunitate.

Request.onreadystatechange = function() ( //Dacă schimbul de date este finalizat dacă (Request.readyState == 4) ( dacă (Request.status == 200) ( //Transferă controlul către utilizatorul handler r_handler(Request); ) else ( // Notifică utilizatorul despre o eroare care a survenit ) ) else ( // Notifică utilizatorul despre descărcare ) ) ...

Opțiuni de răspuns ale serverului

De la server pot fi primite mai multe tipuri de date:

• text simplu

Dacă primiți text simplu, atunci îl puteți trimite imediat la container, adică la ieșire. Când primiți date ca XML, trebuie să procesați datele utilizând funcțiile DOM și să redați rezultatul folosind HTML.

JSON este notația obiect Javascript. Cu ajutorul lui, puteți reprezenta un obiect ca șir (aici puteți desena o analogie cu funcția de serializare). Când primiți date JSON, trebuie să le executați pentru a obține un obiect Javascript cu drepturi depline și pentru a efectua operațiunile necesare asupra acestuia. Vă rugăm să rețineți că astfel de transmitere și execuție de date nu sunt sigure. Trebuie să urmăriți ceea ce se pune în execuție.

Exemplu de cod JSON:
( „date”: ( „diverse”: [ ( „nume” : „element JSON unu”, „tip” : „Subtitlu 1” ), ( „nume” : „Element JSON doi”, „tip” : „ Subtitlu 2 " ) ] ) )

La primirea unui astfel de cod, efectuăm următoarea acțiune:

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

După executarea acestui cod, obiectul va fi disponibil pentru dvs date de răspuns.

Lucrul cu limbaje de programare pe server

O astfel de muncă nu este diferită de cea obișnuită. De exemplu, voi lua PHP ca limbaj de pe partea serverului. Nimic nu s-a schimbat în partea clientului, dar partea serverului este acum reprezentată de un fișier PHP.

Prin tradiție, să începem cu un salut către lumea noastră minunată:

ecou „Bună ziua, lume!”;

La accesarea acestui fișier, șirul Hello, World va fi returnat clientului. După cum înțelegeți, aceasta reprezintă cele mai largi posibilități de construire a aplicațiilor. Transmițând argumente atunci când apelați serverul cu XMLHttpRequest, puteți parametriza rezultatul, oferind astfel o funcționalitate bogată aplicației Web.

În afară de PHP, poate fi folosit orice alt limbaj de programare pe partea de server.

AJAX - Ce este?

Când există puține oportunități existente și nu există loc pentru a le îmbunătăți pe cele existente, atunci are loc o descoperire tehnologică. O astfel de descoperire este AJAX (Asynchronous JavaScript and XML) - o abordare a construirii de interfețe cu utilizatorul pentru aplicații web, în ​​care pagina web, fără a se reîncărca, încarcă ea însăși datele de care utilizatorul are nevoie. AJAX este una dintre componentele conceptului DHTML.

Ce ne oferă această tehnologie. În prezent, dezvoltarea aplicațiilor WEB tinde să facă distincția între partea client și partea server, iar acesta este motivul pentru utilizarea pe scară largă a șabloanelor precum Smarty și XSLT. Proiectele devin mai complexe acum, iar împletirea diferitelor tehnologii devine prea costisitoare pentru timpul unui dezvoltator. Deci, de exemplu, toate stilurile de formatare sunt redate în fișiere CSS sau XSL, datele HTML sau XML sunt stocate în alte secțiuni, serverele de gestionare în a treia, bazele de date în a patra. Și dacă în urmă cu 5-6 ani, aproape peste tot puteai vedea împletirea tuturor acestor lucruri într-un singur fișier, acum devine din ce în ce mai raritate.

Când se dezvoltă proiecte mai complexe, este nevoie de cod structurat și lizibil. Nu ar trebui să aruncați codul programatorului cu codul designerului de layout și codul designerului de layout cu editările designerului și așa mai departe.

Este necesar să se separe munca. Deci, de exemplu, un designer își va face treaba, un programator își va face treaba, un programator își va face treaba și, în același timp, nimeni nu va interfera unul cu celălalt. Ca urmare, fiecare participant la proiect va trebui să cunoască doar datele cu care va trebui să lucreze. În acest caz, productivitatea grupului și calitatea proiectului cresc semnificativ. În prezent, această problemă este rezolvată cu succes prin utilizarea șabloanelor, dar acest lucru creează și anumite dificultăți, deoarece pentru a, de exemplu, conecta Smarty, trebuie să conectați modulul software de procesare a șabloanelor și să îl legați clar cu structura proiectului. Dar acest lucru nu este întotdeauna posibil și necesită anumite costuri. Este puțin mai ușor când utilizați pachetul XML + XSL, deoarece oferă mai multe opțiuni, dar aceasta este o alternativă, nimic mai mult. Dar dacă privim spre ceva radical nou, care ne-ar permite să combinăm totul mai bine, folosind posibilitățile a ceea ce este? Încercați să vă imaginați un JavaScript care are toată puterea PHP sau Perl, inclusiv grafică și baze de date, care are o extensibilitate și o utilizare mult mai bună și este, de asemenea, multiplatformă.

Deci, ce este AJAX? Despre Ajax s-a vorbit pentru prima dată după articolul din februarie 2005 „Rethinking Web Applications” de Jesse James Garrett. Ajax nu este o tehnologie independentă. Aceasta este o idee bazată pe două principii principale.

Utilizarea DHTML pentru a schimba dinamic conținutul paginii.

Utilizarea XMLHttpRequest pentru a interoga serverul din mers.

Utilizarea acestor două abordări vă permite să creați interfețe de utilizator WEB mult mai convenabile pe acele pagini ale site-urilor în care este necesară interacțiunea activă a utilizatorului. Utilizarea Ajax a devenit mai populară de când Google a început să-l folosească în mod activ pe site-urile lor, cum ar fi Gmail, Google Maps și Google sugerează. Crearea acestor site-uri a confirmat eficacitatea acestei abordări.

Deci mai detaliat: dacă luăm modelul clasic de aplicație WEB:

Clientul, tastând în bara de căutare adresa resursei de interes pentru el, ajungând la server, îi face o cerere. Serverul efectuează calcule în conformitate cu cererea, accesează baza de date și așa mai departe, după care datele primite ajung la client și, dacă este necesar, sunt înlocuite în șabloane și procesate de browser. Rezultatul este pagina pe care o vedem și pe care 80% din populația țării aflată în WEB o numește Internet. Acesta este un model clasic care a reușit să se dovedească și să câștige un loc de cinste la soare. Acesta este cel mai simplu model de interacțiune și, prin urmare, cel mai comun. Cu toate acestea, devine din ce în ce mai insuficient. Imaginați-vă un joc on-line „Battleship”, care este jucat de doi prieteni inveterati - un rezident al Africii de Sud și un rezident al Japoniei. Cum să folosești un astfel de model pentru a-și face jocul cât mai plăcut cu putință? În orice caz, datele navelor scufundate vor fi stocate pe server, iar pentru a verifica dacă adversarul a fost ca, va fi necesar să actualizați pagina de fiecare dată și să îngroșați datele învechite. „Dar oamenii au venit cu stocarea în cache” - vei spune și vei avea perfectă dreptate, dar nu ușurează. Memorarea în cache va accelera doar timpul de interacțiune cu serverul, dar nu va elimina necesitatea reîncărcării paginii. Alternativ, puteți seta o anumită oră de auto-actualizare, dar în acest caz, pagina se va reîncărca complet.

Acum să ne uităm la modelul de interacțiune AJAX:

Secvența de acțiuni ale clientului este salvată și acesta, cel mai probabil, nu va înțelege ce se va întâmpla, iar cuvântul AJAX va fi asociat doar cu numele clubului de fotbal. Dar pe partea de server, lucrurile arată diferit.

La accesarea serverului se generează o pagină care va fi afișată utilizatorului și îi va oferi acestuia să efectueze succesiunea de acțiuni care îl interesează. Cu o alegere conștientă (deși nu neapărat) a clientului, solicitarea acestuia se va referi la modulul AJAX, care va efectua toate calculele care îl interesează și va lucra cu serverul ca atare. Dar care este inovația? Principala diferență este că această metodă ne oferă posibilitatea de a accesa în mod dinamic serverul și de a efectua acțiunile care ne interesează. De exemplu, trebuie să efectuăm un apel la baza de date și să obținem datele care ne interesează, pe care apoi le vom folosi. Vom stoca datele într-un fișier XML care va fi generat dinamic, astfel:

Creați un nou obiect JavaScript:

Var req = nou ActiveXObject ("Microsoft.XMLHTTP"); (pentru IE) var req = new XMLHttpRequest(); (Pentru orice altceva)

Apoi scriem o funcție folosind acest obiect

Varreq; funcția loadXMLDoc(url) ( // ramură pentru obiectul XMLHttpRequest nativ dacă (window.XMLHttpRequest) (req = nou XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send( null); // ramură pentru versiunea IE/Windows ActiveX ) else if (window.ActiveXObject) (req = nou ActiveXObject ("Microsoft.XMLHTTP"); dacă (req) (req.onreadystatechange = processReqChange; req.open ("GET) ", url, adevărat); req.send(); ) ) )

În corpul fișierului HTML, scriem un script care va:

Funcția checkName(intrare, răspuns) ( if (răspuns != "")( // mesaj în modul răspuns = document.getElementById("nameCheckFailed"); if (răspuns == "1")( mesaj. className = "eroare"; )else( message.className = "ascuns"; ) )else( // Url mod de introducere = "http://localhost/xml/checkUserName.php?q=" \\ + input; loadXMLDoc(url); ) )

În fișierul localhost/xml/checkUserName.php, procesăm datele primite de la linia de comandă în acest caz în variabila q. Iar rezultatul este salvat în structura XML, care este stocată în același fișier. Deci putem primi și procesa datele primite din baza de date sau altceva de care avem nevoie. În plus, serverul va procesa doar datele pe care trebuie să le actualizăm și nu întreaga pagină dacă este reîncărcată.

Acum să revenim la doi prieteni - iubitori ai bătăliilor pe mare: având în vedere apariția acestei inovații, putem face următoarele: verificarea la fiecare trei secunde a fișierului XML, această verificare implică verificarea bazei de date pentru o nouă intrare, adică , pentru o mutare făcută de adversar. Dacă mișcarea a fost făcută, pagina scufundă navele fără a se reîncărca, stricând astfel starea de spirit a participanților la luptele pe apă. Această funcționalitate este obținută prin utilizarea elementară a Javascript și a foilor de stil. Acest exemplu este destul de clar, dar departe de a fi complet, utilizarea acestei tehnologii este mult mai semnificativă.

Cu toate acestea, nu toate sunt atât de simple. Să ne uităm acum la trăsăturile negative.

În primul rând, putem transfera date numai folosind metoda GET, așa că cantități mari de date vor trebui lăsate în pace. Această problemă a fost ridicată de mai multe ori în diverse surse, dar domnilor, există Cookie-uri care sunt destul de acceptabile în cazurile de transfer de date mari decât poate găzdui o solicitare GET, iar Javascript, la rândul său, are funcții de lucru cu ele.

A doua problemă este compatibilitatea între browsere. Obiectul XMLHttpRequest nu face parte încă din niciun standard (deși ceva similar a fost deja propus în specificația W3C DOM Level 3 Load and Save). Prin urmare, există două metode diferite pentru a apela acest obiect în codul de script. În Internet Explorer, obiectul ActiveX este invocat astfel:

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

În Mozilla și Safari, este mai ușor (pentru că este un obiect încorporat în JavaScript):

varreq = new XMLHttpRequest();

Toate browserele moderne suportă acest obiect și doar 1,8% dintre utilizatorii (conform statisticilor de la SpyLog) care folosesc versiuni foarte vechi de browsere care nu acceptă acest obiect vor avea probleme.

Și în sfârșit, securitate. Să ne oprim asupra acestui lucru mai detaliat. Principala problemă este că toate datele și codul sursă al funcțiilor JavaScript pot fi văzute prin vizualizarea codului sursă al paginii, respectiv, un atacator poate urma logica executării interogării și, în anumite circumstanțe, poate executa setul de comenzi de care are nevoie. . Acest lucru nu joacă un rol special atunci când avem o simplă potrivire a datelor, ci ce să facem în situații mai complexe, precum autorizarea și cum să transmitem parolele în acest caz. După cum am menționat mai sus, cookie-urile vin în ajutor. Datele necesare pot fi trimise cu ajutorul lor, precum și prelucrate. Să luăm un exemplu în care utilizatorul va fi autentificat folosind tehnologia căreia îi este dedicat articolul.

Generarea paginii, generăm valori unice, pe care apoi le punem în variabilele serverului. Și în cookie-urile browserului, apoi în timpul autorizării obținem numele de utilizator și parola, pe care trebuie să le transmitem modulului de procesare de pe server.

După ce utilizatorul a introdus datele și a făcut clic pe butonul Trimitere, parola sa este introdusă în Cookie-uri, iar numele de utilizator este transmis deschis - printr-un link, de exemplu http://www.mubestajax.com/ajax.php?login=pupkin la primirea datelor, serverul, în primul rând, verifică datele primite. Deoarece valorile pe care le-am generat de la pornirea serverului și apoi le-am transmis variabilelor globale ale serverului și cookie-urile trebuie să se potrivească, atunci la verificarea integrității datelor transmise, programul nu mai funcționează dacă există o nepotrivire. Dacă totul a mers bine, atunci se extrag toate datele necesare și se efectuează calculele și lucrările necesare. Această metodă de protecție este destul de simplă și eficientă. Dar pentru proiecte mari, nu este potrivit.

Când securitatea vine în prim-plan, este mai bine să folosiți soluții mai complexe și mai fiabile. Dar, în majoritatea cazurilor, aceste măsuri de precauție vor fi mai mult decât suficiente, deoarece utilizarea modulelor mai complexe implică utilizarea unor tehnologii care nu sunt întotdeauna incluse în software-ul standard al serverelor moderne, a căror caracteristică principală este simplitatea. De aceea tehnologii precum MySQL și PHP au devenit foarte răspândite. oferă ușurință în exploatare cu un consum redus de resurse și o fiabilitate suficientă. Și în cadrul acestui software, soluția propusă mai sus este cea mai potrivită.

În concluzie, aș dori să spun că AJAX, pe de o parte, reprezintă un salt uriaș în ingineria WEB, dar, pe de altă parte, este o etapă de evoluție așteptată de mult, care a deschis noi orizonturi în domeniul dezvoltării software. . În același timp, această tehnologie este încă destul de „brută”, deoarece utilizarea ei în acest moment este mai degrabă o excepție plăcută. Dar sunt sigur că toată lumea va auzi despre asta de mai multe ori.

Cele mai multe site-uri web moderne folosesc o tehnologie numită AJAX pentru a interacționa rapid și eficient cu vizitatorul. AJAX a devenit o metodă foarte populară pentru obținerea datelor de pe server în fundal și actualizarea dinamică a paginii.

Dezvoltarea codului JavaScript pentru a implementa AJAX de la zero este un proces foarte consumator de timp și plictisitor. Cu toate acestea, multe biblioteci JavaScript, inclusiv jQuery, au o implementare excelentă la nivel înalt a AJAX sub forma unui set de metode și funcții care facilitează și mai rapid construirea de site-uri web.

În această serie de tutoriale, vom acoperi elementele de bază ale construirii cererilor AJAX cu jQuery. Vor fi abordate următoarele subiecte:

• Ce este tehnologia AJAX? Cum functioneazã? Care sunt avantajele sale?
• Cum să faci diferite tipuri de solicitări AJAX cu jQuery?
• Trimiterea datelor către server folosind cereri AJAX.
• Prelucrarea și extragerea datelor din răspunsurile AJAX de pe server.
• Cum să personalizezi gestionarea AJAX a jQuery și să schimbi setările implicite?

Notă: lecțiile se concentrează pe partea JavaScript de partea clientului. Dar și dezvoltarea părții server este destul de simplă. Pentru mai multe informații, citiți materialul despre limbaje de programare pe server, cum ar fi PHP.

Ce este AJAX și de ce este util?

AJAX este o tehnică de dezvoltare a aplicațiilor web în care codul JavaScript care se execută în browserul vizitatorului comunică cu un server web în mod asincron, adică în fundal. Diferența față de aplicațiile web obișnuite este următoarea:

• Pagina web obișnuită conține link-uri sau formulare care, atunci când sunt făcute clic sau trimise, fac o solicitare către o nouă adresă URL de pe serverul web. Serverul trimite o pagină HTML complet nouă, pe care browserul o redă apoi, înlocuind pagina originală. Această abordare necesită mult timp și are un efect negativ asupra vizitatorului, deoarece acesta trebuie să aștepte să se încarce o nouă pagină.
• Când utilizați tehnologia AJAX, Codul JavaScript face o cerere către o adresă URL de pe server. Codul poate trimite și date împreună cu cererea. Codul JavaScript procesează apoi răspunsul serverului și acționează în consecință. De exemplu, se pot face calcule cu datele returnate, se poate adăuga sau actualiza un widget pe pagină, se emite un mesaj către vizitator despre actualizarea bazei de date pe server.

Deoarece cererea AJAX rulează în fundal, codul JavaScript (și vizitatorul) pot continua să lucreze pe pagină în timp ce cererea este procesată. Procesul este ascuns vizitatorului, care nu trebuie să părăsească pagina pe care o vizualizează în prezent. Această abordare face ca paginile AJAX să fie foarte plăcute de lucrat.

Punctul fundamental al AJAX este obiectul JavaScript XMLHttpRequest. Oferă o serie de metode precum open() , send() și onreadystatechange() care pot fi utilizate atunci când se trimit cereri AJAX către server și se procesează răspunsurile în fundal.

Dezvoltarea codului JavaScript AJAX pe mai multe browsere poate fi un proces destul de obositor. Din fericire, jQuery vă oferă câteva metode AJAX ușor de utilizat, care vă permit să abstrageți o mulțime de operațiuni de nivel scăzut.

Pentru cei mai curioși, cuvântul AJAX este o abreviere a primelor litere ale expresiei în limba engleză " A sincron J avascript A nd X ML" (Asynchronous JavaScript and XML). Cu toate acestea, termenul poate induce în eroare - cererea nu trebuie să fie asincronă și nu trebuie să folosească XML pentru a trimite datele.

Efectuarea unei cereri GET cu $.get()

Metoda jQuery $.get() oferă o modalitate ușoară și convenabilă de a face o cerere simplă AJAX. Ea face cererea folosind metoda HTTP GET (folosită pentru a obține adrese URL, cum ar fi pagini și imagini) în loc de metoda POST (care este folosită în mod tradițional pentru a trimite datele din formular).

În forma sa cea mai simplă, puteți apela o metodă ca aceasta:

Unde url este adresa URL a resursei de la care se așteaptă răspunsul. Acesta este de obicei un script pe partea de server care efectuează o anumită acțiune și poate returna unele date:

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

Deși puteți solicita și un document static:

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

Când solicitați o adresă URL, puteți trimite date împreună cu solicitarea. Puteți transmite date în șirul de interogare, la fel cum ați face cu o solicitare normală GET:

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

Este corect să faceți același lucru prin trecerea obiectului de date ca al doilea parametru la metoda $.get(). Obiectul de date trebuie să conțină informații sub formă de perechi nume de proprietate/valoare de proprietate. De exemplu:

var data = ( oras: "roma", data: "20120318" ); $.get("http://example.com/getForecast.php", date);

Alternativ, puteți trece datele metodei $.get() ca șir:

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

Obținerea datelor de pe server

Până acum, ne-am uitat doar la exemple de utilizare a $.get() pentru a trimite cereri către server, ignorând orice răspuns pe care l-ar putea genera un script pe partea de server. Dar, în cele mai multe cazuri, codul JavaScript va aștepta un răspuns de la un script de pe partea serverului și va procesa datele primite.

O solicitare AJAX este asincronă, ceea ce înseamnă că rulează în fundal în timp ce restul codului JavaScript încă rulează. Cum, atunci, să primiți un răspuns de la server când solicitarea este finalizată?

Trebuie să scrii funcția de întoarcere, care va fi executat automat când cererea AJAX se finalizează și serverul trimite un răspuns. Cel puțin, funcția dvs. trebuie să ia datele returnate de server ca prim argument:

Funcția myCallback(returnedData) ( // Efectuați prelucrarea datelor returnedData )

Odată ce funcția de apel invers a fost creată, o puteți trece ca al treilea argument la metoda $.get():

var data = ( oras: "roma", data: "20120318" ); $.get("http://example.com/getForecast.php", date, myCallback);

Determinarea tipului de date de răspuns

De obicei, partea de server transmite date într-unul dintre mai multe formate comune, inclusiv XML , JSON , JavaScript sau HTML. În mod implicit, jQuery încearcă să determine cel mai potrivit format și să analizeze datele în consecință. Dar este mai bine să definiți în mod explicit formatul.

Pentru a specifica formatul, al patrulea argument trebuie trecut la metoda $.get(). Acest argument poate fi un șir din următoarea listă:

• "xml"
• "json"
• "scriptie"
• "html"

De exemplu, dacă știți că scriptul serverului returnează date în format JSON, atunci apelați metoda $.get() astfel:

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

Un exemplu de utilizare a metodei $.get().

Iată un exemplu de creare a unei cereri AJAX utilizând metoda $.get() și gestionarea simplă a răspunsului. Pentru ca exemplul să funcționeze, trebuie să creați un fișier text simplu pe serverul numit getForecast.txt, care să conțină următorul text:

( „oraș”: „Vasyuki”, „data”: „18 martie 2012”, „prognoză”: „Race și nămol”, „maxTemp”: +1)

Acest fișier va imita un răspuns JSON care ar fi putut fi generat de un script de prognoză meteo pe server.

Apoi creăm pagina showForecast.html în același folder ca getForecast.txt:

Obțineți prognoza meteo

Deschideți showForecast.html într-un browser și faceți clic pe butonul „Obțineți prognoza meteo”. În fereastra de mesaj vom primi prognoza meteo de la serverul nostru.

Iată cum funcționează acest cod:

1. showForecast.html conține un element butonului „Obține prognoza meteo” cu ID getForecast .
2. JavaScript din partea de sus a paginii este executat de îndată ce pagina este încărcată și DOM-ul este gata.
3. Codul JavaScript leagă mai întâi un handler de evenimente clic la butonul #getForecast. Acest handler face o solicitare AJAX GET către getForecast.txt , introducând numele orașului și data pentru prognoză. De asemenea, definește o funcție de apel invers succes() care va fi executată la finalizarea cererii. Formatul datelor returnate de server este definit ca JSON.
4. Fișierul getForecast.txt returnează datele de prognoză în browser în format JSON.
5. Funcția succes() este apelată. jQuery analizează datele JSON primite de la getForecast.txt, le convertește într-un obiect JavaScript și le transmite funcției.
6. Funcția returnează un obiect de date forecastData și afișează un mesaj care conține mai multe proprietăți ale obiectului, inclusiv numele orașului, prognoza și temperatura.

Un exemplu simplu, cu câteva linii, demonstrează cum funcționează o solicitare AJAX folosind metoda $.get().

În urmă cu cinci ani, erai rățușa cea urâtă (cu care nu vorbea nimeni) dacă nu știai XML. În urmă cu optsprezece luni, Ruby era în centrul atenției, iar programatorii care nu știau ce se întâmplă cu el nu au fost invitați la rezervorul de apă rece. Astăzi, dacă vrei să ajungi la petrecerea tech, ai nevoie de Ajax.

Cu toate acestea, Ajax este departe nu un capriciu, ci o abordare puternică pentru construirea de site-uri web care nu este la fel de greu de învățat ca o limbă complet nouă.

Înainte de a mă scufunda în detaliile despre Ajax, să luăm câteva minute pentru a înțelege ce face Ajax. Când scrieți o aplicație în aceste zile, aveți două opțiuni principale:

• Aplicații desktop
• aplicații web

Ambele opțiuni sunt familiare; aplicațiile desktop sunt de obicei furnizate pe CD (sau uneori descărcate de pe un site Web) și instalate în întregime pe computer. Ei pot folosi internetul pentru a descărca actualizări, dar codul care rulează aceste aplicații este găzduit pe desktop-ul dvs. Aplicațiile Web (nu este surprinzător) rulează pe un server Web undeva și accesați acele aplicații prin browserul Web.

Mai important, locul în care rulează codul din aceste aplicații determină modul în care se comportă și modul în care interacționați cu ele. Aplicațiile desktop sunt de obicei destul de rapide (se rulează pe computerul dvs.; nu trebuie să așteptați o conexiune la internet), au interfețe de utilizator grozave (de obicei interacționează cu sistemul dvs. de operare) și sunt incredibil de dinamice. Puteți să faceți clic, să tastați, să utilizați meniurile derulante și pop-up și să navigați prin ferestre practic fără întârziere.

Pe de altă parte, aplicațiile web sunt de obicei cele mai actualizate și oferă caracteristici pe care nu le-ai putea avea niciodată pe computer (gândiți-vă la Amazon.com și eBay). Cu toate acestea, odată cu puterea Web-ului, vine așteptarea - așteptarea unui răspuns de la server, așteptarea actualizării ecranului, așteptarea răspunsului la o cerere și generarea unei noi pagini.

În mod clar, aceasta este o simplificare, dar înțelegeți ideea generală. După cum probabil bănuiți deja, Ajax încearcă să reducă decalajul dintre funcționalitatea și interactivitatea unei aplicații desktop și o aplicație Web mereu actualizată. Puteți utiliza interfețe de utilizator dinamice similare cu cele găsite în aplicația desktop, dar disponibile în aplicația Web.

Deci, ce așteptăm? Să începem să ne uităm la Ajax și la cum să-ți transformi interfețele web neplăcute în aplicații Ajax sensibile.

Tehnologie veche, trucuri noi

Când vine vorba de Ajax, realitatea este că acoperă o mulțime de tehnologii - pentru a-l stăpâni, trebuie să te aprofundezi în mai multe tehnologii diferite (de aceea voi împărți primele câteva articole din această serie în părți independente). Vestea bună este că probabil că știți deja suficient despre multe dintre aceste tehnologii - majoritatea acestor tehnologii individuale sunt ușor de învățat (cu siguranță nu la fel de greu ca un limbaj de programare complet precum Java sau Ruby).

Definiţia Ajax

Apropo, Ajax este prescurtarea pentru JavaScript asincron și XML (și DHTML etc.). Expresia a fost inventată de Jesse James Garrett de la Adaptive Path (vezi secțiunea ) și, conform lui Jesse, nu a fost menit să fie un acronim.

Iată principalele tehnologii implicate în aplicațiile Ajax:

• HTML este folosit pentru a crea formulare Web și pentru a specifica câmpurile de utilizat în aplicația dvs.
• Codul JavaScript este codul principal care rulează aplicațiile Ajax și interacționează cu aplicațiile server.
• DHTML, sau HTML dinamic, vă ajută să actualizați formularele în mod dinamic. Veți folosi div , span și alte elemente HTML dinamice pentru a vă marca HTML.
• DOM, Document Object Model, va fi folosit (prin codul JavaScript) pentru a lucra atât cu structura HTML-ului dvs., cât și (în unele cazuri) XML primit de la server.

Să aruncăm o privire la fiecare dintre acestea în mod individual și să înțelegem ce face fiecare dintre aceste tehnologii. Voi explora fiecare dintre ele în următoarele articole; deocamdată, să aruncăm o privire mai atentă asupra acestor componente și tehnologii. Cu cât știi mai multe despre ele, cu atât este mai ușor să treci de la cunoștințe aleatorii la stăpânirea fiecăreia dintre ele (și să îmbunătățești cu adevărat procesul de dezvoltare a aplicațiilor Web).

obiect XMLHttpRequest

Primul articol despre care vrei să știi poate fi cel mai nou pentru tine; se numește XMLHttpRequest. Este un obiect JavaScript și este la fel de ușor de creat așa cum se arată în .

Listarea 1. Crearea unui nou obiect XMLHttpRequest

Voi vorbi despre acest obiect în detaliu în articolul următor, dar deocamdată, realizați că acesta este obiectul care controlează toată interacțiunea dvs. cu serverul. Înainte de a merge mai departe, opriți-vă și gândiți-vă la asta - este tehnologie JavaScriptîn obiectul XMLHttpRequest care comunică cu serverul. Acesta nu este fluxul normal al unei aplicații și aici se află aproape toată magia Ajax.

În aplicațiile web obișnuite, utilizatorii completează câmpurile de formular și dau clic pe un buton. Trimite(a confirma). Formularul este apoi trimis la server în întregime, serverul prelucrează scriptul (de obicei PHP sau Java, poate un proces CGI sau ceva de genul), apoi trimite înapoi întreaga pagină nouă. Această pagină poate fi o pagină HTML cu un formular nou cu unele date completate, sau o pagină de confirmare, sau poate o pagină cu anumite opțiuni bazate pe datele introduse în formularul original. Desigur, până când scriptul sau programul de pe server este procesat și este returnat un formular nou, utilizatorii trebuie să aștepte. Ecranele lor vor fi șterse și redesenate pe măsură ce sosesc date noi de pe server. Aici intervine interactivitatea scăzută - utilizatorii nu primesc feedback imediat și cu siguranță se simt diferit de când folosesc aplicații desktop.

Ajax pune în esență tehnologia JavaScript și obiectul XMLHttpRequest între formularul și serverul dvs. web. Când utilizatorii completează formulare, datele sunt transmise unui cod JavaScript, mai degrabă decât direct către server. În schimb, codul JavaScript colectează datele din formular și transmite cererea către server. În timp ce se întâmplă acest lucru, formularul de pe ecranul utilizatorului nu pâlpâie, nu clipește, nu dispare sau nu se blochează. Cu alte cuvinte, codul JavaScript trece cererea în fundal; utilizatorul nici nu observă că există o solicitare către server. Mai mult, cererea este trimisă asincron, ceea ce înseamnă că codul tău JavaScript (și utilizatorul) nu așteaptă ca serverul să răspundă. Adică, utilizatorii pot continua să introducă date, să deruleze pagina și să lucreze cu aplicația.

Serverul transmite apoi datele înapoi codului dvs. JavaScript (încă în formularul dvs. Web), care decide ce să facă cu datele. Poate actualiza câmpurile formularului din mers, oferind aplicației dvs. o senzație imediată - utilizatorii obțin date noi fără a trimite sau a-și actualiza formularele. Codul JavaScript poate chiar să obțină datele, să facă niște calcule și să trimită o altă solicitare, totul fără intervenția utilizatorului! Aceasta este puterea XMLHttpRequest. El poate comunica cu serverul după bunul plac, iar utilizatorul nici măcar nu știe ce se întâmplă cu adevărat. Drept urmare, obținem dinamismul, sensibilitatea, interactivitatea ridicată a aplicației desktop, alături de toate posibilitățile Internetului.

Adăugarea codului JavaScript

Odată ce înțelegeți XMLHttpRequest , restul codului JavaScript devine o corvoadă. De fapt, veți folosi codul JavaScript pentru un număr mic de sarcini de bază:

Pentru a efectua primele două sarcini, trebuie să fiți foarte familiarizat cu metoda getElementById() furnizată în .

Lista 2. Colectarea și setarea valorilor câmpurilor cu JavaScript

// Obține valoarea câmpului „telefon” și stochează-l în variabila telefon var phone = document.getElementById(„phone”).value; // Setați valorile în formular folosind matricea de răspuns document.getElementById("order").value = răspuns; document.getElementById("adresa").value = raspuns;

Nu este nimic prea remarcabil aici, ceea ce este grozav! Trebuie să începi să înțelegi că nu este nimic prea complicat în toate acestea. Odată ce ați înțeles XMLHttpRequest , restul aplicației dvs. Ajax va fi JavaScript simplu, precum cel din , amestecat cu HTML puțin mai inteligent. În plus, din când în când mai e ceva de lucru DOM... Deci să ne uităm la asta.

Completare cu DOM

Nu în ultimul rând este DOM, Modelul Obiect Document. Pentru unii dintre voi, zvonurile despre DOM ar putea fi puțin înfricoșătoare - nu este adesea folosit de designerii HTML și chiar puțin în afara caracterului pentru programatorii JavaScript (cu excepția cazului în care faceți cu adevărat niște programare la nivel înalt). Puteți găsi o utilizare extinsă a DOM în programe grele scrise în Java și C/C++; de fapt, acest lucru i-a câștigat DOM-ului o reputație de complex și dificil de învățat.

Din fericire, utilizarea DOM în tehnologia JavaScript este ușoară și mai ales intuitivă. Acum, probabil, ar fi trebuit să vă spun cum să utilizați DOM-ul, sau cel puțin să vă dau câteva exemple de cod, dar chiar și asta v-ar duce în rătăcire. Ideea este că puteți ajunge destul de departe cu Ajax fără a fi nevoie să amestecați în DOM și exact așa vreau să vă arăt. Voi reveni la DOM într-un articol viitor, dar deocamdată, doar să știți că este acolo undeva. Pe măsură ce începeți să transmiteți date XML înainte și înapoi între codul JavaScript și modificările reale ale formularului HTML, veți aprofunda mai mult în DOM. Între timp, puteți lucra eficient cu Ajax fără DOM, așa că să-l lăsăm deoparte pentru moment.

Obținerea unui obiect Request

Înarmat cu această prezentare generală, sunteți gata să aruncați o privire mai atentă. Deoarece XMLHttpRequest este esențial pentru aplicațiile Ajax (și probabil nou pentru mulți dintre voi), voi începe cu el. După cum ați văzut în , crearea acestui obiect și utilizarea lui ar trebui să fie ușoare, nu? Așteptați un minut.

Îți amintești acele războaie groaznice de browser de acum câțiva ani și cum nimic nu a funcționat la fel în diferite browsere? Credeți sau nu, acele războaie încă se desfășoară, deși la o scară mult mai mică. Și, surpriză: XMLHttpRequest este una dintre victimele acestor războaie. Prin urmare, trebuie să faceți mai mulți pași diferiți pentru ca XMLHttpRequest să funcționeze. Vă voi arăta cum să o faceți pas cu pas.

Lucrul cu browserele Microsoft

Browserul Microsoft Internet Explorer folosește parserul MSXML pentru a procesa XML (linkuri către mai multe informații despre MSXML pot fi găsite în secțiune). Deci, atunci când scrieți aplicații Ajax care trebuie să ruleze în Internet Explorer, trebuie să creați obiectul într-un mod special.

Cu toate acestea, nu este atât de ușor. Există de fapt două versiuni diferite de MSXML în uz. Versiunea de MSXML depinde de versiunea de JavaScript instalată în Internet Explorer, așa că trebuie să scrieți cod care să funcționeze pentru ambele versiuni. Aruncă o privire la codul pentru crearea unui XMLHttpRequest în browserele Microsoft.

Lista 3. Crearea unui obiect XMLHttpRequest în browserele Microsoft

varxmlHttp = fals; încercați ( xmlHttp = nou ActiveXObject ("Msxml2.XMLHTTP"); ) catch (e) ( încercați ( xmlHttp = nou ActiveXObject ("Microsoft.XMLHTTP"); ) catch (e2) ( xmlHttp = fals; ) )

Toate acestea pot să nu aibă încă sens, dar e în regulă. Vă veți aprofunda în programarea JavaScript, tratarea erorilor, compilarea condiționată și multe altele înainte de sfârșitul acestui articol. Între timp, ar trebui să scrieți două linii principale în cap:

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

xmlHttp = nou ActiveXObject(„Microsoft.XMLHTTP”); .

Pe scurt, acest cod încearcă să creeze un obiect folosind o versiune de MSXML; dacă aceasta nu reușește, este creat un obiect pentru a doua versiune. Grațios, nu? Dacă nimic nu funcționează, variabila xmlHttp este setată la false pentru a indica codului că ceva nu este în regulă. În acest caz, este posibil să utilizați un browser non-Microsoft și trebuie să utilizați un cod diferit pentru a finaliza treaba.

Lucrul cu browsere Mozilla și non-Microsoft

Dacă Internet Explorer nu este browserul dvs. sau dacă scrieți cod pentru browsere non-Microsoft, aveți nevoie de cod diferit. De fapt, aceasta este linia simplă pe care ați văzut-o în:

var xmlHttp = nou obiect XMLHttpRequest; .

Această linie mult mai simplă creează un obiect XMLHttpRequest în Mozilla, Firefox, Safari, Opera și aproape în orice browser non-Microsoft care acceptă Ajax sub orice formă sau aromă.

O asociere

Vrem să sprijinim toate browsere. Cine vrea să scrie o aplicație care funcționează doar în Internet Explorer sau o aplicație care funcționează doar în toate celelalte browsere? Și mai rău, vrei să-ți scrii cererea de două ori? Desigur că nu! Deci, să combinăm suportul pentru Internet Explorer și pentru alte browsere. Iată codul care face asta.

Lista 4. Crearea unui obiect XMLHttpRequest pentru toate browserele

/* Creați un nou obiect XMLHttpRequest pentru a vorbi cu serverul Web */ var xmlHttp = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try ( xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); ) catch (e) ( try ( xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); ); ) catch (e2) ( xmlHttp = fals; ) ) @end @*/ if (!xmlHttp && typeof XMLHttpRequest != „nedefinit”) ( xmlHttp = nou XMLHttpRequest(); )

Pentru moment, ignorați comentariile și etichetele obscure precum @cc_on ; acestea sunt comenzi speciale ale compilatorului JavaScript pe care le vom acoperi în detaliu în următorul meu articol, care va fi totul despre XMLHttpRequest . Baza acestui cod poate fi împărțită în trei pași:

1. Creați o variabilă xmlHttp pentru a face referire la obiectul XMLHttpRequest pe care îl veți crea.
2. În blocul try, creați un obiect în browserele Microsoft:
   • În blocul try, creați un obiect folosind obiectul Msxml2.XMLHTTP.
   • Dacă aceasta nu reușește, în blocul try, creați un obiect folosind obiectul Microsoft.XMLHTTP.
3. Dacă xmlHttp încă nu este setat, creați un obiect pentru alte browsere.

La sfârșitul acestui proces, xmlHttp trebuie să se refere la un obiect XMLHttpRequest valid, indiferent de browserul pe care îl folosește utilizatorul.

Câteva cuvinte despre protecție

Ce zici de protecție? Browserele moderne oferă utilizatorilor posibilitatea de a crește securitatea, de a dezactiva tehnologia JavaScript și de a dezactiva multe setări în browserele lor. În aceste situații, codul dumneavoastră probabil nu va funcționa în nicio circumstanță. Pentru situații de genul acesta, trebuie să rezolvi problemele cu eleganță - există cel puțin un articol despre asta și unul pe care îl voi scrie mai târziu (probabil va fi o serie lungă, dar nu-ți face griji - vei fi stăpânit totul înainte de final). din această serie de articole). Între timp, scrieți cod robust, dar nu perfect, ceea ce este grozav pentru a învăța Ajax. Veți reveni la un cod mai bun mai târziu.

Cerere/răspuns în lumea Ajax

Deci, sunteți deja familiarizat cu Ajax și aveți o înțelegere de bază a obiectului XMLHttpRequest și a modului de creare a acestuia. Dacă citești cu atenție, chiar realizezi că tehnologia JavaScript este cea care vorbește cu orice aplicație Web de pe server, nu cu formularul tău HTML, pe care l-ai trimis direct.

Ce ne-a lipsit? Cum să utilizați de fapt XMLHttpRequest. Deoarece acesta este un cod critic pe care îl veți folosi în unele forme în toata lumea aplicația dvs. Ajax, să aruncăm o privire rapidă la cum arată modelul de bază de solicitare/răspuns Ajax.

Executarea unei cereri

Ai noul tău obiect minunat XMLHttpRequest; hai sa-l punem in miscare. În primul rând, vom avea nevoie de o metodă JavaScript pe care pagina dvs. Web o poate apela (de exemplu, când utilizatorul introduce text sau selectează o opțiune dintr-un meniu). Apoi, trebuie să urmați același model de bază în aproape toate aplicațiile dvs. Ajax:

1. Obțineți câteva date dintr-un formular web.
2. Creați o adresă URL de conexiune.
3. Deschideți o conexiune la server.
4. Setați o funcție pentru server care să fie executată după răspunsul său.
5. Trimite o cerere.

Lista 6. Gestionarea răspunsului de la server

funcția updatePage() ( dacă (xmlHttp.readyState == 4) (var răspuns = xmlHttp.responseText; document.getElementById("zipCode").value = răspuns; ) )

Din nou, codul nu este dificil sau complex. Așteaptă până când serverul îl apelează cu starea gata dorită și apoi folosește valoarea pe care o returnează serverul (în acest caz codul poștal pentru oraș și statul introdus de utilizator) pentru a seta un alt câmp de formular. Ca urmare, câmpul zipCode apare în mod neașteptat cu un cod poștal, dar utilizatorul nu a făcut niciodată clic pe buton! Acesta este comportamentul aplicației desktop, despre care vorbeam mai devreme. Eficiență, un sentiment de dinamism etc., și toate cu un mic cod Ajax.

Este posibil ca cititorii atenți să fi observat că câmpul zipCode este un câmp de text normal. După ce codul poștal este returnat de server și metoda updatePage() setează acest câmp la valoarea codului poștal oraș/stat, utilizatorii Mai suprascrie această valoare. Acest lucru se face intenționat din două motive: pentru a păstra acest exemplu simplu și pentru a vă arăta că uneori doriți ca utilizatorii să poată trece peste valorile returnate de server. Ține cont de ambele puncte; sunt importante în designul bun al interfeței cu utilizatorul.

Interceptarea în formularele web

Ce ne mai rămâne? În esență, nu mult. Aveți o metodă JavaScript care colectează formularul introdus de utilizator, o transmite serverului, oferă o altă metodă JavaScript pentru a gestiona răspunsul și chiar setează valoarea câmpului atunci când sosește acel răspuns. Tot ce a mai rămas cu adevărat este apel această primă metodă și începe procesul complet. Ați putea, evident, să adăugați un buton la formularul dvs. HTML, dar acesta este 2001 vechi, nu? Să folosim puterea tehnologiei JavaScript, așa cum se arată în .

Lista 7. Pornirea procesului Ajax

Oraș: onChange="callServer();" />

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

Cod postal:

Dacă arată ca o altă bucată de rutină, într-o oarecare măsură, cod - ai dreptate, este! Când utilizatorul introduce o nouă valoare pentru oricare dintre câmpurile oraș sau stat, metoda callServer() este declanșată și începe funcția Ajax. Simți că începi să înțelegi esența lucrurilor? Amenda!

In cele din urma

În acest moment, este posibil să nu fii pregătit să ieși și să scrii prima ta aplicație Ajax, cel puțin nu până când nu ai explorat . Cu toate acestea, puteți începe deja să înțelegeți ideea de bază despre cum funcționează astfel de aplicații și ce este obiectul XMLHttpRequest. În articolele viitoare, veți afla despre acest obiect, cum să controlați interacțiunile JavaScript-la-server și să lucrați cu formulare HTML și chiar să înțelegeți DOM.

Deocamdată, alocați timp pentru a vă gândi cât de puternice pot fi aplicațiile Ajax. Imaginați-vă un formular Web care răspunde nu numai când faceți clic pe un buton, ci și atunci când introduceți date într-un câmp, când selectați o opțiune dintr-o listă de opțiuni și chiar și atunci când mutați cursorul pe ecran. Gândește-te la ce înseamnă cu adevărat cuvântul asincron. Gândiți-vă la codul JavaScript care se execută și neaşteptândîn timp ce serverul returnează răspunsuri la solicitările sale. Cu ce ​​probleme te poti confrunta? Care sunt lucrurile la care trebuie să fii atent? Și cum se va schimba designul formularului pentru a se adapta acestei noi abordări de programare?

Petrecerea unui timp pe aceste puncte vă va oferi mai multă valoare decât obținerea unui cod pe care îl puteți copia și lipi în aplicația dvs. fără a-l înțelege cu adevărat. În articolul următor, vei pune aceste idei în practică; Voi oferi detalii despre codul de care aveți nevoie pentru ca aplicațiile similare să funcționeze. Până atunci, bucură-te de puterea lui Ajax.

Resurse

Invata sa

• Articol original.
• Adaptive Path este una dintre companiile lider în domeniul designului de interfețe cu utilizatorul. Puteți obține o mulțime de informații despre Ajax răsfoind paginile lor. (developerWorks, octombrie 2005) demonstrează cinci moduri de a serializa datele în aplicațiile Ajax. (O"Reilly Media, Inc., februarie 2006) preia ideile evidențiate în acest articol și în întreaga serie și vi le aduce (și multe altele) într-un format inovator și de ultimă oră.
• JavaScript: Ghidul complet Ediția a 4-a (O"Reilly Media, Inc., noiembrie 2001) este o resursă excelentă pentru JavaScript și pentru lucrul cu pagini Web dinamice.

Discuta

• Ajax.NET Professional este un blog grozav despre toate lucrurile despre Ajax.
• Alăturați-vă comunității developerWorks participând la .

Viața noastră este volubilă. Totul în această lume evoluează și se schimbă. Inclusiv realitatea virtuală. Și unul dintre cuvintele cu care sunt legate aceste modificări este AJAX. AJAX a fost deja auzit nu numai de programatorii web, ci și de utilizatorii obișnuiți. Ce se află cu adevărat în spatele acestei abrevieri magice? Cum să-l folosești pe site-ul tău? Acestea sunt întrebările la care voi încerca să răspund în acest articol.

Am auzit prima dată despre AJAX în această primăvară. Imediat m-am interesat de această tehnologie și, așa cum ar trebui să fie în astfel de cazuri, am plecat în căutarea unor articole care să-mi răspundă la întrebări: „Ce este? Cum funcționează? Și care sunt avantajele? De ce am nevoie. pentru a instala suplimentar pe server/client pentru a lucra cu AJAX? Cum îl pot folosi pe site-ul meu?". După ce am citit o duzină de articole, am primit răspuns doar la primele două întrebări, dar la restul nu l-am găsit nicăieri. Și abia după ce am citit mai multe publicații în limba engleză, am înțeles în sfârșit ce se întâmplă. Acest lucru m-a determinat să scriu acest articol.

În primul rând, articolul se adresează persoanelor instruite care scriu programe pentru Internet și sunt familiarizate cu termeni precum „obiect”, „metodă”, „proprietăți”. Cu toate acestea, poate fi, de asemenea, parțial util celor care sunt pur și simplu interesați de această problemă. Lista de referințe conține lista necesară de link-uri, folosindu-se destul de mult de a stăpâni tehnologia de la zero.

Pe parcursul prezentării, termenul „browser” va însemna browsere: Internet Explorer 5.0+, Safari 1.3 și 2.0+, Netscape 7+, Opera 8.5+, Mozilla Firefox (plus înseamnă această versiune și mai nouă). Dacă vorbim despre alte versiuni, acest lucru va fi menționat separat "Ce este? Cum funcționează și care sunt avantajele?"

Pentru a înțelege beneficiile AJAX, trebuie să știți cum funcționează aplicațiile web în prezent. Și lucrează pe tehnologia client-server (Fig. 1).

Utilizatorul deschide o pagină în browser pagină. Pagina are hyperlinkuri care duc la alte pagini. Când faceți clic pe oricare dintre ele, browserul trimite o solicitare URL la serverul la care este legată această legătură. Dacă în natură nu există un server asociat cu acest link (de exemplu, când introduceți adresa URL în bara de adrese, ați scris greșit numele resursei) sau există probleme de conectare la Internet, atunci browserul va genera o pagină similară la cel din imagine (asa arata in Opera):

Dacă serverul există, dar nu există niciun document specificat în cerere, serverul însuși va crea o pagină HTML cu o descriere a erorii. De exemplu, ar putea fi binecunoscuta eroare 404 (documentul nu a fost găsit). Sau, dacă totul este corect, serverul va returna o nouă pagină ca răspuns. În orice caz, o pagină nouă va fi încărcată în browser. pagina noua, chiar dacă în comparație cu cel vechi, doar câteva cuvinte s-au schimbat pe el. Un dezavantaj destul de semnificativ al acestei tehnologii. În plus, munca se desfășoară în mod sincron. Adică, după ce browserul a trimis o solicitare către server, așteaptă un răspuns de la acesta și nu se va face nimic până la primirea răspunsului. Și uneori răspunsul și încărcarea unei pagini noi pot dura prea mult. Atât de mult încât utilizatorul nu poate aștepta ca pagina să se încarce și pur și simplu o închide. Prin urmare, programatorii web recurg la unele trucuri.

PROPRIETATI:

numai citire onreadystatechange funcţie

Specifică o funcție de apel invers care va fi apelată de fiecare dată când are loc o modificare. readyState proprietate. În ciuda faptului că funcția este apelată, parametrii nu îi pot fi transferați. Dar mai multe despre asta mai târziu în exemplu.

numai citire readyState întreg

Starea cererii. Poate lua valori:

• 0 - nu neinițializat(neinițializat), metodă deschis() nu a fost încă chemat;
• nu este încă sunat;
• 2 - încărcat(încărcat), metodă trimite() a fost apelat și anteturile/starea răspunsului (proprietatea stare) primit;
• 3 - interactiv(interactiv), se primesc date care sunt disponibile prin proprietate text de răspuns;
• 4 - efectuat(finalizat), ca răspuns la cerere, nu numai că au fost primite toate anteturile și starea, ci toate datele de la server au fost primite, răspunsul este finalizat.

numai citire text de răspuns şir

Răspunsul serverului în text simplu. Doar lectură.

numai citire răspunsXML obiect

Răspunsul serverului ca obiect de document DOM. Folosit dacă răspunsul serverului este un document XML valid. Dacă documentul nu este valabil, datele nu au fost primite sau nu au fost încă trimise, atunci proprietatea este NULL. Doar lectură.

numai citire stare şir

Starea răspunsului. De exemplu: 200 (OK), 404 (documentul nu a fost găsit), 503 (supraîncărcare temporară a serverului).

METODE:

gol intrerupere de sarcina()

Terminați o solicitare HTTP sau primiți date. Șterge toate proprietățile obiectului care sunt setate la valorile lor inițiale. Metoda este utilă împreună cu un cronometru, când după ce a trecut un anumit timp de la solicitare (plecare în timeout), un răspuns de la server nu a fost primit.

şir getAllResponseHeaders()

Returnează toate anteturile de răspuns ale serverului ca șir formatat. Fiecare titlu nou începe pe o linie nouă.

şir getResponseHeader(şir antet)

Returnează un antet numit antet.

gol deschis(şir metodă, şir uri, [ boolean asincron])

Pregătește o cerere către uri folosind metoda metodei (POST sau GET) specificând modul asincron, modul asincron sau nu. Ca urmare a apelării la proprietate readyState devin egal cu 1.

gol trimite(şir date)

Inițiază o solicitare către server. Solicitarea trimite date de date.

gol setHeader(şir antet, şir valoare)

Setează antetul numit antet la valoarea valorii. Înainte de a utiliza această metodă, nu uitați să sunați deschis()!

„Cum îl poți folosi pe site-ul tău?”

Acum că avem nu numai cunoștințele teoretice necesare, ci și o idee despre ce se bazează practic AJAX, putem începe să scriem aplicația noastră. În continuare, dau un exemplu din momentul în care problema a fost formulată și până la implementarea sa integrală, sub forma unei aplicații, explicând unele dintre subtilitățile de pe parcurs.

Deci, avem o sarcină: trebuie să implementăm o bază de date (DB) de drivere pentru diferite dispozitive. În același timp, baza de date este atât de mare încât nu are sens să o trimiteți la aplicația client și să faceți o selecție din ea folosind JavaScript. Din cauza unei modificări a unei valori de pe pagină, nu este de dorit să o supraîncărcați. Personal, folosesc PHP pentru scripturi de server pentru a implementa această sarcină și folosesc un fișier XML pentru implementările de baze de date.

Aleg următoarea structură a bazei de date:

Lista de fișiere DB date.xml: ATI 9600 128 DDR (128 de biți) ATI 9600 256 DDR (128 de biți) ATI 9600XT 256 DDR (128 de biți) ATI X800GTO 256 DDR (256 de biți) ATI X1300 512 DDR (1286 de biți) ATI DDR (1286860) 256 de biți DDR (1286 600 de biți) DDR (256 biți) ATI X1300Pro 256 DDR (128 biți) ATI X1600Pro 256 DDR (128 biți) ATI X1800GTO 256 DDR (256 biți) ATI X1600Pro 256 DDR (128 biți) ATI X1900Pro 256 DDR (128 biți) ATI X1900Pro 256 DDR (128 biți) ATI X1900GTO 256 DDR (128 biți) ATI X1900XT 512 DDR (256 biți) ATI X1900XTX 512 DDR (256 biți) ATI X800 SilentPipe 128 DDR (256 biți) Nvidia 6600GT 128 DDR (128 biți) NVidia 6600GT 6600GT PCI-A850 DDR1 PCI-A850 DDR1 (256 biți) 256 de biți) ATI X800GTO 256 DDR (128 de biți) Audigy 2 6.1 Audigy 2 ZS 7.1 X-Fi Platinum Audiophile 192 Revolution 5.1 Audiophile Audiophile Fast Track PIXMA iP 90 PIXMA iP4200 PIXMA iP4200 PIXMA iP6600D Stylus Color C8800D Color C8800D Stylus Color C8800D kJet 5443 Photo Smart 385 Fotografie cu laser LBP2900 Fotografie cu laser LBP3300 ML 1615 ML 2015 LaserJet 1018 LaserJet 2420 LaserJet 2420DN 4200F LiDE500F LiDE60 Perfecțiune Perfecțiune Perfecțiunea Pa30189000000F

Cum caută o persoană în această bază de date? Cel mai probabil, ar trece de la elementul rădăcină prin arborele documentului până când ar găsi un link în ramura necesară sau se va asigura că driverul pentru acest dispozitiv nu se află în baza de date. De asemenea, vom face același lucru, folosind expresii în limbajul XPath pentru a găsi nodul sau setul de noduri dorit.

Lista de formulare pentru transmiterea datelor index.htm:

placa video placa de sunet imprimanta scanner

Formularul are două variabile: caleși steag. Prima stochează calea solicitată, care este trimisă la server. Deoarece există deja un element în formular, această variabilă are deja o valoare inițială. A doua variabilă este folosită pentru a indica script-ului serverului că un anumit element ar trebui extras din document. dispozitiv. În plus, formatul datelor returnate de la server se va schimba.

Acum să ne uităm la motorul JS. Toate funcțiile părții client sunt colectate într-un script ajax.js: y = obiect nou(); funcția httpRequest() ( if (window.XMLHttpRequest) ( //creați un obiect pentru toate browserele, cu excepția IE requestObj = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( //for IE requestObj = new ActiveXObject("Msxml2. XMLHTTP "); dacă (!requestObj) ( requestObj = nou ActiveXObject ("Microsoft.XMLHTTP"); ); ); ); funcția sendRequest (url,date) ( httpRequest(); //definiți funcția de apel invers requestObj.onreadystatechange = responseServer; //pregătiți trimiterea datelor, readyState=1 requestObj.open("POST",url,true); / * T Deoarece datele sunt trimise prin metoda POST, serverul trebuie să trimită un antet care să-l informeze despre acest */ requestObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF- 8"); // trimiterea datelor către server requestObj.send(data); ); function responseServer() ( if (requestObj.readyState == 4) ( var status = requestObj.status; if (status == 200) ( addSelect(y); ) else if (status == 400) ( alert("Solicitare greșită) "); ) else if (starea == 500) ( alert("Eroare internă de server"); ) else if (starea == 503) ( var time = requestObj.getResponseHeader ("Reîncercați-După")*1000; alertă ( „Serverul este supraîncărcat. Solicitarea va fi repetată în: „+time+” secunde”); setTimeout(sendRequest(url,path),time); ) else (alertă(„Eroare de răspuns server”); ); ); ) ; funcția sendData(obj) ( var Elpath = document.form.path; var url = "index.php"; if (document.form.flag.value == "0") ( var cale = Elpath.value + "/" + obj.value; ) else ( var path = Elpath.value + "/Device["" + obj.value + ""]"; /* folosind metoda GET trimitem informații către script-ul serverului că un anumit element Device este necesar */ url = "index.php?flag=1"; ); //setează variabila de formă a căii la valoarea solicitării curente Elpath.value = cale; //codifică calea șirului transmis calea = "cale= "+encodeURIComponent(cale); y = obj; sendRequest (url,path); ); funcția addSelect(obj) ( //răspunsul serverului în text simplu var docTEXT = requestObj.responseText; obj.setAttribute("disabled",true); //creați elementul div var div = document.createElement("div"); // adăugați răspunsul serverului la div div.innerHTML = docTEXT;//adăugați răspunsul serverului div în arborele documentului document.form.appendChild(div); ); function reset() ( document.form.path.value="(!LANG://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"); };!}

După cum am spus, în funcția de proprietate onreadystatechange parametrii nu pot fi transmisi. Mai precis, nu poți trece parametri care sunt obiecte. Prin urmare, la început creăm o variabilă în care vom stoca o referință la obiectul care a apelat funcția. Deoarece această variabilă se află în domeniul de aplicare al variabilei globale, poate fi accesată din orice parte a programului. Acesta este de departe cel mai inteligent mod de a transmite parametrii de apel invers unei funcții de proprietate. onreadystatechange obiect.

Și acum vom analiza funcționarea motorului pas cu pas.

Când are loc un eveniment onblur(element Selectați focalizare pierdută) funcția este numită trimiteData(), care pregateste datele POST pentru trimiterea cererii. În plus, generează o expresie XPath în funcție de valoarea variabilei. steag=0(De exemplu, //Dispozitive/Plăci video) sau steag=1(De exemplu, //Dispozitive/Plăci video/AGP/Sapphire/Dispozitiv["ATI 9600XT 256 DDR (128 biți)"]).

Apoi numim funcția Trimite cerere(),în care trecem adresa URL a scriptului serverului, precum și o variabilă de tip șir, care conține date POST gata făcute. Și mai întâi creăm XMLHttpRequest obiect, referința la care este stocată într-o variabilă cerereObj. Funcţie httpRequest() este cross-browser și va funcționa în toate browserele.

Odată un apel de funcție httpRequest() Am făcut-o imediat când am încărcat pagina și nu a creat XMLHttpRequest un obiect. Dar după cum sa dovedit, acest lucru funcționează pentru toate browserele, cu excepția IE, care necesită de fiecare dată crearea unui nou obiect. Prin urmare, se face un apel la această funcție de fiecare dată înainte de trimiterea datelor.

După trimiterea datelor, browserul așteaptă un răspuns de la server. De fiecare dată când proprietatea se schimbă readyState va fi apelată funcția responseServer(). Dacă starea răspunsului a venit cu codul „200” (totul este în regulă), atunci funcția va fi apelată addSelect(), care va adăuga datele primite în DOM-ul documentului curent. Toate browserele vor aștepta un răspuns de la server. Cu toate acestea, după ceva timp (time-out), ei vor atribui forțat XMLHttpRequest.readyState = 4și nu mai așteptați un răspuns de la server. De exemplu, pentru Opera, valoarea timeout este de 10 secunde. Folosind alte stări, puteți adăuga un handler de erori la motor în răspunsurile serverului.

Funcţie addSelect() adaugă un alt nod la DOM-ul documentului curent div,în care plasează răspunsul de la server. S-ar putea întreba de ce este folosită proprietatea text de răspuns, dar nu răspunsXML? Cineva va dori cu siguranță să folosească această proprietate pentru a importa răspunsul serverului (și scriptul serverului trimite un document XML ca răspuns) direct în DOM-ul documentului. am avut aceeasi dorinta. Am vrut să import elementul rădăcină al fișierului XML trimis și toți descendenții acestuia folosind metoda importNode. Dar browserul a importat elementul fără copii, chiar dacă al doilea parametru al acestei metode a fost setat la Adevărat: importNode(Obiect importedNode,true). Prin urmare, implementarea imprecisă a acestei metode exclude utilizarea acesteia pentru moment.

S-a găsit o soluție echivalentă folosind innerHTML metoda elementului.

Acest lucru completează activitatea părții client. Funcția rămasă nerevizuită reset() este conceput pentru a readuce DOM-ul documentului la forma sa originală. Puteți realiza același lucru prin reîmprospătarea paginii cu F5, dar motorul AJAX este scris doar pentru a evita reîncărcările paginii. Prin urmare, toate elementele adăugate documentului de către script trebuie să fie eliminate și de către script.

Ca răspuns la cerere, scriptul server generează date XML de forma: childrenElementName_1 .... childrenElementName_1

Dacă nodul solicitat este numit dispozitiv, este returnat textul formatat normal. Scriptul serverului este scris în PHP V5 și nu va funcționa pe versiunile anterioare ale acestui interpret, deoarece extensia DOM a fost introdusă în acest limbaj doar din cea de-a cincea versiune și a înlocuit extensia DOM XML, a cărei interfață nu era conformă cu specificația. Acum să ne uităm la codul de script al serverului.

Lista de fișiere index.php :load("data.xml"); //creați un obiect XPath $DOMXPath = new DOMXPath($doc); $DOMNodeList = $DOMXPath -> interogare($_POST); //conform cererii, extragem elementul dorit $DOMNode = $DOMNodeList -> item(0); //creează un obiect document XML $replyXML = new DOMDocument("1.0", "windows-1251"); /* dacă flag nu este egal cu unu, atunci elementul curent nu este un element Device și este necesar să găsiți toate elementele descendente ale elementului DOMNode curent */ dacă ($_GET != 1) ( // obțineți o listă de toți descendenții elementului $childNodes = $DOMNode -> childNodes; /* Deoarece copiii pot fi nu numai elemente, ci și noduri, creăm o matrice de index care conține doar elemente descendente */ foreach ($childNodes ca $Node) (dacă ($Node->nodeType == 1) ( $ arrayNodes = $Node; ); ); //creați elementul rădăcină al documentului XML $root = $replyXML->createElement("select"); $optgroup = $replyXML ->createElement("optgroup"); /* dacă elementele- copiii nu sunt Device, atunci setăm atribute pentru elementul rădăcină și elementul său copil optgroup */ if ($arrayNodes -> nodeName != "Device") ( $root ->setAttribute(„nume”,$DOMNode->nodeName); $AttributeNode = $arrayNodes->getAttributeNode(„titlu”); $optgroup->setAttribute(„label”,$AttributeNode->valoare); $root-> setAttribute("onblur","sendData(this) "); ) else ( /* în caz contrar, creați un atribut cu cod JS care va seta variabila din forma flag la „1” */ $root->setAttribute("onblur", "document.form.flag.value=1;sendData" (acest );"); ); /* buclă creând noi elemente de opțiune pentru fiecare element copil; câți copii, câte elemente */ pentru fiecare ($arrayNodes ca $Node) ( $opțiune = $replyXML->createElement("opțiune"); $setNode = $Node->nodeName; if ($Node->nodeName == „Dispozitiv”) ( $setNode = $Node->nodeValue; ); $opțiune-> nodeValue = $setNode; $opțiune->setAttribute(„valoare”, $setNode); $optgroup->appendChild($opțiune); ) ; //inserați elementele rezultate în documentul XML $replyXML->appendChild($root); $root->appendChild($optgroup); /* dacă flag=1, atunci elementul curent este un element Device; elementele descendente nu sunt necesare, dar sunt necesare atribute ale elementului curent */ ) else ( //creează elementul rădăcină $root = $replyXML->createElement("pre"); $DOMText = new DOMText(" URL OS") ; $root -> appendChild($DOMText); $NamedNodeMapAttr = $DOMNode->atribute; $i = 0; /* Buclă care găsește toate atributele elementului Device și pentru fiecare atribut creează un șir de date care conține conținutul de referință * / while (($NodeAttr = $NamedNodeMapAttr ->item($i))! = null) ( dacă ($NodeAttr->nume != „id”) ( $DOMText = text DOMT nou (" $NodeAttr->nume "); $DOMElement = $replyXML->createElement("a"); $DOMElement - > setAttribute("href",$NodeAttr->valoare); $DOMElement -> nodeValue = $NodeAttr->valoare; $root -> appendChild($DOMText); $root -> appendChild($DOMElement); ); $i++ ; $NodeAttr = $NamedNodeMapAttr->item($i); ); $replyXML->appendChild($root); ); //trimite răspunsul către client echo $replyXML->saveHTML(); ?>