Cauta rapid aici ↑

AJAX Asincron JavaScript And XML

AJAX nu reprezinta un nou limbaj de programare, ci o noua modalitate de a folosi standardele actuale. AJAX reprezinta modalitatea de a schimba date cu serverul cu rol de a adauga continut nou in pagina web fara a o reincarca. Pentru a invata AJAX trebuie sa aveti cunostinte cel putin medii despre HTML / CSS / DOM si JavaScript.

Standardul AJAX permite incarcarea asincron de continut nou in pagina web prin schimb de informatii intre browser si server, cantitatea de informatie ce este adaugata in pagina web este de cele mai multe ori foarte mica si este adaugata la un eveniment produs de catre vizitatorul paginii web, de exemplu, atunci cand se efectueaza evenimentul scroll.

Cum functioneaza AJAX

BROWSERSERVER
Eveniment
Se creeaza un obiect XMLHttpRequest
Se trimite HttpRequest
INTERNET →Se proceseaza HttpRequest
Se creeaza un raspuns si se trimit datele catre browser
Se proceseaza datele folosind JavaScript
Se incarca datele in pagina web
← INTERNET← ← ← ↓

AJAX este bazat pe standardele actuale ale Internetului si reprezinta o combinatie de cateva limbaje

  • Obiectul XMLHttpRequest cu rol de a schimba date asincron cu serverul
  • JavaScript / DOM cu rol de a interactiona cu informatia de la server
  • CSS pentru a stiliza datele
  • XML adesea folosit ca format pentru transferul de date

Obiectul XMLHttpRequest

Toate browserele suporta obiectul XMLHttpRequest. Acest obiect sta la baza acestui standard si prin el putem adauga continut nou in pagina web. Toata actiunea se desfasoara in spatele browserului.

Cum se creeaza un obiect XMLHttpRequest

Practic obiectul XMLHttpRequest este de fapt o variabila obiect, iar sintaxa acestuia este urmatoarea: variabila=new XMLHttpRequest() .

Trimite o cerere catre server

Pentru a realiza acest lucru vom avea nevoie de primele doua metode din urmatorul tabel si le vom atasa variabilei noastre obiect.

METODADESCRIERE
  
open(metoda, url, asincron)Specifica tipul de cerere, url-ul si daca cererea sa fie procesata asincron sau nu.
metoda → reprezinta tipul de cerere GET sau POST
url -ul → reprezinta locatia fisierului pe server
asincron → reprezinta daca cererea sa fie asincron (true) sau sincron (false)
sent(string)Trimite cererea catre server
string → este folosit doar pentru cererile de tip POST
responseTextobtine datele de raspuns ca un sir de caractere
responseXMLobtine datele de raspuns ca date XML

Ce metoda folosim, GET sau POST ?

Datele pot fi transmise prin doua metode, GET si POST. Metoda GET este mai rapida si se desfasoara prin bara de adrese si poate contine doar o anumita cantitate de informatie, nu poate depasi o anumita marime. Metoda POST este mai lenta si prin aceasta nu avem limita de informatie iar toata actiunea se desfasoara in spatele browser-ului, plus ca este mult mai sigura decat metoda GET.

URL Un fisier ce se afla pe server

Acest parametru, al metodei open() reprezinta calea catre fisierul pe care vrem sa il accesam ori afisa. Fisierul in sine poate avea orice format. Poate fi un simplu fisier (.txt .html) sau un fisier ce poate rula pe server (/ .asp) si care, in acest caz mai intai este procesat de catre server si apoi este trimis pentru a fi afisat in browser.

Asincron - True | Sincron - False

Dupa cum spune si acronimul AJAX, cel mai adesea este folosit cuvantul TRUE si face ca cererea noastra sa se efectueze asincron. Cuvantul FALSE este mai putin folosit sau deloc si asta pentru ca nu se doreste ca cererea noastra sa se efectueze in sincron cu evenimentul produs.

Evenimentul onreadystatechange

Atunci cand cererea este trimisa catre server, ne dorim sa efectuam anumite actiuni bazate pe raspunsul acestuia. Evenimentul onreadystatechange este declansat de fiecare data cand se modifica readyState. Proprietatea readyState detine statutul de XMLHttpRequest. Mai jos sunt prezentate trei proprietati importante ale obiectului XMLHttpRequest.

PROPRIETATEDESCRIERE
  
onreadystatechangeStocheaza o functie sau numele unei functii ce va fi apelata automat atunci cand proprietatea readyState se va schimba
readyStateDetine statutul de XMLHttpRequest. Modificarile la 0 la 4:
0: cererea nu a fost initializata
1: conectare la server stabilita
2: cerere primita
3: cerere de prelucrare
4: cererea este terminata si raspunsul este gata
status200: OK sau 404: Page not found