AJAX înseamnă Asynchronous Javascript And XML, ceea ce înseamnă Asynchronous JavaScript and XML. AJAX vă permite să actualizați datele paginii HTML fără a le reîncărca complet. În plus, tehnologia vă permite să lucrați cu paginile de Internet în mod asincron. Adică, în timp ce JavaScript interacționează cu serverul web, utilizatorul poate continua să lucreze cu pagina web.
Un exemplu de utilizare a tehnologiei AJAX este Google Suggest. Cum funcționează Google Suggest este că, în timp ce introduceți un cuvânt sau o expresie pentru a căuta, JavaScript merge la baza de date Google și îi solicită primele 10 cele mai populare interogări care încep cu aceleași litere. Și apoi afișează această listă fără a reîncărca pagina.
Pentru a lua în considerare principiile de funcționare a tehnologiei AJAX, vom implementa un mecanism similar cu Google Suggest pe site-ul nostru. Să presupunem că avem un site web de tour operator. Site-ul are un câmp de căutare pentru sugestii după numele țării. Să adăugăm la acest câmp o listă derulantă cu completare automată bazată pe literele introduse. Să începem să rezolvăm această problemă. Voi spune imediat că pentru a implementa această sarcină aveți nevoie de cunoștințe de HTML și puțin JavaScript (nu trebuie să fiți un expert). PHP va fi folosit ca limbaj de server.
Mai întâi, să creăm un formular de căutare. Pentru a face acest lucru, creați un fișier index.html pe serverul dvs. web, deschideți-l folosind orice editor de text și introduceți următorul cod html.
Caută oferte.
Sărbători la mare
Cauta oferte:
În această listă, am creat un formular de căutare cu un câmp de introducere a textului și un buton de trimitere și am creat un strat div pentru a afișa rezultatele. La această pagină este de asemenea atașat un fișier ajax.js, care va conține funcții JavaScript.
În continuare, vom scrie funcții JavaScript care vor trimite cereri către server și vor actualiza pagina. Pentru a nu trebui să supraîncărcăm complet documentul HTML, avem nevoie de tehnologia Ajax. Asadar, haideti sa începem. Creați un fișier ajax.js, plasați-l în același folder ca index.html și deschideți-l într-un editor de text.
Mai întâi trebuie să creați un obiect care va trimite cereri către server și va primi răspunsuri. Acest obiect este creat diferit în diferite browsere. Vom scrie o funcție universală care ar trebui să funcționeze în diferite browsere. Adăugați următorul cod JavaScript în fișierul dvs. ajax.js.
/*variabilă pentru stocarea obiectului de solicitare*/
cerere var;
/*funcție pentru crearea unui obiect de cerere*/
funcția CreateRequest()
{
var cerere=null;
încerca
{
//creați un obiect de solicitare pentru Firefox, Opera, Safari
cerere = new XMLHttpRequest();
}
prinde(e)
{
//creați un obiect de solicitare pentru Internet Explorer
încerca
( cerere=new ActiveXObject("Msxml2.XMLHTTP");
}
prinde(e)
{
cerere=new ActiveXObject ("Microsoft.XMLHTTP");
}
}
cerere de retur;
}
Trebuie să afișați o listă de rezultate de fiecare dată când modificați câmpul de căutare. Pentru a face acest lucru, vom folosi un handler de evenimente JavaScript. Vom detecta modificări la fiecare tastatură de eveniment de la tastatură. Pentru a face acest lucru, în codul nostru HTML al fișierului index.html, în linia în care este creat un câmp de căutare cu numele țara, adăugați atributul onkeyup="KeyPress(this.value)":
Adică, atunci când se apasă orice tastă, va fi apelată funcția JavaScript KeyPress(), căreia îi sunt transmise ca parametru caracterele introduse în șirul de căutare. Funcția KeyPress() trebuie să îndeplinească următoarele sarcini:
- Creați un nou obiect de cerere apelând funcția CreateRequest();
- Generați adresa URL la care trebuie să vă conectați pentru a obține rezultate;
- Configurați un obiect de cerere pentru a stabili o conexiune cu serverul;
- Trimiteți o cerere către server.
Să începem să creăm funcția KeyPress(). Pentru a crea un nou obiect de cerere, trebuie pur și simplu să atribuim variabilei de solicitare valoarea returnată de funcția CreateRequest() creată anterior. Și pentru a fi în siguranță, să verificăm variabila de solicitare. Dacă este NULL, atunci obiectul de solicitare nu a putut fi creat. Iată cum va arăta codul JavaScript pentru a rezolva această problemă:
Tasta funcțională Apăsați (termen) (
cerere=CreateRequest();
if(cerere==null)
{
întoarcere;
}
}
Apoi, trebuie să spuneți obiectului de cerere care funcție JavaScript va procesa răspunsul serverului. Pentru a face acest lucru, trebuie să atribuiți proprietății onreadystatechange numele funcției corespunzătoare. Această proprietate îi spune browserului ce funcție să ruleze ori de câte ori starea de pregătire a cererii se schimbă. Funcția noastră LoadResults() va procesa răspunsul. Adăugați următoarea linie la funcție: request.onreadystatechange = LoadResults; . Rețineți că nu există paranteze după numele funcției.
Atunci să stabilim conexiunea. Pentru a face acest lucru, mai întâi trebuie să spuneți obiectului unde să trimită această solicitare. Să creăm adresa URL a scriptului care va calcula rezultatele și să o atribuim variabilei URL. Să presupunem că scriptul php country.php va fi responsabil pentru calcularea rezultatelor pe partea serverului. Apoi URL-ul nostru va arăta astfel: var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random(); , unde variabila s conține caracterele introduse în câmpul de căutare, iar lui sid i se atribuie un număr aleatoriu, astfel încât browserul să nu pună în cache pagina. Adăugați această linie în corpul funcției KeyPress().
Apoi, trebuie să inițializați conexiunea folosind metoda open(„GET”, url, true) a obiectului de solicitare. Această metodă are trei parametri. Parametrul „GET” specifică modul de trimitere a datelor către server. Folosim metoda GET deoarece caracterele introduse în șirul de căutare sunt transmise script-ului serverului prin intermediul URL-ului. Al doilea parametru specifică adresa URL a scriptului serverului. Stocăm adresa URL în variabila url, așa că specificăm această variabilă în al doilea parametru. Al treilea parametru poate avea două valori: true - mod asincron și false - mod sincron. Aplicația noastră va funcționa în modul asincron, așa că specificăm true . După inițializarea conexiunii, trebuie să creați conexiunea și să interogați rezultatele. Pentru a face acest lucru, trebuie pur și simplu să apelați funcția send(null) de pe obiectul de solicitare. Parametrul nul indică faptul că cererea nu conține date.
După efectuarea tuturor modificărilor, funcția KeyPress(this.value) va arăta astfel:
Tasta funcțională Apăsați (termen)
{
/*creează un nou obiect de cerere*/
cerere=CreateRequest();
/*dacă nu a fost posibil să se creeze un obiect de cerere, atunci terminăm de executat funcția*/
if(cerere==null)
{
întoarcere;
}
/*formează adresa URL*/
var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random();
/*configurați un obiect de cerere pentru a stabili o conexiune*/
request.onreadystatechange = LoadResults;
request.open("GET", url, true);
/*trimite o cerere la server*/
cerere.trimite(null);
}
Deci, se stabilește conexiunea, se trimite cererea, serverul prelucrează datele și returnează rezultatul. Apoi, trebuie să primiți un răspuns, să procesați și să afișați rezultatele pe o pagină web. Toate acestea vor fi realizate de funcția LoadResults(), care va fi apelată ori de câte ori starea de pregătire a cererii se schimbă. Să vedem cum ar trebui să funcționeze această funcție.
În primul rând, trebuie să verificați starea actuală de pregătire. Starea gata este stocată de proprietatea readyState a obiectului de cerere. Când cererea este procesată, starea gata este 4. Adică dacă request.readyState == 4 , atunci puteți procesa răspunsul:
Funcția LoadResults()
{
/*procesează răspunsul*/
}
}
Funcția LoadResults()
{
/*Verificarea stării de pregătire*/
dacă (request.readyState == 4)(
/*Verificarea stării cererii*/
dacă (request.status == 200)(
/*totul este în regulă, procesează răspunsul*/
}
}
}
Dacă verificarea stării și stării cererii este finalizată cu succes, atunci puteți începe procesarea datelor primite de la server. Puteți primi date în două moduri: request.responseText - primirea datelor sub formă de text, sau request.responseXML - primirea datelor sub forma unui obiect XMLDocument. Să presupunem că serverul nostru trimite un răspuns sub forma unei liste text cu țări separate prin virgule. Apoi obținem datele: var answer = request.responseText . În continuare, procesăm datele și le afișăm într-un strat cu id="searchresults" .
Nu voi intra în detalii despre prelucrarea datelor, ci pur și simplu voi furniza codul funcției cu comentarii:
Funcția LoadResults()
{
/*Verificarea stării de pregătire*/
dacă (request.readyState == 4)(
/*Verificarea stării cererii*/
dacă (request.status == 200)(
//faceți vizibil stratul cu rezultatele căutării
ShowDiv("rezultatele căutării");
//ștergeți rezultatele
ClearResults();
//Obțineți date
var răspuns = request.responseText;
//conversia un șir de text într-o matrice
var array = answer.split(",");
//determinăm dimensiunea matricei
var count = array.length;
//găsiți stratul cu rezultatele căutării
//creează un tabel în modelul obiect document
var tbl = document.createElement("tabel");
var tblbody = document.createElement("tbody");
var tblRow, tblCell, tblNode;
// iterează prin toate elementele matricei
pentru(var i = 0; i (
var text = matrice[i];
//creează rânduri de tabel și adaugă-le în corpul său
tblRow = document.createElement("tr");
tblCell = document.createElement("td");
//setează atributele și funcțiile celulelor
tblCell.onmouseover = function())(this.className="mouseOver";);
tblCell.onmouseout = function())(this.className="mouseOut";);
tblCell.setAttribute("border", "0");
tblCell.onclick = function())(Inlocuire(aceasta););
tblNode = document.createTextNode(text);
tblCell.appendChild(tblNode);
tblRow.appendChild(tblCell);
tblbody.appendChild(tblRow);
}
//adăugați corpul ei la masă
tbl.appendChild(tblbody);
//asezati tabelul in strat
div.appendChild(tbl);
}
}
}
Și încă câteva funcții de ajutor JavaScript pentru afișarea rezultatelor pe ecran:
/*face stratul de rezultate vizibil*/
funcția ShowDiv(id)
{
if (document.layers) document.layers.visibility="show";
else document.getElementById(id).style.visibility="vizibil";
}
/*faceți stratul cu rezultatele invizibil*/
funcția HideDiv(id)
{
if (document.layers) document.layers.visibility="hide";
else document.getElementById(id).style.visibility="hidden";
}
/*rezultate clare*/
funcția ClearResults()
{
/* Eliminați rândurile existente din tabelul cu rezultate
var div = document.getElementById("searchresults");
var counter = div.childNodes.length;
for(var i = counter-1; i >= 0; i--)
{
div.removeChild(div.childNodes[i]);
}
}
/*Înlocuiește valoarea din câmpul de introducere cu valoarea selectată prin clic de mouse*/
funcția Înlocuire (tblCell)
{
var inputbox = document.getElementById("țara");
inputbox.value = tblCell.firstChild.nodeValue;
ClearResults();
HideDiv("rezultatele căutării");
}
De asemenea, în fișierul nostru html index.html între etichete și adăugați următoarele reguli CSS:
.mouseOut( fundal: #ffffff; culoare: #0000000; )
.mouseOver( fundal: #ccccff; culoare: #0000000; )
tabel (lățime: 250px)
Asta e tot. În acest articol, am analizat elementele de bază ale tehnologiei Ajax folosind un exemplu.
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 destul de mult timp, iar AJAX este o sinteză a tehnologiilor desemnate. 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 și mesaje text care indică faptul că datele 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 ar trebui să abuzeze de utilizarea tehnologiei și să recurgă 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
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 cerere 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ând argumentele acestuia prin URL-ul propriu-zis. Î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 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, 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ă cu transferul mai multor parametri mici, dar 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 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, așa cum sugerează numele tehnologiei. Pe lângă XML, puteți primi răspunsul în text simplu sau JSON (Javascript Object Notation). Dacă răspunsul a fost primit într-un text simplu, atunci acesta 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 Javascriptului) 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 XMLHttpRequestReț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.
anula()- anularea cererii curente către server.
getAllResponseHeaders()- obțineți toate anteturile de răspuns de la server.
getResponseHeader ("nume_header")- obțineți antetul specificat.
deschide ("request_type", "URL", "asynchronous", "username", "parola")- inițializarea unei cereri 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, adevărat este întotdeauna specificat sau nu este specificat deloc (valoarea implicită 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).
trimite ("conținut")- trimiteți o cerere HTTP către server și primiți un răspuns.
setRequestHeader ("nume_header", "valoare")- setați valorile antetului cererii.
Proprietățile obiectului XMLHttpRequestonreadystatechange- 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- un număr care indică starea obiectului.
text de răspuns- reprezentarea răspunsului serverului ca text simplu (șir).
răspunsXML- un obiect document compatibil cu DOM-ul 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.
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 browserele 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 = nou ActiveXObject("Microsoft.XMLHTTP");
Var Request = nou 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) ( Solicitare = new 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 la nivel 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 serverAlgoritmul 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.
/* 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) ( //Trimite controlul către utilizatorul handler r_handler(Request); ) ) //Verificați dacă este necesar să face 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); r_method.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, 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 î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 despre eroarea care a apărut) ) else ( //Anuntăm utilizatorul despre descărcare ) ) ...
Opțiuni de răspuns ale serveruluiPuteți primi mai multe tipuri de date de la server:
- Text simplu
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.
Exemplu de cod JSON:
( „date”: ( „diverse”: [ ( „nume” : „element JSON unu”, „tip” : „Subtitlu 1” ), ( „nume” : „Element JSON doi”, „tip” : „ Subtitlu 2 " ) ] ) )
Când primiți un astfel de cod, efectuați 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 serverAcest tip de muncă nu este diferit de munca obișnuită. De exemplu, voi lua PHP ca limbaj 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 salutări către lumea noastră minunată:
Ecou „Bună, lume!”;
La accesarea acestui fișier, clientul va returna șirul Hello, World. După cum vă puteți imagina, aceasta prezintă cele mai mari oportunități pentru construirea de aplicații. Transmițând argumente atunci când apelați serverul folosind XMLHttpRequest, puteți parametriza rezultatul, oferind astfel o funcționalitate extinsă aplicației Web.
În plus față de PHP, puteți utiliza orice alt limbaj de programare pe partea de server.
Ultima actualizare: 1/11/2015
Tehnologia AJAX este o tehnologie pentru interacțiunea asincronă cu serverul. Datorită acestei tehnologii, putem trimite cereri către server și primi răspunsuri de la acesta fără a reîncărca pagina în fundal și putem crea aplicații web interactive bogate, cum ar fi chat-urile web.
Inițial, capacitatea de a interacționa asincron cu serverul a fost folosită sub forma unui obiect ActiveX la Microsoft. Ulterior, ideea interacțiunii asincrone a fost preluată de alte companii. Și în prezent, funcționalitatea solicitărilor asincrone din browsere este disponibilă dezvoltatorilor web prin obiectul XMLHttpRequest.
Deoarece acest articol este despre jQuery, nu voi intra în detalii despre obiectul XMLHttpRequest. Dar voi arăta pe scurt esența utilizării sale.
Deci, în primul rând, pentru a lucra cu AJAX avem nevoie de un server web. Acesta ar putea fi Node.js, IIS, Apache, nginx. Pe viitor voi folosi serverul web Apache.
Să creăm o pagină web în care va fi folosit XMLHttpRequest:
Încărcați funcția Fără știri ajaxload())( var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function())( if(this.readyState==4)( if(this.status >=200 && xhr.status< 300){ document.getElementById("news").innerHTML=this.responseText; } } } xhr.open("GET", "ajax.php"); xhr.send(); }
În ceea ce privește marcajul, avem două elemente: un buton, când este apăsat, funcția ajaxload este executată și un bloc div în care vor fi încărcate datele atunci când sunt solicitate.
Toată acțiunea noastră principală are loc în funcția ajaxload. Mai întâi, creăm un obiect XMLHttpRequest: var xhr=new XMLHttpRequest(); .
Vom trimite cereri prin acest obiect. Când se primește un răspuns, evenimentul onreadystatechange se va declanșa. Și pentru a procesa acest eveniment, atribuim proprietății xhr.onreadystatechange o funcție de procesare a răspunsului.
În funcția de procesare, ne uităm mai întâi la pregătirea răspunsului prin proprietatea readyState (starea this.readyState==4 înseamnă că solicitarea este finalizată). În continuare, verificăm codul de stare a răspunsului: dacă serverul a returnat un cod de stare între 200 și 300, atunci cererea a avut succes.
Și apoi transmitem textul răspunsului către div-ul pe care îl avem pe pagină prin proprietatea responseText.
În linia xhr.open("GET", "ajax.php"); setăm metoda de solicitare și resursa către care se va adresa solicitarea.
Ei bine, cu ultima linie xhr.send() trimitem cererea. Am ajuns să scriem mult cod pentru a executa o cerere simplă.
Să presupunem că avem un handler de solicitări în PHP pe serverul nostru. O voi face extrem de simplu. Va răspunde pur și simplu cu marcaj html:
Acum, când faceți clic pe butonul, va apărea o solicitare Ajax, ale cărei rezultate vor fi încărcate pe pagină:
Acum să rescriem codul paginii folosind jQuery:
Load No news $(function())( $("button").click(function())( $("#news").load("ajax.php"); ));
Astfel, codul devine mai curat și mai simplu prin utilizarea bibliotecii jQuery. Trebuie doar să folosim metoda de încărcare, trecând adresa resursei ca parametru. Și rezultatul final va fi același.
AJAX (Asynchronous JavaScript and XML) este o tehnologie care furnizează cereri dinamice către server, timp în care nu este nevoie să reîncărcați pagina. Site-ul funcționează cu un ordin de mărime mai rapid, deoarece întreaga pagină nu trebuie actualizată în mod regulat, astfel încât utilizarea sa devine mai convenabilă pentru utilizator, dar nu și pentru motoarele de căutare.
Un număr mare de tehnologii similare au început să fie utilizate încă din anii 90 ai secolului trecut. De exemplu, în 1996, elementul IFRAME HTML a fost introdus în browserul Internet Explorer 3, iar doi ani mai târziu Microsoft a implementat mecanismul Remote Scripting.
Cu toate acestea, termenul „Asynchronous JavaScript and XML” în sine a devenit cunoscut lumii abia la începutul anului 2005, când Jesse Garrett a lansat un articol intitulat „Ajax: o nouă abordare a aplicațiilor web”. În materialul său, Garrett a descris în detaliu cum sunt create aplicațiile de internet pentru Google Maps și Gmail. El a declarat cu încredere că acesta a fost începutul unei dezvoltări rapide a capabilităților disponibile utilizatorilor în aplicații.
Jesse James Garrett
Jesse Garrett a acordat o atenție deosebită tehnologiei AJAX, i-a dat un nume și a descris în detaliu noua tendință. Dar este de remarcat faptul că nu el a inventat această tehnologie, i-a dat doar un nume.
După aceasta, domeniul dezvoltării de aplicații Internet a devenit mult mai avansat. De acum înainte, utilizatorii pot vedea rezultatele schimbului de date între browser și server pe ecranele lor.
Când vizitați un anumit site web, veți înțelege imediat că acesta folosește tehnologia AJAX. Anterior, utilizatorii trebuiau să facă clic pe diverse butoane și să urmeze link-uri pentru a-și confirma acțiunile. Astăzi, pagina web acceptă în mod independent date noi în timp real, fără a se reîncărca din partea utilizatorului.
Toate acestea asigură o utilizare mai convenabilă a resursei web, deoarece timpul alocat pentru interacțiunea cu aceasta este redus semnificativ. În esență, începem să comunicăm cu o aplicație de mare viteză. Și pentru ca acesta să funcționeze pe deplin, aveți nevoie doar de acces la Internet, precum și de un browser care funcționează cu JavaScript.
Cum funcționează tehnologiaPentru a înțelege în mod specific cum funcționează AJAX, să ne uităm la 4 pași critici:
Dacă explicăm vizual esența tehnologiei, atunci în imagine acest proces va arăta astfel: 
Fără un obiect XMLHttpReques, informațiile nu pot fi schimbate, deci sunt plasate în prealabil pe pagina însăși. Obiectul acționează ca o legătură între server și browser web. Cererile în sine trec de la sistem la server în format POST sau GET. Tipul GET se referă în mod inerent la un document situat pe server și primește adresa site-ului ca argument. Pentru a preveni anularea cererii, a fost creată o funcție robustă JavaScript Escape pentru a preveni astfel de cazuri.
Dacă datele sunt transferate în volume mari, nu puteți face fără funcția POST. Serverul procesează informațiile pe care le primește și apoi, pe baza acestora, generează date actualizate care sunt trimise utilizatorului.
Abordarea AJAX presupune transferul de informații în momente diferite. Datorită acestui client, o varietate de funcții sunt disponibile în timpul transferului de date „în fundal”. Utilizatorul primește un mesaj despre procesul de transfer al informațiilor, astfel încât să nu îl considere blocat - acest lucru îi permite să fie păstrat pe site.
Pentru a trimite răspunsul, serverul folosește text standard JSON sau XML. La primirea unui document JSON, acesta este imediat afișat pe ecran. Dar utilizatorului i se cere și să execute codul pe care îl primește, după care va fi generat un obiect JavaScript. Și dacă textul este trimis în format XML, acesta trebuie mai întâi înlocuit cu HTML și apoi afișat pe pagină.
Care sunt avantajele AJAX?- Reduce sarcina pe server. Dar acest lucru este posibil numai dacă tehnologia este utilizată corect. Puteți folosi un șablon care vă va ajuta să creați elemente permanente ale unei resurse web: meniu, logo, antet etc. Și pentru a satisface solicitările vizitatorilor, nu este nevoie să reîncărcați întreaga pagină. De exemplu, ați creat un bloc cu vot, iar vizitatorului i se cere să selecteze opțiunea optimă pentru a vota. De îndată ce apăsă butonul, informațiile vor ajunge imediat la server, iar apoi persoana va primi un răspuns. Și toate acestea se întâmplă fără a reîmprospăta pagina.
- Îmbunătățește performanța serverului. Pentru că doar conținutul paginii este încărcat, iar utilizatorii primesc rezultatele acțiunilor lor mult mai rapid.
- Reduce traficul. Cantitatea de date în procesul de lucru cu aplicații este redusă semnificativ. Acest lucru este asigurat de faptul că nu întreaga pagină este reîncărcată, ci doar elementele sau datele modificate ale acesteia. Scriptul modifică apoi informațiile de pe pagină din browser.
- Deschide o mare varietate de posibilități. Odată ce alegeți AJAX, veți avea la dispoziție o multitudine de acțiuni. Astfel, la înregistrarea pe site-uri, un vizitator, indicând un login, află imediat dacă este ocupat sau nu. Și când introduceți o interogare în bara de căutare Google sau Yandex, după orice cuvânt sau literă ulterioară, mai jos sunt afișate opțiuni de interogare gata făcute. Desigur, acest lucru face sarcina mult mai ușoară pentru utilizatorii de internet.
- JavaScript trebuie să fie activat în orice moment. Fără acest suport, tehnologia AJAX de pe paginile relevante este practic inutilă.
- Probleme cu . Adesea, conținutul plasat dinamic pe pagini trece neobservat de roboții de căutare. Din acest motiv, se recomandă ca încărcarea dinamică să fie aplicată numai anumitor elemente de conținut. Acesta este singurul mod de a minimiza impactul negativ al tehnologiei asupra promovării SEO.
- Nu se poate combina cu instrumentele browserului. Dacă creați pagini în mod dinamic, browserul nu le va aminti și le va afișa în istoric și, prin urmare, atunci când faceți clic pe butonul „Înapoi”, nu veți reveni la pagina vizitată anterior. Dar problema este rezolvată cu scripturi speciale. De asemenea, nu veți avea posibilitatea de a marca niciun conținut.
- Lipsa numărului de cereri. Din cauza încărcării dinamice a materialelor, sistemul nu poate afișa cu acuratețe statistici deoarece atunci când utilizatorul navighează prin diferite pagini, acestea nu se reîncarcă, iar contorul nu numără aceste tranziții. Din acest motiv, pot apărea probleme la evaluarea analizelor de pe site.
- Nivelul de securitate este redus. Prin instalarea AJAX, orice utilizator poate vizualiza codul sursă al paginii, iar acesta nu este sigur.
S-a spus deja mai sus că paginile bazate pe această tehnologie sunt foarte prost indexate. Pentru a evita acest lucru, este mai bine să vă asigurați în prealabil că datele încărcate dinamic sunt disponibile și prin linkuri. Odată cu această posibilitate, paginile resursei web vor fi afișate în mod normal chiar și pentru acei utilizatori care folosesc un browser fără JavaScript.
Proprietarii de site-uri în care conținutul este încărcat dinamic trebuie să se asigure că roboții motoarelor de căutare, pe lângă înțelegerea conținutului paginilor, determină și corect regulile de navigare pe site.
Pentru a minimiza impactul negativ al AJAX asupra promovării site-ului web, acesta trebuie optimizat:
Adesea, motoarele de căutare tratează resursele AJAX mai rău decât site-urile care nu folosesc această tehnologie. Există mai multe motive pentru aceasta:
- este posibil ca unele conținuturi să nu fie indexate de roboți;
- toate paginile au aceeași adresă URL;
- Anumite pagini pot apărea diferit pentru roboții de căutare decât pentru utilizatori.
Dar dacă folosești cu înțelepciune tehnologia AJAX, adică o folosești doar pentru anumite fragmente de pe site, atunci nu vei avea probleme cu indexarea.
Nu aș recomanda utilizarea tehnologiei AJAX pentru întregul site astfel de site-uri sunt prost indexate de motoarele de căutare. Dar pentru unele elemente de utilizator (de exemplu, sondaje, adăugarea de comentarii), această tehnologie este utilă și, dimpotrivă, poate crește gradul de utilizare al proiectului dumneavoastră.
ConcluzieTehnologia AJAX deschide oportunități enorme pentru utilizatori, face comunicarea cu site-urile web mult mai rapidă și mai confortabilă și crește viteza de funcționare a acestora. Dar are și dezavantaje semnificative care pot fi evitate dacă sunt folosite corect. Doar cu o abordare competentă site-ul dvs. web va ajunge la poziții înalte în rezultatele căutării și va fi în stare bună cu motoarele de căutare.
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 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, multe biblioteci JavaScript, inclusiv jQuery, au implementări excelente la nivel înalt ale 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 tutoriale, ne vom uita la elementele de bază ale construirii cererilor AJAX folosind 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 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 informații mai 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 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 un mesaj vizitatorului 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ă „A synchronous JavaScript A and 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 folosind $.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 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 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. 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 date = (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 serverPâ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 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 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ăspunsDe 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 utilizând metoda $.get() și pur și simplu procesând răspunsul. Pentru ca exemplul să funcționeze, trebuie să creați un fișier text simplu pe server numit getForecast.txt care să conțină următorul text:
( „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" ); + 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:
Un exemplu simplu, cu câteva linii, demonstrează cum funcționează o solicitare AJAX folosind metoda $.get().
