Ajax, mini introducere

Ajax

Ajax este un nume interesant pentru un tip de programare facut popular de catre cei de la Google in 2005 si alti dezvoltatori web. Ajax este un acronim pentru Asynchronous Javascript And XML.

De asemenea ne putem gandi la Ajax ca la o versiune s Javascriptului dopata:P

Ajax - Javascript imbunatatit

Cand a fost introdus javascriptul, oamenilor le-au placut toate chestiile cool pe care le puteau face cu browserele web pentru a imbunatati experienta utilizatorilor si ai face sa interactioneze mai bine si mai usor cu paginile vizitate. Puteau valida forumurile, face popup messages mai interesante, sa face utilitare web cool si multe altele. Insa, Javascript nu oferea nici o posibilitate de a transmite informatii intre browserele web si server-ul web.

Daca cineva vroia sa transfere informatii de la o baza de date de pe un server sau sa trimita informatii de la utilizator catre un script de pe server precum PHP, trebuia sa faci mai intai un form HTML pentru a trimite prin POST sau Get date catre server. Utilizatorul trebuia apoi sa faca click pe “Submit”, sa astepte ca serverul sa raspunda si de abia atunci o noua pagina s-ar fi incarcat cu rezultatele. Si nu era prea placut sa se astepte atat de mult.

Ajax incearca sa remedieze aceasta problema lasand Javascriptul sa comunice direct cu serverul, folosind un obiect special Javascript XMLHttpRequest. Cu acest obiect, Javascript poate prelua informatii de la server fara a mai fi nevoie sa se incarce o noua pagina!

Ajax – O solutie?

Destul de adevarat. Folosind programarea in Ajax veti putea sa schimbati date cu un server web fara sa mai fie necesar incarcarea unei noi pagini. In loc sa priviti Ajax-ul ca “un nou mod de a dezvolta site-uri web” ar trebui sa-l priviti ca o noua arma pe care o puteti adauga arsenalului vostru de programare.
 
Ajax poate fi putin greoi pentru cei cu putina experienta in programarea web. Este recomandat sa stiti bine inainte sa va apucati de Ajax HTML si Javascript mai intai.

JavaScript Partea 1

Acest topic se va indinde pe mai multe posturi.
Postul de azi cuprinde : Javascript Basic
Next…Javascript Intermediate, iar in final vor fi multe exemple cu cod explicate.


JavaScript Basic

Dupa cum spune si numele ne ocupam de bazele acestui limbaj. Ce cunostinte anterioare va trebuie?? Aveti nevoie de sa stiti cum sa folositi HTML-ul si sa puteti edita documente HTML. De asemenea aveti nevoie de un browser care sa suporte JavaScript. 
JavaScript este incorporat in codul HTML si codul scriptului se gaseste in interiorul tagurilor &ls script > si &ls /script >
Ex)

&ls script language="JavaScript" >

/* Codul JavaScript*/ 

&ls /script >

 Comanda “language= “JavaScript” ajuta browserele sa recunoasca codul care urmeaza si sa-l asocieze limbajului JavaScript si nu unui alt limbaj.

Puteti avea oricate taguri &ls script >, oricate aveti nevoie in corpul documentului HTML (in “body”) . Tineti minte ca orice tag deschis trebuie inchis!!Altfel veti avea erori si nu veti sti de unde. De asemenea daca folositi functii scrise in JavaScript trebuie sa le scrieti codul in interiorul tagurilor &ls head >... &ls/head > : in felul acesta functiile voastre vor fi incarcate inainte ca pagina sa fie afisata si nu veti vedea tot felul de erori. Un exemplu ar fi:

 &ls head >
&ls title > Me here:D &ls /title >
&ls script language="JavaScript" >

function scriu_functie() 
{ 
JavaScript Stuff...
} 

&ls /script >
&ls /head >

Cum ar arata un buton adaugat in pagina HTML cu JavaScript?

&ls form >
&ls input type="button" value="See Some Text" name="button2" onclick="window.status='You clicked the button!'; return true" >
&ls /form >
Ce face codul..Sa vedem:
&ls form >
Acest tag creeaza un form astfel incat sa putem folosi butonul nostru nou creat

&ls input >
Creeaza o zona in care putem adauga ceva.
type="button"
Aceasta comanda declara zona de imput de mai sus ca va fi un buton
value="Click Me"
Aceasta va fi valoarea pe care o veti putea vedea pe butonul vostru. Puteti scrie aici orice text doriti
name="button1"
Puteti sa-I dati si un nume butonului pentru a-l putea folosi in viitor in script si pentru a avea diferite functii

Un alt exemplu: acum vom avea 3 butoane care vor modifica cand vor fi apasate culoarea backgroundului paginii unde vor fi adaugat:

&ls form> 
&ls input type="button" value="Change to Yellow!" name="button3" onclick="document.bgColor='yellow'" >
 
&ls input type="button" value="Change to Red!" name="button4" onclick="document.bgColor='red'" >
 
&ls input type="button" value="Change back!" name="button5" onclick="document.bgColor='white'"> &ls/form >

Cum arata un buton de BACK? 

Daca vreti sa aveti in pagina voastra web un buton care sa permita celor care va viziteaza pagina sa se reintoarca la pagina anterioara ati putea scrie:

&ls form > 
&ls input type="button" value="Click here to go back" onclick="history.back()" >
&ls /form > 

Singura diferenta se gaseste aici:
....onClick="history.back()"

onClick=” ” spune browserului sa execute comanda din ghilimele cand este apasat butonul. Functia history.back() are efectul dupa cum ii spune si numele: intoarce vizitatorul la ultima pagina din istoria listei lor

Si daca..
Am vrea avem un buton care sa ne duca un pas mai departe in istoria listei noastre? Am putea scrie:
history.forward()
Dar daca vrem sa specificam un numar de pasi cu care sa mergem inainte sau inapoi prin istoria noastra :
history.go(-numar) sau history.go(numar)
Daca folositi un numar negativ butonul va va duce ianpoi cu acel numar, iar la pozitiv veti merge inainte.

~end of partea intai~