Seminar 2 UIA FINAL

Urmatorul exemplu numara cate cereri HTTP se fac dinspre browser spre server, in sesiunea curenta.
Pagina client:
<html>
<head>
<script type="text/javascript">
var xhr
function modifica()
{
try
{
xhr = new ActiveXObject("Msxml2.XMLHTTP")
} catch (e)
{
try
{
xhr = new ActiveXObject("Microsoft.XMLHTTP")
} catch (e)
{
xhr = false
}
}

if (!xhr && typeof XMLHttpRequest !="undefined")
{
xhr = new XMLHttpRequest()
}

xhr.open("GET","numaratoare.php?a=1&b=2")

xhr.onreadystatechange=function()
{
if (xhr.readyState != 4) return;
document.getElementById("mesaj").innerHTML+="<br>"+ xhr.responseText
}
xhr.send(null)
}
</script>
</head>

<body>
<div id="mesaj"></div>
<button onmouseover="modifica()">Click Me</button>
</body>
</html>

Trimiterea variabilelor a si b spre
script.php
Am folosit o sintaxa alternativa, cu o
functie ANONIMA
Daca raspunsul e ok (readystate=4) se
adauga raspunsul la continutul
existent al DIVului "mesaj" (pe un
rand nou, vezi <br>-ul)
Obs: testul de status 200 lipseste, pt
a scurta exemplul
Declansarea comunicarii asincrone
- e specificat evenimentul
(MouseOver)
- e specificata functia ce instantiaza
XHR si se ocupa de schimbul de date
DIV gol rezervat pt raspunsul
serverului
Browser sniffing pt IE si Mozilla

Scriptul server (trebuie sa aiba numele numaratoare.php si sa se afle in acelasi folder cu pagina client,
de exemplu htdocs!)

<?php
session_start();
if (isset($_SESSION["a"])) //se verifica daca exista variabila in sesiune; daca da, se incrementeaza
$_SESSION["a"]++;
else $_SESSION["a"]=1; //daca nu exista, variabila se initializeaza cu 1
print "Aceasta e conectarea nr.".$_SESSION["a"]."din sesiunea curenta<br/>";
print " Datele sosite la server sunt: ".$_SERVER["QUERY_STRING"]."<br/>";
?>

Observatii:
Scriptul numara dialogurile care au loc intre client si server (la primul schimb creeaza o variabila in sesiune, apoi o tot
mareste la fiecare cerere HTTP);
Pe langa textul care indica numarul conectarii asincrone, se returneaza si datele sosite la server, citite direct din
$_SERVER["QUERY_STRING"] (puteau fi luate si una cate una din $_GET["a"] sau $_GET["b"]);
Atentie, numaratoarea continua chiar si dupa Refresh scriptului (datorita sesiunii), dar si dupa restartarea browserului!
Si chiar dupa restartarea Apacheului!

Cum e posibil asta in conditiile in care variabilele sesiune sunt in mod implicit stocate pe server si sesiunea se distruge
automat la inchiderea browserului sau oprirea serverului?

Versiunile recente ale browserelor au implementat un mecanism automat de a transfera sesiunea intr-un cookie, la
momentul opririi browserului. La repornirea browserului, acesta isi recupereaza sesiunea din cookie! Evident ca nici
resetarea serverului nu afecteaza acest proces.

Asadar, daca dorim totusi sa distrugem sesiunea, avem variantele:
- sa punem in codul PHP comanda session_destroy() dupa un anumit numar de schimburi de date;
- sa stergem manual cookieul in care browserul transfera continutul sesiunii (cookieul creat de localhost, in Firefox, cu
Privacy remove individual cookies search dupa localhost si Remove Cookie cand e gasit);
- sa dezactivam din browserul optiunea de salvare automata a sesiunii (in Firefox, General When Firefox Starts show
my windows and tabs from last time se va inlocui cu Show a blank page).

Practic, dac nu lum nici una din aceste msuri, nu mai este nici o diferen (de comportament) ntre sesiune i cookie.

Urmrii consola Firebug n timpul transferului:

Extindei scriptul PHPla varianta:

<?php
session_start();

if (isset($_COOKIE["b"]))
{
setcookie("b",$_COOKIE["b"]+1,time()+3600);
print "<b>Aceasta e revenirea cu nr.".$_COOKIE["b"]." a acestui calculator<b><br>";
}
else
{
setcookie("b",1,time()+3600);
print "<b>Aceasta e prima conectare a acestui calculator<b><br>";
}

if (isset($_SESSION["a"]))
$_SESSION["a"]++;
else
$_SESSION["a"]=1;
print "Aceasta e conectarea nr.".$_SESSION["a"]." din sesiunea curenta<br>";
print " Datele sosite la server sunt: ".$_SERVER["QUERY_STRING"]."<br>";
if ($_SESSION["a"]==10)
session_destroy();
?>

De data aceasta se fac 2 numrtori n paralel: una prin cookie, care msoar de cte ori a revenit
acelai calculator; una prin sesiune, care msoar dialogurile din sesiunea curent. Sesiunea e resetat
automat la 10.

Cadre invizibile prin tehnica Pull

<html>
<head>
function trimite(cod)
{
cadru=document.getElementById("cadruint")
cadru.src="codpostal.php?CodPostal="+cod
}

function citestedate(cdr)
{
documentcadru=cdr.contentWindow.document
raspuns=documentcadru.body.innerHTML
procesare(raspuns)
}

function procesare(rasp)
{
vector=rasp.split(",")
document.getElementById("TXoras").value=vector[0]
document.getElementById("TXjudet").value=vector[1]
document.getElementById("TXadresa").value=vector[2]
}
</script>

