AJAX

De la Wikipedia, enciclopedia liberă.
Salt la navigare Salt la căutare
Notă despre dezambiguizare.svg Dezambiguizare - Dacă sunteți în căutarea altor semnificații, consultați Ajax .

În informatică AJAX , acronim de JavaScript asincron și XML , este o tehnică de dezvoltare software pentru crearea de aplicații web interactive ( Rich Internet Application ), bazată pe un schimb de date de fundal între browserul web și server , permițând astfel actualizarea dinamică a unei pagini web fără reîncărcarea explicită de către utilizator.

Este o tehnică asincronă în sensul că datele suplimentare sunt solicitate de la server și încărcate în fundal fără a interfera cu comportamentul paginii existente. În mod normal, funcțiile numite sunt scrise cu limbajul JavaScript . Cu toate acestea, în ciuda numelui, utilizarea JavaScript și XML nu este obligatorie, deoarece solicitările de încărcare nu trebuie neapărat să fie asincrone.

Descriere

Modelul convențional pentru o aplicație web versus o aplicație care utilizează Ajax
Modelul convențional pentru o aplicație web versus o aplicație care utilizează Ajax

AJAX este o tehnică multi-platformă, adică poate fi utilizată pe multe sisteme de operare , arhitecturi de computere și browsere web și există numeroase implementări open source de biblioteci și cadre .

Tehnica AJAX folosește o combinație de:

  • HTML (sau XHTML ) și CSS pentru marcare și stil;
  • DOM (Document Object Model) manipulat printr-un limbaj ECMAScript precum JavaScript sau JScript pentru a afișa informații și a interacționa cu acestea;
  • obiectul XMLHttpRequest pentru schimbul de date asincron între browserul utilizatorului și serverul web . În unele cadre AJAX și în anumite situații, un obiect Iframe poate fi utilizat în locul XMLHttpRequest pentru a schimba date cu serverul și, în alte implementări, a adăugat dinamic etichete <script> ( JSON );
  • XML este utilizat în general ca format de schimb de date, deși poate fi utilizat practic orice format, inclusiv text simplu, HTML preformatat, JSON și chiar EBML . Aceste fișiere sunt de obicei generate dinamic de scripturi de pe server.

La fel ca DHTML sau LAMP , AJAX nu este o tehnologie individuală, ci mai degrabă un grup de tehnologii utilizate împreună.

Aplicațiile web care utilizează AJAX necesită browsere care acceptă tehnologiile necesare (cele enumerate mai sus). Aceste browsere includ: Firefox , Opera , Konqueror , Safari , Internet Explorer și Chrome . Cu toate acestea, conform specificațiilor, „Opera nu acceptă formatarea obiectelor XSL”.

Comparație cu aplicațiile tradiționale

Aplicațiile web tradiționale permit utilizatorilor să completeze formulare și, atunci când aceste formulare sunt trimise, o cerere este trimisă serverului web. Serverul web acționează asupra a ceea ce a fost trimis de formular și răspunde blocând sau afișând o pagină nouă. Deoarece o mulțime de cod HTML de pe prima pagină este identic cu cel de pe a doua, se pierde multă lățime de bandă. Deoarece o cerere adresată serverului web trebuie transmisă la fiecare interacțiune cu aplicația, timpul de reacție al aplicației depinde de timpul de reacție al serverului web. Astfel, interfața cu utilizatorul devine mult mai lentă decât ar putea fi.

Aplicațiile AJAX, pe de altă parte, pot trimite cereri către serverul web pentru a obține doar datele necesare (în general folosind SOAP și JavaScript pentru a afișa răspunsul serverului în browser). Ca urmare, se obțin aplicații mai rapide (deoarece cantitatea de date schimbată între browser și server este redusă). Timpul de procesare de către serverul web este, de asemenea, redus, deoarece majoritatea datelor solicitate au fost deja procesate.

Un exemplu concret: multe site-uri folosesc tabele pentru a afișa date. Pentru a modifica ordinea de afișare a datelor, cu o aplicație tradițională, utilizatorul ar trebui să facă clic pe un link din antetul tabelului care ar trimite o cerere către server pentru a reîncărca pagina cu noua comandă. Serverul web ar trimite apoi o nouă interogare SQL către baza de date ordonând datele după cum este necesar, le va executa, va prelua datele și va reconstrui pagina web de la zero și le va trimite înapoi complet utilizatorului. Folosind tehnologiile AJAX, acest eveniment ar putea fi de preferință executat cu JavaScript partea clientului care generează în mod dinamic o vizualizare a datelor cu DHTML .

