Ce este Ajax. AJAX: ce este, impactul său asupra SEO, avantajele și dezavantajele tehnologiei. Indexarea AJAX de către motoarele de căutare

În zilele noastre pe Internet există o foarte dezvoltare activă(și chiar utilizarea) noilor tehnologii. O astfel de tehnologie este AJAX.

Ce este 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. perioadă lungă de timp, iar AJAX este o sinteză a tehnologiilor indicate. AJAX este cel mai adesea asociat cu termenul Web 2.0 și este prezentată ca cea mai recentă aplicație Web.

Când utilizați AJAX, nu este nevoie să reîmprospătați întreaga pagină de fiecare dată, deoarece doar o anumită parte a acesteia este actualizată. Acest lucru 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 acele date sunt schimbate cu serverul. De asemenea, trebuie să înțelegeți că nu toate browserele acceptă AJAX (versiuni mai vechi de browsere și browsere de text). Plus Javascript poate fi dezactivat de către utilizator. Prin urmare, nu trebuie să abuzăm de utilizarea tehnologiei și să apelați la metode alternative de prezentare a informațiilor pe un site Web.

Să rezumăm avantajele AJAX:

• Abilitatea de a crea o interfață web convenabilă
• Interacțiune activă cu utilizatorul
• Ușurință în utilizare

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 și, de asemenea, 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 metodă este o cerere GET. În această solicitare, accesați un document pe server, trecându-i argumente prin adresa URL în sine. În acest caz, pe partea clientului ar 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 schimbul 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, lucrând cu o bază de date) și să le trimită înapoi clientului. De exemplu, pentru a solicita informații de la server, puteți utiliza o solicitare GET obișnuită care trece mai mulți parametri mici și pentru a actualiza informații sau adăuga informație nouă Va trebui să utilizați o solicitare POST, deoarece vă permite să transferați cantități mari 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 necesare. În acest moment, utilizatorul ar trebui să fie anunțat că are loc un fel de schimb de date, altfel utilizatorul va crede că s-a întâmplat ceva greșit și poate părăsi site-ul sau va reapela funcția pe care o consideră „înghețată”. 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 acest mod de actualizare a paginii.

Răspunsul de la server poate fi nu numai XML, după cum sugerează numele tehnologiei. Pe lângă XML, puteți primi răspunsul în text simplu sau JSON (Javascript Object Notation). Dacă s-a primit un răspuns în text simplu, apoi poate fi afișat imediat într-un container pe pagină. Când se primește un răspuns sub formă de XML, documentul XML primit este de obicei procesat pe partea clientului, iar datele sunt convertite în (X)HTML. Când primește un răspuns în format JSON, clientul trebuie doar să execute codul primit (funcția de evaluare a Javascript) pentru a obține un obiect Javascript cu drepturi depline. Dar aici trebuie să fiți atenți și să țineți 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, ar trebui să îl verificați și să îl procesați cu atenție. Există o astfel de practică precum o solicitare „inactivă”, în care nu se primește niciun răspuns de la server, doar datele de pe partea serverului sunt modificate.

ÎN browsere diferite 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 Camel ca și alte funcții Javascript. Aveți grijă când le folosiți.

abort() - anulează cererea curentă către server.

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

getResponseHeader("header_name") - obține antetul specificat.

open("request_type","URL","asynchronous","user_name","parola") - inițializarea unei cereri către server, specificând metoda solicitării. Tipul cererii și adresa URL sunt parametri obligatorii. Al treilea argument este o valoare booleană. De obicei, adevărat este întotdeauna specificat sau nu este specificat deloc (prestabilit este adevărat). Al patrulea și al cincilea argument sunt folosite pentru autentificare (este foarte nesigur să stocați datele de autentificare într-un script, deoarece scriptul poate fi vizualizat de orice utilizator).

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

setRequestHeader("header_name","value") - setează valorile antetului cererii.

Proprietățile obiectului XMLHttpRequest

onreadystatechange este una dintre cele mai importante proprietăți ale obiectului XMLHttpRequest. Folosind această proprietate, este specificat un handler care este apelat ori de câte ori starea unui obiect se modifică.

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

responseText — reprezentarea răspunsului serverului ca text simplu (șir).

responseXML este un obiect document compatibil DOM primit de la server.

stare — starea răspunsului de la server.

statusText — reprezentare text 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 fost 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 în care se află procesul de schimb 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, trebuie să utilizați următoarea expresie:

var Request = new XMLHttpRequest();

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

var Request = new ActiveXObject("Microsoft.XMLHTTP");

var Request = new ActiveXObject("Msxml2.XMLHTTP");

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