</head>
<body>
<iframe id=cadruint width=400 height=50 src="" onload="citestedate(this)">
</iframe>
<h1>Introduceti datele</h1>
<form >
<table>
<tr>
<td>Nume</td>
<td><input type=text id=TXnume ></td>
</tr>

<tr>
<td>CodPostal</td>
<td><input type=text id=TXcodpostal onblur="trimite(this.value)"></td>
</tr>
<tr>
Modificarea dinamica a atributului SRC
al cadrului, pentru ca acesta sa
acceseze scriptul server vizat. URLul
scriptului are atasate date de tip GET,
deci modificarea lui SRC are ca efect si
trimiterea datelor!
Extragerea continutului cadrului
Extragerea continutului lui BODY din
continutul cadrului
(liniile cu rosu sunt nucleul tehnicii pull
pagina mare trage datele din cadru)
Procesarea raspunsului si includerea sa
in pagina (in formular)
Crearea cadrului:
pt a-l face invizibil, ar trebui
dimensiuni zero, dar l-am lasat
vizibil pentru a-i putea monitoriza
continutul; SRC initial e vid;
are ev. Onload, care apeleaza
functia de extragere a datelor in
momentul in care au sosit date in
cadru (de la server)
Declansarea transferului prin
evenimentul Blur
<td>Adresa</td>
<td><input type=text id=TXadresa size=50></td>
</tr>
<tr>
<td>Oras</td>
<td><input type=text id=TXoras ></td>
</tr>
<tr>
<td>Judet</td>
<td><input type=text id=TXjudet ></td>
</tr>
<tr>
<td></td>
<td><input type=submit value=Trimite ></td>
</tr>
</table>
</form>
</body>
</html>

Scriptul server (salvat cu numele codpostal.php):
<?php
if ($_GET["CodPostal"]==400451)
print "Cluj Napoca,Cluj, Aleea Azuga...(completati detaliile)";
else
print "cod incorect, cod incorect, cod incorect";
?>

De urmarit si ce se intampla in Firebug:

A se observa:
cadrul nu a fost facut invizibil (pentru a vedea in clar raspunsul serverului);
in Firebug nu se mai poate folosi rubrica Console (aceasta monitorizeaza doar obiectul XHR) dar se poate folosi
rubrica Net (care monitorizeaza traficul dintre client si server, oferind toate detaliile schimbului de date)
spre deosebire de XHR, in corpul HTML trebuie tratate doua evenimente:
o onLoad (aplicat cadrului, pentru a apela functia de procesare a raspunsului atunci cand raspunsul a
sosit); in varianta XHR, partea aceasta era inlocuita de handlerul onReadyStateChange;
o onBlur evenimentul ce declanseaza manipularea atributului SRC (deci trimiterea datelor)
Cadre invizibile prin metoda Push
Pagina client:
<html>
<head>
function trimite(cod)
{
cadru=document.getElementById("cadruint")
cadru.src="raspunspush.php?CodPostal="+cod
}

function procesare(rasp)
{
vector=rasp.split(",")
document.getElementById("TXoras").value=vector[0]
document.getElementById("TXjudet").value=vector[1]
document.getElementById("TXadresa").value=vector[2]
}
</script>

</head>
<body>
<iframe id=cadruint width=400 height=50 src="">
</iframe>
<h1>Introduceti datele</h1>
<form >
<table>
<tr>
<td>Nume</td>
<td><input type=text id=TXnume ></td>
</tr>
<tr>
<td>CodPostal</td>
<td><input type=text id=TXcodpostal onblur="trimite(this.value)"></td>
</tr>
Cadrul (fara onLoad si fara functie de
extragere a datelor!)
Trimiterea datelor, prin manevrarea
atributului SRC al cadrului
Procesarea raspunsului (desi pagina
client nu contine nici un apel al acestei
functii!)
<tr>
<td>Adresa</td>
<td><input type=text id=TXadresa size=50></td>
</tr>
<tr>
<td>Oras</td>
<td><input type=text id=TXoras ></td>
</tr>
<tr>
<td>Judet</td>
<td><input type=text id=TXjudet ></td>
</tr>
<tr>
<td></td>
<td><input type=submit value=Trimite ></td>
</tr>
</table>
</form>
</body>
</html>
Scriptul server (raspunspush.php)

<?php

if ($_GET["CodPostal"]==400451)
$raspuns="Cluj Napoca,Cluj, Aleea Azuga...(completati detaliile)";
else
$raspuns="cod incorect, cod incorect, cod incorect";

print "<html><head><script>
function impingedate()
{
continutcadru=document.body.innerHTML
parent.procesare(continutcadru)
}
</script>
</head>
<body onload=impingedate()>"
.$raspuns.
"</body></html>";

?>

Observatii:
Liniile cu rosu sunt nucleul tehnicii
push: codul generat pentru a umple
cadrul se ocupa:
- de impingerea datelor spre pagina
parinte la momentul onLoad (la sosirea
datelor in cadru)
- de apelarea functiei de procesare din
pagina parinte
in pagina client nu exista nici un eveniment si nici un apel explicit al functiei de procesare a
raspunsului (procesare()); deoarece procesarea e declansata prin remote scripting (JavaScript
generat din PHP!)
serverul nu trimite doar date, ci si scriptul client (JavaScript) ce se ocupa de impingerea datelor
pe care le insoteste inspre pagina principala!

Seminar 2 UIA FINAL

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Seminar 2 UIA FINAL

Încărcat de

Drepturi de autor:

Formate disponibile

Urmatorul exemplu numara cate cereri HTTP se fac dinspre browser spre server, in sesiunea curenta.

S-ar putea să vă placă și