Cauta rapid aici ↑

XMLHttpRequest versus EventSourse

XMLHttpRequest si EventSourse reprezinta doua obiecte in JavaScript. Ambele au fost create pentru a incarca un fisier de pe server ce contine sau nu limbaj ce ruleaza pe partea de server si care ne ofera diferite informatii.

Obiectul XMLHttpRequest

Obiectul XMLHttpRequest are o vechime mare in spate si este suportat de toate browser-ele fie ca ruleaza pe desktop, tableta sau mobil. Acest obiect ne ajuta pe noi sa incarcam asincron un fisier de pe server in pagina web fara a o reincarca, la un anumit eveniment ales de noi, continutul fisierului fiind afisat in pagina web intr-un loc ales tot de catre noi. Obiectul XMLHttpRequest sta la baza standardului AJAX si fara acesta, standardul AJAX nu ar exista. → AJAX

Obiectul EventSourse

Obiectul EventSourse este mai recent aparut si in prezent este suportat de majoritatea browser-elor de pe desktop. Interesant la acest obiect este modul lui de functionare. Obiectul XMLHttpRequest il creeam intr-o functie (daca asa vroiam) ce rula la evenimentul ales de noi la un interval de timp ales tot de catre noi cu scopul de a afla daca au aparut informatii noi in fisierul de pe server si a le vedea in browser. Obiectul EventSourse face exact acelasi lucru cu diferenta ca nu va mai trebui sa rulam la un anumit interval functia ce incarca informatiile de pe fisierul de pe server si asta pentru ca serverul trimite datele la un interval de minim 3 secunde in pagina web. Practic browser-ul asteapta informatiile de la server si cand le primeste este declansat evenimentul message, eveniment cu care vom afisa informatiile in elementul HTML din pagina.

Pentru a putea facilita comunicarea dintre browser si server, in fisierul de pe server vom avea nevoie de urmatoarea linie de cod, daca si numai daca limbajul folosit este PHP.

header('Content-Type: text/event-stream');

Obiectul EventSourse va avea paranteze in care vom insera calea relativa catre fisierul de pe server intre ghilimelele simple sau duble si mai apoi pe urmatoarea linie de cod vom rula o functie pe evenimentul message atasat de variabila devenita obiect ce contine obiectul EventSourse (am spus de la dreapta la stanga). Functia pe care o vom rula astfel va avea parametrul event, parametru de care vom lega proprietatea data in interiorul functiei. Proprietatea data va contine informatiile provenite de la fisierul de pe server.

In interiorul functiei vom selecta elementul HTML care va primi informatiile provenite de la fisierul de pe server, ii vom atasa proprietatea innerHTML si mai apoi ii vom da ca valoare parametrul functiei si legat de acesta proprietatea data. Acum nu va mai ramane decat sa testati acest exemplu, presupun ca aveti instalat un server pe unitatea voastra sau in alta parte, unde aveti acces.

Fisier HTML - Browser

Fisier PHP - Server