Cookies și AJAX Ce sunt Cookies? Sunt date stocate într-un mic fișier pe calculatorul clientului Datele din fișier sunt schimbate între client și server la fiecare cerere/răspuns Sunt folosite pentru a stoca persistent date despre utilizator; datele sunt disponibile doar de pe clientul care a accesat pagina de pe server și doar pentru serverul care conține pagina accesată Fișierele cookie nu pot scrie sau citi alte informații de pe calculatorul clientului
Cookies și AJAX Un fișier cookie poate fi scris atât de către server cât și de scriptul client-side JavaScript creează cookie cu ajutorul proprietății cookie a obiectului Document: document.cookie Datele din cookie sunt salvate în formă de perechi nume-valoare expires specifică data de la care datele memorate nu mai sunt accesibile Exemplu document.cookie="nume=Avram; prenume=Ionel; expires=Mon, 28 Dec 2016 16:10:30 UTC; path=/"
Cookies și AJAX path specifică pentru ce directoare de pe server sunt accesibile datele stocate de cookie expires și path sunt opționale: Dacă expires nu este specificat datele sunt accesibile până la închiderea browserului; Dacă path nu este specificat, datele sunt disponibile pentru întreg domeniul, ex. usv.ro expires se specifică în format de timp universal Ștergerea unui cookie se face setând data de expirare în trecut.
Cookies și AJAX Exemplu (script) <script> var d; function setcookie(){ d = new Date(); d.setTime(d.getTime() + 10*1000); // 10 secunde var expires = "expires="+ d.toUTCString(); name=prompt('Your Name'); document.cookie="nume="+name+";"+expires; } function showcookie() { document.getElementById("log").innerHTML=document.cookie; function clearcookie() { dex = new Date(); dex.setTime(dex.getTime() -(1*24*60*60*1000)); var expires = "expires="+ dex.toUTCString(); document.cookie="nume=doru;"+expires; </script>
Cookies și AJAX Exemplu (body) <body> <input type="button" value="set cookie" onclick="setcookie()"><br> <input type="button" value="clear cookie" onclick="clearcookie()"><br> <input type="button" value="show cookie" onclick="showcookie()"><br> <div id="log"></div> </body>
Cookies și AJAX AJAX înseamnă Asynchronous JavaScript And XML AJAX Nu este un limbaj de programare AJAX utilizează doar o combinație între: un obiect construit în browser, XMLHttpRequest - pentru a cere date de la server JavaScript și HTML DOM - pentru afișarea datelor la utilizator Permite actualizarea asincronă a paginilor prin schimb de date cu serverul „în spatele scenei”
Cookies și AJAX Cum funcționează? Un eveniment se produce în pagină (ex. click) JavaScript creează un obiect XMLHttpRequest Obiectul XMLHttpRequest trimite o cerere la serverul Web Serverul procesează cererea Serverul trimite răspunsul înapoi la pagină Răspunsul este citit de JavaScript O acțiune potrivită este efectuată de JavaScript (ex. actualizarea paginii sau a unei părți a ei)
Cookies și AJAX Obiectul XMLHttpRequest se creează cu: variabila = new XMLHttpRequest(); //pentru browserele moderne variabila = new ActiveXObject("Microsoft.XMLHTTP"); // pentru versiunile mai vechi de Internet Explorer (<7) Exemplu var cerere; if (window.XMLHttpRequest) { cerere = new XMLHttpRequest(); } else { // cod pentru IE6, IE5 cerere = new ActiveXObject("Microsoft.XMLHTTP"); }
Cookies și AJAX * selectiv Metoda* Descriere new XMLHttpRequest() Creează un obiect XMLHttpRequest nou abort() Anulează cererea curentă open(metodă,url,mod,user,pass) Deschide cererea metodă: tipul cererii, GET sau POST url: locația fișierului de pe serverul Web mod: true (asincron) sau false (sincron) user: optional - nume utilizator psw: optional – parolă send() Trimite cererea la server și primește răspunsul. Folosită cu GET send(string) Trimite cererea la server și primește răspunsul. Folosită cu POST setRequestHeader(eticheta, valoare) Adaugă o pereche etichetă-valoare la antetul care se trimite (de regulă folosită cu POST) Când se solicită autentificare
Cookies și AJAX Proprietatea* Descriere onreadystatechange Definește funcția de apelat când se schimbă proprietatea readyState readyState Păstrează starea obiectului XMLHttpRequest. 0: cerere neinițializată; 1: conexiune stabilită cu serverul; 2: cerere primită 3: procesare cerere; 4: cerere încheiată și răspuns pregătit responseText Întoarce răspunsul ca șir text responseXML Întoarce răspunsul ca date XML status * Întoarce numărul stării răspunsului: 200: "OK"; 403: "Forbidden"; 404: "Not Found"; 500: Internal Server Error * selectiv
Cookies și AJAX Exemple de trimitere a cererii: Fără parametri cerere=new XMLHttpRequest(); cerere.open("GET", "exemplu.php", true); cerere.send(); Cu parametri cerere=new XMLHttpRequest(); var nume="Popescu"; var prenume="Alexandru"; cerere.open("GET", "exemplu.php?nume=" +nume+"&prenume="+prenume, true); cerere.send(); Prin metoda POST cerere.open("POST", "exemplu.asp", true); cerere.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); cerere.send("nume=Popescu&prenume=Alexandru");
Exemplu complet: fișierul index.html Cookies și AJAX Exemplu complet: fișierul index.html <script> function showform(){ var request; request=new XMLHttpRequest(); request.onreadystatechange=function(){ if(request.readyState==4 && request.status==200){ document.getElementById('formdiv').style.display="block"; formText=request.responseText; document.getElementById('formdiv').innerHTML=formText; } request.open('GET','form.html',true); request.send(); function closediv() { document.getElementById('formdiv').style.display="none"; </script>
fișierul index.html - continuare fișierul index.html - body Cookies și AJAX fișierul index.html - continuare <script> function afiseaza_email(){ var email=document.f1.email.value; document.getelementById('raspuns').innerHTML=email; closediv(); } </script> fișierul index.html - body <body> <a href='javascript:void(0)' onclick='showform()'>Aboneaza-te la newsletter</a> <div id='formdiv'></div> <div id='raspuns'></div> </body>
Cookies și AJAX fișierul form.html <div id='closediv'> <a href='javascript:void(0)' onclick="closediv()"><img src='close.png'></a> </div> <form name='f1' style="position:relative; margin-top:30px;"> <input type='text' name='email' placeholder="emailul tau"> <input type="button" value="Aboneaza-te" onclick="afiseaza_email()"> </form> În exemplul de mai sus formularul este adus în pagina principală printr-o cerere XMLHttpRequest către fișierul formular.html și afișat în div-ul formdiv formular.html nu face nicio prelucrare, este un simplu formular Adresa introdusă în formular este citită și afișată în div-ul raspuns de către funcția afișeaza_email()