funcția CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( // Browsere compatibile cu Gecko, Safari, Konqueror Request = nou XMLHttpRequest(); ) else if (window.ActiveXObject) ( //Internet Explorer try ( Request) = new ActiveXObject("Microsoft.XMLHTTP"); catch (CatchException) (Request = new ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Request) ( alert("Cannot create XMLHttpRequest"); ) return Request;

După toate acestea, puteți crea acest obiect și nu vă faceți griji cu privire la performanță browsere populare. Dar puteți crea un obiect în locuri diferite. Dacă îl creați global, atunci o singură cerere către server va fi posibilă la un anumit moment în timp. 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 către server

Algoritmul de solicitare a serverului arată astfel:

• Verificarea existenței XMLHttpRequest.
• Inițializarea unei conexiuni 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 în funcționalitate funcțiile 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 care gestionează răspunsul de la server */ function SendRequest(r_method , r_path, r_args, r_handler) ( //Creați o cerere var Request = CreateRequest(); //Verificați existența cererii din nou dacă (!Request) ( return; ) //Atribuiți o cerere personalizată handler Request.onreadystatechange = function() ( // Dacă schimbul de date este finalizat dacă (Request.readyState == 4) ( //Treceți controlul utilizatorului handler r_handler(Request); ) ) //Verificați dacă trebuie să faceți 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); .toLowerCase() == "post") ( //Dacă aceasta este cerere POST //Setați antetul Request.setRequestHeader ("Content-Type","application/x-www-form-urlencoded; charset=utf-8) "); //Trimite cererea 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, haideți să scriem o funcție care va primi conținutul unui fișier pe server și îl va scoate într-un container.

funcția ReadFile(nume fișier, container) ( //Creează o funcție handler 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 în esență 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() ( //Dacă schimbul de date este finalizat dacă (Request.readyState == 4) ( //Trimite controlul către handler-ul utilizatorului r_handler(Request); ) else ( //Notifică 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) ( //Trimite controlul către gestionarea utilizatorului r_handler(Request); ) altfel ( // Notificăm utilizatorul cu privire la o eroare care a apărut) ) else ( //Anuntăm utilizatorul despre descărcare ) ) ...

Opțiuni de răspuns ale serverului

Puteți primi mai multe tipuri de date de la server:

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 folosind funcțiile DOM și să prezentați rezultatul folosind HTML.

JSON este notația obiect Javascript. Cu ajutorul lui, puteți reprezenta un obiect ca șir (aici puteți da 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 complet și pentru a efectua operațiunile necesare asupra acestuia. Vă rugăm să rețineți că astfel de transmisii și execuții de date nu sunt sigure. Trebuie să urmăriți ceea ce urmează să fie executat.

Acest articol descrie AJAX la nivel de caracteristică și exemplu. Sunt luate în considerare caracteristicile interacțiunii asincrone și exemplele de utilizare, dar cu un minim de detalii tehnice.

Sper că va fi util pentru a înțelege ce este AJAX și pentru ce este folosit.

Ce este AJAX? Exemplu de implementare.

AJAX, sau mai lung, A sincron J avascript A nd X ml este o tehnologie de interacțiune cu serverul fără a reîncărca paginile.

Datorită acestui fapt, timpul de răspuns este redus, iar aplicația web amintește mai mult de un desktop în ceea ce privește interactivitatea.

Tehnologia AJAX, așa cum indică prima litera A din numele său, este asincronă, adică browserul, după ce a trimis o solicitare, poate face orice, de exemplu, să afișeze un mesaj
despre așteptarea unui răspuns, derularea paginii etc.

Iată codul butonului din exemplul de mai sus:

Când se dă clic, apelează funcția de vot, care trimite o cerere către server, așteaptă un răspuns și apoi afișează un mesaj despre aceasta în div-ul de sub butonul:

Răspunsul serverului va fi aici

Pentru a face schimb de date cu serverul, se folosește un obiect special XmlHttpRequest, care poate trimite o solicitare și poate primi un răspuns de la server. Puteți crea un astfel de obiect încrucișat, de exemplu, astfel:

Funcția getXmlHttp())( var xmlhttp; încercați ( xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); ) catch (e) ( încercați ( xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")); ) catch (E) ( xmlhttp = false;) ) if (!xmlhttp && typeof XMLHttpRequest!="undefined") ( xmlhttp = new XMLHttpRequest(); ) return xmlhttp;

Puteți citi mai multe despre detaliile implementării AJAX folosind XmlHttpRequest și alte transporturi în secțiunea despre comunicarea cu serverul.

Nu ne vom opri aici și trecem direct la funcția de vot:

// cod de vot javascript din funcția de exemplu vote() ( // (1) creează un obiect pentru o solicitare către server var req = getXmlHttp() // (2) // se întinde lângă butonul // va afișa progresul execuției var statusElem = document.getElementById("vote_status") req.onreadystatechange = function() ( // onreadystatechange este activat când răspunsul serverului este primit dacă (req.readyState == 4) ( // dacă cererea s-a terminat se execută statusElem.innerHTML = req.statusText // arată starea ( Nu a fost găsit, OK..) if(req.status == 200) ( // dacă starea este 200 (OK) - dați un răspuns alertei utilizator ("Răspuns server: "+req.responseText); ) // aici sunteți poate adăuga altceva cu cererea de gestionare a erorilor ) ) // (3) setați adresa de conectare req.open("GET", "/ajax_intro/vote.php", true); // obiectul de cerere este pregătit: adresa este specificată și funcția onreadystatechange este creată // pentru a procesa răspunsul serverului // (4) req.send(null); // trimite o cerere // (5) statusElem.innerHTML = "Se așteaptă răspunsul serverului..." )

Fluxul de execuție folosit de vot este destul de tipic și arată astfel:

Funcția creează un obiect XmlHttpRequest

atribuie handler-ul de răspuns al serverului la onreadystatechange

deschide conexiunea deschisă

trimite o solicitare folosind apelul de trimitere (răspunsul serverului este primit de funcția onreadystatechange declanșată asincron)

arată vizitatorului un indicator de stare a procesului

Managerul de server căruia îi este adresată cererea AJAX (în exemplu, acesta este vote.php) nu diferă în esență de pagina obisnuita. Solicitarea AJAX trimisă de XmlHttpRequest nu diferă de o solicitare obișnuită.

Doar că textul pe care serverul îl returnează nu este afișat ca HTML, ci este citit și procesat de funcția onreadystatechange.

Sensul AJAX este de a integra tehnologii

Tehnologia AJAX folosește o combinație de:

• (X)HTML, CSS pentru prezentarea și stilizarea informațiilor
• Model DOM, operațiuni pe care sunt efectuate prin javascript pe partea clientului pentru a oferi afișare dinamică și interacțiune cu informații
• XMLHttpRequest pentru comunicare asincronă cu un server web. În unele cadre AJAX și în unele situații, se folosește o etichetă IFrame, SCRIPT sau alt transport similar în locul XMLHttpRequest.
• JSON este adesea folosit pentru schimbul de date, dar orice format va funcționa, inclusiv HTML bogat, text, XML și chiar unele EBML

O aplicație tipică AJAX constă din cel puțin două părți.

Primul rulează în browser și este de obicei scris în JavaScript, iar al doilea este pe server și este scris, de exemplu, în Ruby, Java sau PHP.

Datele sunt schimbate între aceste două părți prin XMLHttpRequest (sau alt transport).

Ce pot face cu AJAX?

Scopul AJAX este interactivitatea și timpul de răspuns rapid.

Comenzi mici

În primul rând, AJAX este util pentru elementele mici asociate cu acțiunile de bază: adăugare în coș, abonare etc.

Încărcarea dinamică a datelor de pe server.

De exemplu, un arbore ale cărui noduri sunt încărcate pe măsură ce se extind.

La momentul apariției, era singurul deschis serviciu poștal folosind AJAX pentru următoarele caracteristici.

• Verificarea erorilor de introducere a formularului ÎNAINTE de a trimite

  Numele de utilizator este trimis la server, iar rezultatul verificării este returnat pe pagină.

• Descărcare „instantanee”.

  Browserul contactează serverul doar pentru date, în loc să actualizeze întreaga interfață greoaie

• „Livrarea” automată a scrisorilor într-un folder deschis

  Din când în când se trimite o solicitare către server și dacă sosesc scrisori noi, acestea apar în browser.

• Completare automată

  Este suficient să introduceți primele litere ale numelui destinatarului, iar restul sunt completate automat, ca în aplicațiile desktop.

Rezultat: popularitate pe scară largă, cerere mare de conturi de la deschidere.

Model sincron VS model asincron

În programarea convențională, toate operațiile sunt sincrone, adică sunt efectuate una după alta.

Relativ vorbind, procedăm astfel:

arunca o undiță

aşteptând să muşte

bit - porniți strângerea tijei de filare

Cu abordarea asincronă:

Atârnăm un detector special de mușcături pe undiță, îi cerem să tragă de undiță când mușcă

arunca o undiță

facem alte lucruri

se declanșează detectorul de mușcături, declanșând retragerea tijei de filare

Adică, în cazul sincron, undița ne atrage constant atenția. Prinderea peștelui este un proces secvenţial.

În versiunea asincronă, am setat mai întâi programul pentru ce să facem când mușcăm, apoi am coborât undița pentru a prinde și am trecut la alte lucruri.
De exemplu, am instalat încă 5 astfel de undițe.

Programarea asincronă este mai dificilă decât programarea sincronă și la început este neobișnuită, deoarece anticipat ce va funcționa este dat după.
Adică, programul „ce să faci când mușcă” trebuie setat înainte de a se produce mușcătura și, în general, nu se știe dacă există pești în rezervor.

Există tehnici care ușurează programarea asincronă, de exemplu, obiectul Deferred (Twisted, Dojo, Mochikit), dar acest lucru va fi discutat într-un articol separat.

Model sincron și asincron în AJAX

Să revenim la oile noastre: browserul, serverul și, să zicem, baza de date.

În modelul sincron, browserul trimite o cerere către server și se blochează, așteptând ca acesta să finalizeze totul. munca necesara. Serverul execută interogări către baza de date, împachetează răspunsul în formatul necesar și îl trimite. Browser. După ce a primit răspunsul, apelează funcția de afișare.

Toate procesele sunt efectuate secvenţial, unul după altul.

Întârzierile rețelei sunt incluse în timpul de așteptare, indicat cu gri în diagramă.

Utilizatorul nu poate face nimic altceva pe aceeași pagină în timp ce se fac schimb de date sincrone.

În modelul asincron, cererea este trimisă („momeala este setată”) și puteți trece la altceva. Când solicitarea este finalizată ("becked") - este lansată în avans
o funcție pregătită de programator („pull up the spinning rod”) pentru afișarea unui mesaj de server.

Aici serverul anunță imediat browserul că cererea a fost acceptată pentru procesare și o eliberează pentru procesare. munca in continuare. Când răspunsul este gata, serverul îl va redirecționa, iar funcția de afișare corespunzătoare va fi apelată în browser, dar în timp ce acest răspuns este generat și trimis, browserul este liber.

Utilizatorul poate scrie comentarii, completa și trimite un formular etc.: Se pot face noi solicitări asincrone.

Modelul asincron se caracterizează printr-un răspuns aproape instantaneu la acțiunile utilizatorului, astfel încât aplicația să se simtă comodă și rapidă.

Din cauza acestui decalaj între acțiune și rezultatul real, aplicația devine mult mai susceptibilă la erori.

Mai ales în cazul mai multor solicitări asincrone simultane, trebuie să aveți grijă de ordinea de execuție și răspuns (condiții de cursă) și, în cazul unei erori, lăsați aplicația într-o stare consecventă.

Caracteristicile modelului asincron

• Greu de implementat
  • Capacități insuficiente de browser (javascript)
  • Modelul asincron este mai dificil de depanat
• Condiții de cursă
  • Secvență de execuție nedefinită
  • Puteți face multe sarcini simultane ("undițe"), dar sarcina începută prima se poate termina ultima.
• Reacția este imediată, dar nu se știe care va fi rezultatul. Gestionarea erorilor este mai complicată
  • Erori de comunicare - deconectare etc.
  • Erori ale utilizatorului - de exemplu, nu au existat suficiente privilegii
• Controlul integrității (antibug)
  • De exemplu, editorul a trimis o solicitare asincronă pentru a șterge o ramură de copac. Adăugarea la acesta trebuie dezactivată până la sosirea răspunsului serverului. Dacă dintr-o dată nu au fost suficiente privilegii, atunci operațiunea a eșuat.
• Interactivitate
• Interfață rapidă

Sunt doar două avantaje, dar ce avantaje! Jocul merită lumânarea.

Trageți și plasați asincron.

Uneori, pentru operațiuni asincrone, este necesar să faceți diverse „trucuri de ureche”. De exemplu, doriți să faceți un drag”n”drop într-un arbore, adică să trageți articole dintr-o secțiune în alta cu mouse-ul și astfel încât să își schimbe părintele pe serverul din baza de date.

Trageți "n" drop - acesta este "a luat un obiect cu șoareci - puneți-l acolo unde este nevoie - gata". Dar în modelul asincron, totul nu poate fi „gata” imediat.
Trebuie să verificați privilegiile de pe server, să verificați dacă obiectul mai există, în cazul în care un alt utilizator l-a șters.

Trebuie să arătăm cumva că procesul a început, dar rezultatul va fi „ce se va întâmpla...”. Dar ca? În modelul asincron, indicatorul mouse-ului nu poate trece doar peste un obiect, transformându-se într-un ceas.

În acest caz, fie folosesc solicitări sincrone către server - și apoi totul se blochează cu adevărat, fie soluția originală este să puneți obiectul ca și cum ar fi fost transferat și să informați cu o pictogramă animată că așteaptă un răspuns.
Dacă răspunsul este negativ, handlerul de răspuns transferă obiectul înapoi.

Context învechit, context învechit

Exemplul cu drag”n”drop atinge și problema „contextului învechit” – context învechit.

Web-ul este un mediu multi-utilizator. Dacă este folosit pentru navigare,
Să spunem un arbore de articole, apoi mulți oameni lucrează la el. Unul dintre ei poate șterge o ramură de copac la care lucrează celălalt: conflict.

De regulă, următoarele mijloace sunt utilizate pentru a depăși astfel de incidente:

Politica de editare

Acesta este momentul în care toată lumea știe cine face ce și la nivelul divizării puterilor și comunicării personale se convine asupra unor astfel de ștergeri. Această opțiune este evident nesigură, dar de obicei funcționează.

Blocare și/sau control versiuni

Blocare - blocarea documentelor editate.

Controlul versiunilor - fiecare document nou devine o versiune, astfel încât modificările nu se pierd niciodată. Versiunea implică conflicte atunci când Petya a început să editeze documentul înainte de Vasya și l-a salvat mai târziu. În același timp, în cea mai recentă versiune, modificările lui Vasya au fost pierdute, deși penultima versiune (a lui Vasya) este cu siguranță disponibilă în sistem.

Puteți citi mai multe despre blocare și versiune, de exemplu, în documentația pentru sistemul de control al versiunilor Subversion.

Actualizare automată a contextului

Problema conținutului învechit poate fi rezolvată în proporție de 99% cu actualizarea automată instantanee.

Browserul menține o conexiune constantă cu serverul (sau face solicitări corective din când în când) - iar modificările necesare sunt trimise prin acest canal.

De exemplu, articole noi sunt uneori încărcate într-o ramură deschisă a unui copac; interfață de e-mail- litere noi.

În general, problema contextului învechit se referă direct la problema integrității datelor. În orice caz, serverul este responsabil pentru verificarea finală a integrității, ca și în cazul validării formularelor.

AJAX - Ce este?

Când oportunitățile existente devin rare și nu există loc pentru a îmbunătăți ceea ce există, atunci are loc o descoperire tehnologică. O astfel de descoperire este AJAX (Asynchronous JavaScript and XML) - o abordare a construirii interfețe cu utilizatorul aplicații web, în ​​care pagina web însăși se încarcă fără reîncărcare necesare utilizatorului date. AJAX este una dintre componentele conceptului DHTML.

Ce ne oferă această tehnologie? În prezent Dezvoltare web aplicațiile tind să facă diferența între părțile client și server, ceea ce determină utilizarea pe scară largă a șabloanelor precum Smarty și XSLT. Acum proiectele devin din ce în ce mai complexe și împletite diverse tehnologii devine prea scump pentru timpul unui dezvoltator. Deci, de exemplu, toate stilurile de formatare sunt introduse în fișiere CSS sau XSL, HTML sau date XML sunt stocate în alte secțiuni, procesoarele de server în secțiunile a treia, bazele de date în secțiunile 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 asta devine din ce în ce mai rar.

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

Este nevoie de diferențierea muncii. Deci, de exemplu, un designer își va face treaba, un designer de layout își va face treaba, un programator își va face treaba și nimeni nu se 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 crește semnificativ. În prezent, această problemă este rezolvată cu succes prin utilizarea șabloanelor, dar acest lucru creează și anumite dificultăți, deoarece pentru, de exemplu, a conecta Smarty, trebuie să vă conectați modul software procesarea șablonului și legată în mod clar de structura proiectului. Dar acest lucru nu este întotdeauna posibil și necesită anumite costuri. Este puțin mai ușor să utilizați XML + XSL, deoarece oferă mai multe funcționalități, dar este o alternativă, nimic mai mult. Ce se întâmplă dacă privim spre ceva radical nou, care ne-ar permite să combinăm totul mai bine, folosind capacitățile pe care le avem? Încercați să vă imaginați JavaScript, care are toate capabilitățile PHP sau Perl, inclusiv grafică și baze de date, care are extensibilitate și practicitate mult mai convenabile și este, de asemenea, multiplatformă.

Deci, ce este AJAX? Oamenii au început să vorbească despre Ajax după articolul din februarie 2005 al lui Jesse James Garrett, „A New Approach to Web Applications”. Ajax nu este o tehnologie independentă. Aceasta este o idee care se bazează pe două principii principale.

Utilizarea DHTML pentru a schimba dinamic conținutul paginii.

Folosind XMLHttpRequest pentru a contacta serverul din mers.

Utilizarea acestor două abordări vă permite să creați interfețe de utilizator WEB mult mai convenabile pe acele pagini de site-uri web în care este necesară interacțiunea activă a utilizatorului. Folosind Ajax a devenit cel mai popular după companie Google a început utilizați-l în mod activ atunci când vă creați site-urile, 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 adresa resursei de care este interesat în bara de căutare, ajunge la server și î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ă pe WEB o numește Internet. Acest model clasic, care a reușit să se dovedească și să-și câștige un loc onorabil la soare. Acesta este cel mai mult model simplu interacțiuni și, ca urmare, cele mai frecvente. 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 poți folosi acest model pentru a le face jocul cât mai plăcut? În orice caz, datele navelor scufundate vor fi stocate pe server, iar pentru a verifica dacă adversarul a eșuat, va fi necesară reîmprospătarea paginii de fiecare dată și actualizarea datelor învechite. „Dar oamenii au inventat memorarea în cache”, veți spune și veți avea perfectă dreptate, dar nu va face totul mai ușor. 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 pune anumit timp se autoactualizează, dar în acest caz pagina va fi reîncărcată complet.

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

Secvența acțiunilor clientului este păstrată și cel mai probabil acesta 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, totul arată diferit.

La accesarea serverului se generează o pagină care va fi afișată utilizatorului și îi va solicita să efectueze o secvență de acțiuni care îl interesează. Cu o alegere conștientă (deși nu neapărat) a clientului, solicitarea acestuia va contacta modulul AJAX, care va efectua toate calculele care îl interesează și va lucra cu serverul ca atare. Dar ce e nou? Principala diferență este că această metodă ne oferă posibilitatea de a accesa dinamic serverul și de a efectua acțiuni care ne interesează. De exemplu, trebuie să accesăm 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 unul nou obiect JavaScript:

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

Apoi scriem o funcție care folosește acest obiect

Var req; 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 = new ActiveXObject("Microsoft.XMLHTTP"); if (req) (req.onreadystatechange = processReqChange; req.open("GET ", url, adevărat); req.send(); ) ) )

Tele fișier HTML scriem un script care va:

Funcția checkName(intrare, răspuns) ( if (răspuns != "")( // Modul de răspuns mesaj = document.getElementById("nameCheckFailed"); if (răspuns == "1")( message.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 Linie de comanda V în acest caz,în variabila q. Și salvăm rezultatul în Structura XML, pe care îl stocăm în același fișier. Astfel putem primi și prelucra datele obținute din baza de date sau orice altceva 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: verificați fișierul XML la fiecare trei secunde acest control presupune verificarea bazei de date pentru intrare nouă, adică mutarea făcută de adversar. Dacă a fost făcută o mișcare, pagina scufundă navele fără repornire, stricând astfel starea de spirit a participanților la luptele pe apă. Această funcționalitate este realizată prin utilizarea de bază a Javascript și a foilor de stil. Acest exemplu este destul de clar, dar departe de a fi completă aplicarea 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ă Am urcat muntele de mai multe ori surse diferite, dar domnilor, există Cookie-uri, care sunt destul de acceptabile în cazurile de transfer a mai multor date 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 numit astfel:

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

În Mozilla și Safari, acest lucru este mai ușor (din moment ce există un obiect încorporat în JavaScript):

Var req = new XMLHttpRequest();

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

Și în sfârșit, securitate. Să aruncăm o privire mai atentă la asta. Problema principală este că toate datele și codul sursă al funcțiilor JavaScript pot fi văzute prin vizualizare cod sursa pagini, în consecință, un atacator poate urmări logica executării cererii și, într-un anumit set de circumstanțe, poate executa setul de comenzi de care are nevoie. Acest lucru nu joacă un rol deosebit atunci când avem o simplă comparație a datelor, ci ce să facem în situații mai complexe, de exemplu în timpul autorizării, și cum să transferăm parolele în acest caz. După cum am menționat mai sus, cookie-urile vin în ajutor. Datele necesare pot fi trimise folosindu-le și pot fi, de asemenea, prelucrate. Să luăm un exemplu în care utilizatorul va fi autentificat folosind tehnologia căreia îi este dedicat articolul.

Când generăm o pagină, generăm valori unice, pe care apoi le plasăm în variabilele serverului. Si in Cookie-uri de browser, apoi în timpul autorizării primim 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 apăsat butonul Trimitere, parola lui este introdusă în Cookie-uri, iar numele de utilizator este transmis deschis - cu un link de exemplu http://www.mubestajax.com/ajax.php?login=pupkin la primirea datelor, serverul efectuează în primul rând reconcilierea datelor primite. Deoarece valorile pe care le-am generat de la pornirea serverului și apoi le-am transmis variabilelor serverului global și cookie-urile trebuie să se potrivească, la verificarea integrității datelor transferate, în cazul unei nepotriviri, programul nu mai funcționează. 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 se va potrivi.

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 precauții 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. servere moderne, a cărei caracteristică principală este simplitatea. Acesta este motivul pentru care tehnologii precum MySQL și PHP au devenit foarte răspândite, deoarece... Acestea oferă ușurință în operare cu un consum redus de resurse și 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 de mult așteptată, 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 fi rapid și eficient interacțiune eficientă cu un vizitator. AJAX a devenit o metodă foarte populară pentru preluarea datelor de pe un 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, mulți Biblioteci JavaScript, inclusiv jQuery, au o implementare excelentă la nivel înalt a AJAX sub forma unui set de metode și funcții care fac construirea site-urilor web mai ușoară și mai rapidă.

În această serie de lecții ne vom uita la elementele de bază ale construirii cererilor AJAX cu folosind jQuery. Vor fi abordate următoarele subiecte:

• Ce este tehnologia AJAX? Cum functioneazã? Care sunt avantajele sale?
• Cum să o facă Tipuri variate Solicitări AJAX folosind jQuery?
• Trimiterea datelor către server folosind cereri AJAX.
• Prelucrarea și extragerea datelor din răspunsurile AJAX de pe server.
• Cum să personalizezi procesarea AJAX în jQuery și să schimbi setările implicite?

Notă: tutorialele se concentrează pe partea client a JavaScript. Dar dezvoltarea părții server este, de asemenea, destul de simplă. Pentru mai mult informatii complete Ar trebui să studiați materiale despre limbaje de programare pe server, cum ar fi PHP.

Ce este AJAX și cum este util?

AJAX este o tehnică de dezvoltare a aplicațiilor web în care codul JavaScript care rulează în browserul vizitatorului comunică cu serverul web în mod asincron, adică în fundal. Diferențele față de aplicațiile web obișnuite sunt următoarele:

• O pagină web tipică conține link-uri sau formulare care, atunci când se fac clic sau sunt trimise, creează o solicitare către o nouă adresă URL pe serverul web. Serverul trimite o pagină HTML complet nouă, pe care browserul o redă apoi, înlocuind-o pagina originală. Această abordare necesită mult timp și este dăunătoare pentru vizitator, deoarece trebuie să aștepte ca noua pagină să se încarce.
• Când utilizați tehnologia AJAX, codul JavaScript face o solicitare 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ă sau se poate trimite vizitatorului un mesaj despre actualizarea bazei de date pe server.

Deoarece cererea AJAX rulează în fundal, codul JavaScript (și vizitatorul) pot continua să interacționeze cu pagina î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, cum ar fi 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ă mai multe 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ă„Un J avaScript și X ML sincron” ( JavaScript asincronși 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.

Hai sa facem cerere GET folosind $.get()

Metoda jQuery $.get() oferă un simplu și mod convenabil faceți o cerere simplă AJAX. Execută cererea folosind Metoda HTTP GET (folosit pentru a prelua 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 cea mai simpla forma puteți apela metoda astfel:

Unde url este adresa URL a resursei de la care se așteaptă răspunsul. De obicei, acesta este un script pe partea de server care efectuează unele acțiuni ș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 ca în cazul unei cereri GET obișnuite:

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

Modul corect de a face același lucru este să treceți obiectul 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 = (oraș: "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);

Primirea datelor de la server

Până acum, ne-am uitat la exemple de utilizare a $.get() doar pentru a trimite cereri către server, ignorând orice răspuns pe care l-ar putea genera scriptul de pe partea serverului. Dar, în majoritatea cazurilor, 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 continuă să ruleze. Cum, atunci, să primiți un răspuns de la server când solicitarea este finalizată?

Trebuie să scrieți o funcție de apel invers care va fi executată automat când cererea AJAX se finalizează și serverul trimite un răspuns. Cel puțin, funcția dvs. ar trebui să accepte datele returnate de server ca prim argument:

Funcția myCallback(returnedData) ( // Prelucrăm datele returnateData )

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

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

Determinarea tipului de date de răspuns

De obicei, partea de server trimite 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, trebuie să treceți al patrulea argument 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");

Exemplu de utilizare a metodei $.get().

Iată un exemplu de creare a unei cereri AJAX folosind metoda $.get() și prelucrare simplă Răspuns. Pentru ca exemplul să funcționeze, trebuie să creați unul simplu pe server fisier text numit getForecast.txt care conține textul următor:

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

Acest fișier va simula un răspuns în format JSON care ar putea fi generat de un script de prognoză meteo pe server.

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

Prognoza meteo $(function() ( $("#getForecast").click(function() ( var data = ( oraș: "Vasyuki", data: "20120318" ); $.get("getForecast.txt", date , succes, "json" ); Temperatura maxima: " + forecastData.maxTemp + "C"; alert(prognoză); ) )); Obțineți prognoza meteo

Deschideți showForecast.html în 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ă codul:

showForecast.html conține un element butonului „Obțineți prognoza meteo” cu ID getForecast .

JavaScript din partea de sus a paginii este executat de îndată ce pagina este încărcată și DOM-ul este într-o stare gata.

Codul JavaScript leagă mai întâi un handler de evenimente clic la butonul #getForecast. Acest manipulator efectuează o solicitare AJAX GET către getForecast.txt, trecând numele orașului și data pentru prognoză. De asemenea, este definită o funcție de apel invers succes(), care va fi executată la finalizarea cererii. Formatul datelor returnate de server este definit ca JSON.

Fișierul getForecast.txt returnează în browser datele de prognoză în format JSON.

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.

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().

De la autor: această serie Articolele sunt concepute pentru a prezenta designerilor front-end și dezvoltatorilor începători tehnologia AJAX, principala tehnologie front-end. În prima lecție, vom atinge elementele de bază ale AJAX, vom începe să învățăm diverse detalii ale acestei tehnologii, vom afla ce este, cum funcționează și care sunt limitările ei.

Să începem! Vă rugăm să rețineți: acest lucru presupune că cunoașteți deja tehnologiile front-end de bază, cum ar fi HTML și CSS.

Ce este AJAX?

AJAX înseamnă JavaScript asincron și XML. AJAX se referă la mai mult de o tehnologie și nu este nou. Este de fapt un grup de tehnologii (HTML, CSS, Javascript, XML etc.) care sunt legate între ele pentru a crea aplicații web moderne.

Folosind AJAX, clientul (browserul) comunică cu serverul și solicită date de la acesta. Răspunsul primit este procesat și se fac modificări în pagină fără a o reîncărca complet. Să ne uităm la acronimul AJAX:

„Asincron” înseamnă că atunci când clientul solicită date de la server, browserul nu se blochează până când nu primește un răspuns. Dimpotrivă, utilizatorul poate naviga prin pagini. Odată ce serverul a returnat răspunsul, răspunsul începe să fie procesat în fundal de către funcțiile corespunzătoare.

„JavaScript” este un limbaj de programare care este folosit pentru a crea un obiect de solicitare AJAX, a analiza acel răspuns și a actualiza DOM-ul paginii.

Clientul folosește XMLHttpRequest sau XHR API pentru a trimite o solicitare către server. Un API (interfață de program de aplicație) este un set de metode care definesc regulile de comunicare între două părți interesate. Cu toate acestea, datele care provin dintr-o solicitare AJAX pot fi în orice format, nu doar XML.

Cum funcționează AJAX

Pentru a înțelege principiul de bază de lucru, să aruncăm o privire la imaginea de mai jos:

Imaginea descrie un script AJAX standard:

Utilizatorul dorește să vadă mai multe articole și dă clic pe butonul dorit. Acest eveniment declanșează apelul AJAX.

Solicitarea este trimisă la server. Odată cu cererea se pot trimite diverse date. Solicitarea poate fi trimisă la un fișier static (de exemplu, example.php) stocat pe server. De asemenea, puteți rula scripturi dinamice (functions.php), în fiecare etapă a căror comunicare va avea loc cu baza de date (sau alt sistem) pentru a prelua informațiile necesare.

Baza de date trimite înapoi articolele solicitate către server. Și serverul le trimite către browser.

JavaScript analizează răspunsul și actualizează o parte a DOM (structura paginii). În exemplul nostru, doar bara laterală va fi actualizată. Restul paginii rămâne neschimbat.

Având în vedere acest lucru, veți înțelege de ce AJAX este o tehnologie atât de importantă în internet modern. Prin dezvoltarea aplicațiilor care rulează AJAX, putem controla cantități mari de date descărcate de pe server.

Exemplu live folosind AJAX

AJAX este peste tot acum. Pentru a vă convinge de acest lucru, ne vom uita pe scurt la câteva site-uri populare care folosesc pe deplin această tehnologie.

Mai întâi, să vedem cum funcționează Facebook și Twitter. Când derulați în jos în pagină, AJAX încarcă conținut nou. De asemenea, dacă vă plac sau nu vă plac întrebările și răspunsurile pe Stack Overflow, AJAX este declanșat din nou. De îndată ce introduceți ceva în bara de căutare de pe Google sau Youtube, sunt declanșate mai multe solicitări AJAX.

Mai mult, dacă dorim, putem urmări aceste solicitări. De exemplu, în Consola Chrome acest lucru se poate face făcând clic dreapta și activând funcția Log XMLHttpRequests.

Cum se creează o cerere

Am spus deja mai sus că API-ul XMLHttpRequest este folosit pentru a crea o solicitare. În plus, jQuery, cea mai populară bibliotecă JS, are diverse funcții și metode Ajax. Într-o serie de articole ne vom uita la diverse exemple în pur JS și JQuery pentru trimiterea cererilor către server.

Gestionarea cererilor

Datele preluate de pe server pot fi stocate în diferite formate. XML, JSON, JSONP, text simplu și HTML.

XML

XML (Extensible Markup Language) este unul dintre cele mai populare formate pentru schimbul de date între aplicații. Formatul este similar cu HTML și folosește etichete ca structură. Cu toate acestea, nu există etichete gata făcute în XML; Exemplu de structură de mai jos:

Mike Mathew engleză australiană spaniolă franceză rusă

< person > < name >Mike< / name > < surname >Mathew< / surname > < nationality >australian< / nationality > < languages > < language >Engleză< / language > < language >Spaniolă< / language > < language >limba franceza< / language > < language >Rusă< / language > < / languages > < / person >

Rețeaua este plină editori online, cu care puteți crea documente XML. Preferatul meu este: XMLGrid.net. În acest editor exemplul nostru arată astfel:

JSON

JSON( Obiect JavaScript Notația este un alt format popular de schimb de date. În JSON, exemplul de mai sus ar arăta astfel:

( „nume”: „Mike”, „nume”: „Mathew”, „naționalitate”: „australiană”, „limbi”: [„engleză”, „spaniolă”, „franceză”, „rusă”] )

"nume": "Mike", Editor JSON online În editorul JSN exemplul nostru va arăta astfel: Limitări în solicitările AJAX Înainte de a începe să utilizați AJAX, trebuie să știți despre limitări. Vom lua în considerare doar două probleme. Prima este o eroare în consola Chrome: Eroarea apare atunci când cererea face referire la un fișier local. În acest exemplu, am vrut să accesăm datele de la fișier local(Demo.json), care nu este stocat pe server. Pentru a rezolva această problemă, puteți instala un server local și puteți stoca fișiere acolo. A doua problema: Eroarea apare atunci când datele din solicitare sunt stocate pe un domeniu diferit de pagina noastră (eroarea este cunoscută sub numele de regula de restricție a domeniului). În exemplul nostru, datele sunt stocate pe server local, iar pagina este stocată pe serverul Codepen. Din fericire, aceste erori pot fi rezolvate. O modalitate este CORS de la W3C. Dar acest mecanism necesită modificări ale configurației fișierelor de pe server. De exemplu, această pagină descrie modul de configurare a unui server Apache. O altă modalitate este JSONP (JSON cu padding). Concluzie Această prezentare generală v-a dat o idee despre ce este AJAX, unde este posibil să l-ați întâlnit și ce probleme potențiale există. De asemenea, am analizat cele mai populare formate de schimb de date. În articolul următor ne vom uita la un exemplu de lucru. Te văd!