Ajax este prescurtarea de la Asynchronous Javascript And XML dar cel mai simplu se poate numi ca fiind un "javascript cu steroizi". Un limbaj de programare destul de complicat pentru un programator incepator. Ajax a fost facut in prejma lui 2005 popular de catre Google dar si alti mari webdeveloperi.
In principal Ajax nu este un limbaj de programare ci mai degraba un atu in realizarea unui website.
Ajax face posibila comunicarea cu serverul fara a fi nevoie sa incarce o noua pagina. Atata tot nci mai mult nici mai putin.
Si ca sa exemplificam putin, atunci cand vrem sa avem acces la o baza de date sau vrem sa trimitem informatii, in mod normal ar trebuii sa folosim un formular HTML pentru a lua posta informatii pe server. Dupa aceea trebuie sa apasam pe submit si sa asteptam ca sarverul sa raspunda pentru ca mai apoi sa incarce o noua pagina cu rezultatele. Cu siguranta ca multi dintre voi sunt au facut acest lucru de multe ori si cunoasteti sentimentul de nerabdare pe care il procura asteptarea in fata unui server lent sau supraincarcat.
Aici intervine Ajax, facand posibila comunicarea libera cu serverul fara a fi nevoie sa incarce o noua pagina, reducand astfel timpul de asteptare.
Sa incepem cu inceputul
Vom crea mai intai un formular in HTML dupa cum urmeaza, si il vom numi "order.html"
<html>
<body> <form name='myForm'> Name: <input type='text' name='username' /> <br /> Time: <input type='text' name='time' /> </form>
</body>
</html>
Campul Name va fi completat de catre user iar de Time se va ocupa Ajax.Dupa cum se observa nu exista un buton submit in formularul anterior.
Tutorial Ajax - Aprofundare
Este bine sa mentionam ca nu toate browserele accepta acelasi cod javascript pentru a creea un obiect ajax dar il vom face compatibil cu cele mai importante browsere folosite pe la noi si anume: Internet Explorer, Opera, Firefox si deasemenea un browser care nu prea e folosit pe la noi dar destul de utilizat si anume Safari In scriptul urmator vom folosi metoda cunoscuta sub numele de "try and catch". In traducere libera si pe intelesul tuturor acest script va incerca un fragment de cod iar daca acesta cauzeaza o eroare va continua sa incerce un nou fragment. In mod normal cand acest lucru se intampla sriptul nu mai ruleaza. Vom "incerca" sa creem un XMLHttpRequest iar de fiecare dat cand primim o eroare vom continua cu rularea scriptului.
<html>
<body> <script language="javascript" type="text/javascript"> <!-- //Scriptul pentru Browser function ajaxFunction(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Daca ceva nu e in regula alert("Your browser broke!"); return false; } } } } //--> </script> <form name='myForm'> Name: <input type='text' name='username' /> <br /> Time: <input type='text' name='time' /> </form> </body> </html>
Scriptul este destul de incalcit...ce bine ca aveti landemana un mouse si puteti face un copy/paste :
Dar lasand lasand la o parte gluma, in scriptul anterior am facut trei incercari sa realizam un obiect XMLHttpRequest:
- ajaxRequest = new XMLHttpRequest();
Acest fragment este pentru Opera, Firefox si Safari. In cazul in care obtinem o eroare vom continua cu inca doua fragmete de script pentru Internet Explorer.
- ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
- ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
In cazul in care nici acest fragment nu functioneaza inseamna ca avem de-a face cu un browser destul de vechi care nu suporta XMLHttpRequest si implicit nici ajax.
Ajax - XMLHttpRequest Object
Innainte sa trimite informatii catre server trebuie mai intai sa scriem o functie care va fi capabila sa primeasca aceasta informatie. Vom trata pe rand fiecare parte a scriptului care trebuie trebuie inclusa in documentul nostru.
Vom incepe cu onreadystatechange. Aceasta proprietate a XMLHttpRequest, face posibila stocarea functiei care va procesa raspunsul serverului.
// Crearea unei functii care va primii informatia trimisa de catre server
ajaxRequest.onreadystatechange = function(){
// inca ceva script aici
}
O alta proprietate este readyState. Aceasta stocheaza stadiul in care se afla raspunsului serverului. Raspunsul se poate poate procesa, downlada, sau poate fi in curs de completare. Singura valoare pe care o vom aborda si care de fapt ne intereseaza cu adevarat, este accea din care rezulta ca operatiunea a fost completata.
Atunci cand readyState are valoarea 4 inseamna ca operatiunea a fost completata si vom avea acces la informatiile trimise de catre server.
// Crearea unei functii care va primii informatia trimisa de catre server
ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){
//Acesta ofera acces la informatia trimisa de catre server
}
}
In momentul in care am primit raspunsul putem folosi responseText, care il va prelua. Vom numi formularul nostru "myform" si vom folosi document.FormName.InputName.value pentru a accesa formularul cu ajutorul javascript
// Crearea unei functii care va primii informatia trimisa de catre server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText;
}
}
Cum Trimitem un request serverului? foarte simplu
- Stabilind adresa de URL a scriptului care va fi foloit in aplicatia noastra Ajax.
- Folosind functia de trimitere pentru a.....trimite informatia....destul de logic, zic eu.
Vom crea un document pe care il vom numi "serverTime.php". Presupunand ca fisierul nostru "order.html" este in acelasi folder cu "serverTime.php" vom avea codul:
// Crearea unei functii care va primii informatia trimisa de catre server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText; } }
ajaxRequest.open("GET", "serverTime.php", true);
Iar acum vom adauga functia de trimitere:
// Crearea unei functii care va primii informatia trimisa de catre server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "serverTime.php", true);
ajaxRequest.send(null);
Incheiere
Ar fi cazul sa cam punem fragmentele de script cap la cap si sa facem ceva util cu ele. Vom face ca atunci cand un user scrie ceva in campul Name si muta cursorul in campul Time acesta sa se completeza automat cu ora serverului.
Vom volosi in acest sens atributul onChange.
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // Variabilele sunt urmatoarele
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Daca ceva nu e in regula
alert("Your browser broke!");
return false;
}
}
}
// Crearea unei functii care va primii informatia trimisa de catre server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "serverTime.php", true);
ajaxRequest.send(null);
}
//-->
</script><form name='myForm'>
Name: <input type='text' onChange="ajaxFunction();" name='username' /> <br />
Time: <input type='text' name='time' />
</form>
</body>
</html>
Si cu toate aste am terminat cu partea mai dificila si vom continua cu scrierea documentului php si anume "serverTime.php" pe care la pomenit dar care inca nu exista.
Pentru ca scripturile sa poata colabora reciproc ar trebui sa fie in acelasi director.
<?php
echo date("H:i:s");
?>