Un alt exemplu ar putea fi alegerea unei noi porecle la crearea unui cont pe un site web, în ​​cazul clasic, dacă numele pe care l-am ales există deja, ar trebui mai întâi să completăm întregul formular și să ne dăm seama numai după ce așteptăm încărcarea pagina de confirmare a faptului că numele există deja și trebuie să-l schimbăm, în schimb cu AJAX se poate introduce o verificare la evenimentul onChange sau chiar OnKeyUp al casetei de text care ne poate informa cu promptitudine că numele introdus nu este valid, poate evidențiind roșu text (CSS + JavaScript).

argumente pro şi contra

La fel ca în cazul aplicațiilor DHTML , și aplicațiile AJAX trebuie testate pe mai multe browsere pentru compatibilitate (biblioteci precum Sarissa de SourceForge vă pot ajuta, totuși). În plus, JavaScript este necesar pentru client. Avantajul utilizării AJAX este viteza mare cu care o aplicație răspunde la intrarea utilizatorului.

O problemă destul de remarcabilă este că, fără adoptarea unor măsuri adecvate de contracarare, aplicațiile AJAX pot face ca butonul „înapoi” al browserului să fie inutilizabil: cu acest tip de aplicații, de fapt, nu navigați de la o pagină la alta, ci o singură parte a același document este actualizat din când în când. Tocmai din acest motiv, browserele, care sunt programe orientate către pagini , nu au nicio posibilitate de a urmări înapoi la oricare dintre aceste versiuni „intermediare”. Google , în Google Maps , a dezvoltat o posibilă soluție la problemă: în loc să utilizeze XMLHttpRequest atunci când utilizatorul face clic pe butonul de căutare, rezultatul căutării este trimis într-un iframe invizibil, din care informațiile sunt aduse în pagina vizibilă.

HTML5

Cele mai recente tehnologii HTML5 (care nu sunt încă complet acceptate peste tot), care vă permit să manipulați istoricul browserului, au făcut posibilă depășirea problemei orientării paginii. Această utilizare are loc în principal în 4 faze:

  • Blocarea evenimentului de reîmprospătare cu un eveniment.preventDefault ()
  • Introducerea unei noi entități în istorie prin metoda history.pushState (state_object, title, link)
  • Solicitare în AJAX
  • Gestionarea evenimentului popstate

În orice caz, proiectarea atentă a aplicațiilor AJAX permite rezolvarea unora (uneori a tuturor) acestor aspecte negative.

Ajax în dezvoltarea aplicației mobile

Utilizarea Ajax a fost relevantă pentru dezvoltarea aplicațiilor hibride dezvoltate cu Apache Cordova . Această caracteristică este dată de faptul că paginile web (de obicei în html ) pentru a accesa și afișa conținut dinamic trebuie să facă cereri asincrone cu Ajax către servere la distanță care folosesc adesea limbaje de pe server.

API Istoric

Galerie de imagini pe un site web. API Istorie HTML5 integrat cu Ajax, Ajax singur și pagini diferite. Rezultatul vizual pentru utilizator este același, dar metodele sunt foarte diferite.
Galerie de imagini pe un site web. API Istorie HTML5 integrat cu Ajax, Ajax singur și pagini diferite. Rezultatul vizual pentru utilizator este același, dar metodele sunt foarte diferite.

API-ul Istoric HTML5 oferă posibilitatea de a schimba „ URL - ul unui site Web fără o actualizare completă a paginii [1] . Acest lucru este util pentru încărcarea părților unei pagini cu JavaScript în așa fel încât conținutul să fie sensibil diferit și să garanteze o nouă adresă URL. De fapt, multe proiecte Ajax menționate mai sus (de exemplu galerii de imagini [2] ) prevăd schimbarea interfeței fără a schimba adresa URL a paginii. Aceasta înseamnă că utilizatorul nu poate utiliza butonul „înapoi” (sau „înainte”) al browserului pentru a naviga între (de exemplu) imaginile unei galerii de imagini create în Ajax, deoarece acest buton ar duce utilizatorul la pagina anterioară a browserului istoric și nu la imaginea anterioară a galeriei (sau următoarea în cazul butonului „următor”). Cu API-ul Istoric, butoanele „înainte” și „înapoi” ale browserului pot fi utilizate pentru a naviga (de exemplu ) între imagini Galeria Ajax prin diferite adrese URL (una pe imagine) fără a reîncărca pagina. Înainte de sosirea acestui API, singura modalitate de a crea o galerie de imagini cu o adresă URL diferită pentru fiecare imagine a fost de a crea o pagină diferită pentru fiecare imagine fără a avea pentru a utiliza Ajax.

