INTERFETE 2 WEB
|
|
|
In principal AJAX nu este un limbaj de programare ci mai degraba un atuu in realizarea unei interfete web. AJAX face posibila comunicarea cu serverul fara a fi nevoie sa incarce o noua pagina, reducand astfel timpul de asteptare. AJAX foloseste o combinatie de :
CSS pentru stilul de afisare al elementlor
DOM, Document Object Model, acesat prin intermediului unui limbaj de scripting client-side precum JavaScript pentru a interactiunea cu pagina si afisarea dinamica a informatiei în pagina
Obiectul XMLHttpRequest pentru schimbul asincron de date cu serverul web
XML ca format de transfer al datelor trimise în comunicatia client-server (nu este însa unicul format suportat)
AJAX se bazeaza pe urmatoarele standarde web: JavaScript, XML, HTML, CSS. Aplicatiile AJAX sunt dependente de platforme si sunt specifice browserelor.
La anumite evenimente din pagina sau la un anumit interval de timp, se apeleaza un obiect de tip XMLHttpRequest care va cere anumite date de la server iar la primirea acestora, le va trimite pentru a fi afisate în pagina fara ca aceasta sa se reîncarce, doar prin modificarea unor elemente ale paginii. Formatul în care sunt primite si trimise datele poate fi XML, JSON sau chiar text. Posibilitatea de a reîncarca datele din pagina ofera o experienta utilizator mult îmbunatatita prin minimizarea timpului de asteptare. Codul standard pentru creearea unui obiect de tip XMLHttpRequest este:
function ajaxFunction(){
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
Proprietati ale XMLHttpRequest
Pentru a comunica cu serverul trebuie sa se cunoasca cateva proprietati ale obiectului XMLHttpRequest::
onreadystatechange,
readyState,
responseText.
Proprietatea onreadystatechange stocheaza functia care va procesa raspunsul primit de la server. Aceasta nu este o metoda, functia este stocata in proprietate pentru a fi apelata automat. Exemplu:
xmlHttp.onreadystatechange=function(){
// code
}
Proprietatea readyState retine statusul raspunsului de la server. La schimbarea readyState ,functia onreadystatechange se va executa. Valorile posibile pentru proprietatea readyState sunt:
Status | Descriere |
0 | Requestul nu este initializat |
1 | Requestul a fost setat |
2 | Requestul a fost trimis |
3 | Requestul este in progres |
4 | Requestul este complet |
Exemplu:
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
// Get the data from the server's response
}
}
Datele trimite de server pot fi gasite in cu proprietatea responseText. In exemplul urmator, se seteaza valoarea campului de intrare "time"cu responseText:
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4) {
document.myForm.time.value = xmlHttp.responseText;
}
}
Trimiterea unui request la server:
Pentru a trimite un request la server se foloseste metoda open() si send(). Metoda open() are trei argumente. Primul defineste ce metoda sa se foloseasca la trimiterea unui request (GET or POST). Al doilea argument specifica URL-ul scriptului server-side. Al treilea argument specifica faptul ca requestul trebuie sa fie asincron. Metoda send() trimite request la server. Considerand ca fisierul HTML and ASP sunt in acelasi director codul poate sa fie urmatorul:
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
Trebuie sa se decida cand se executa functia AJAX. Se va lasa ca functia sa ruleze atunci cand utilizatorul introduce text in camp:
<form name="myForm">
Name: <input type="text" onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
</form>
Fisierul AJAX updatat "testAjax.htm" arata astfel:
<html>
<body>
<script type="text/javascript">
function ajaxFunction(){
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4) {
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
Name: <input type="text" onkeyup="ajaxFunction();"
name="username"/>
Time: <input type="text" name="time" />
</form>
</body>
</html>
AJAX - The Server-Side ASP Script
Se va crea scriptul care afiseaza timpul de pe server. Datele returnate de server sunt stocate in responseText. In acest exemplu se doreste trimiterea timpului current. Codul in "time.asp" arata astfel:
<%
response.expires=-1
response.write(time)
%>
Proprietatea Expires seteaza in minute cat timp o pagina va fi retinuta in browser. Response.Expires=-1 indica faptul ca pagina nu va fi niciodata retinuta.
|
Copyright interfete 2 web 2008 |