Exemplu

Un exemplu de cerere simplă Ajax folosind metoda GET, scrisă în JavaScript.

get-ajax-data.js:

 // Acesta este scriptul partea clientului.

// Inițializați solicitarea HTTP.
var xhr = new XMLHttpRequest ();
xhr . open ( 'GET' , 'send-ajax-data.php' );

// Urmăriți modificările de stare ale cererii.
xhr . onreadystatechange = function () {
	var DONE = 4 ; // readyState 4 înseamnă că solicitarea a fost efectuată.
	var OK = 200 ; // starea 200 este o returnare reușită.
	if ( xhr . readyState === GATA ) {
		if ( xhr . status === OK ) {
			consolă . log ( xhr . responseText ); // "Aceasta este rezultatul."
		} altceva {
			consolă . log ( 'Eroare:' + starea xhr . ); // A apărut o eroare în timpul solicitării.
		}
	}
};

// Trimiteți cererea pentru a trimite-ajax-data.php
xhr . trimite ( nul );

send-ajax-data.php:

 <? php 
// Acesta este scriptul de pe partea serverului.

// Setați tipul de conținut.
antet ( „Content-Type: text / plain” ); 

// Trimiteți datele înapoi.
ecou "Acesta este rezultatul." ; 
?>

Biblioteca jQuery permite efectuarea de apeluri asincrone utilizând o sintaxă mai simplă decât cea a obiectului XMLHttpRequest . De exemplu:

 // Acesta este scriptul partea clientului.

$ . ajax ({
	tastați : „obțineți” ,
	url : "send-ajax-data.php" ,
	succes : funcție ( date ) {
		consolă . jurnal ( data ); // "Aceasta este rezultatul."
	},
	eroare : funcție ( cerere ) {
		consolă . log ( 'Eroare:' + cerere . stare ); // A apărut o eroare în timpul solicitării.
	}
});

Alternative la Ajax

Pictogramă lupă mgx2.svg Același subiect în detaliu: HTML5 , CSS , JavaScript și jQuery UI .

Odată cu nașterea HTML 5 și CSS 3, unele posibilități, cum ar fi crearea de galerii de imagini, efecte și meniuri derulante, sunt fezabile fără utilizarea Ajax și / sau JQuery și / sau JavaScript, ceea ce cu HTML 4 și CSS 2 a fost adesea imposibil de realizat [3] [4] [5] [6] .

Exemple de UI Ajax

Notă

  1. ^ (EN) Folosirea API-ului HTML5 History , CSS-Tricks, 9 martie 2015. Accesat la 18 februarie 2021 ( depus la 12 martie 2021).
  2. ^ ( EN ) 30 Scripts For Galleries, Slideshows and Lightboxes , pe Smashing Magazine , 18 mai 2007. Accesat la 18 februarie 2021 ( arhivat la 5 februarie 2021) .
  3. ^ (EN) 5 lucruri pe care le puteți face cu CSS în loc de JavaScript pe LogRocket Blog, 29 octombrie 2019. Adus pe 9 februarie 2021 ( depus pe 2 februarie 2021).
  4. ^ ( EN ) 49 CSS Galleries , pe Free Frontend . Adus pe 9 februarie 2021 ( arhivat pe 6 februarie 2021) .
  5. ^ LiveCode - HTML5 - Demo pentru aplicația Calculator , la livecode.com . Adus pe 9 februarie 2021 ( arhivat pe 24 septembrie 2019) .
  6. ^ Andrea Pacchiarotti, meniu Responsive în HTML și CSS fără JavaScript și jQuery , pe Andrea pacchiarotti . Adus pe 9 februarie 2021 ( arhivat pe 29 mai 2021) .

Elemente conexe

  • AFLAX , Flash asincron și XML.
  • Icefaces , AJAX Framework.
  • JQuery , opensource, biblioteca AJAX / DHTML.
  • Jamp , cadru open source scris în PHP și bazat pe AJAX.

Alte proiecte

linkuri externe

Instrumente și cadru AJAX

Resurse

Controlul autorității LCCN (EN) sh2006004062 · GND (DE) 7515401-8 · BNF (FR) cb15511178c (dată) · BNE (ES) XX559296 (dată)