Curs Ajax

Toate script-urile Ajax folosesc obiectul XMLHttpRequest, astfel e util sa cunoasteti elementele principale ale acestui obiect.
Scopul obiectului XMLHttpRequest este de a permite JavaScript sa formuleze cereri HTML si sa le trimita la server, dand astfel posibilitatea comunicarii cu serverul si afisarea datelor primite fara a fi necesara reincarcarea paginii, in plus, pot fi procesate in paralel mai multe conexiuni cu serverul, fara a bloca browser-ul pana la primirea raspunsului.
Inainte de a putea utiliza XMLHttpRequest, trebuie creata o instanta a acestui obiect cu formula:
                var xmlHttp = new XMLHttpRequest()   ("xmlHttp" poate fi orice nume de variabila)
XMLHttpRequest este suportat de toate browserele moderne si de principalele sisteme de operare: Windows, UNIX/Linux si Mac OS; totusi, implementarea acestuia difera intre unele navigatoare web, versiuni de Internet Explorer mai mici de 7 creaza acest obiect ca obiect de tip ActiveX. Trebuie sa tineti cont de acest aspect si sa creati instantierea obiectului XMLHttpRequest in functie de browser-ul care va fi folosit, pe de o parte pentru Mozila Firefox, Opera, Safari, .. (si IE7+, care urmaresc standardul de baza) si pe de alta parte pentru Internet Explorer care, in functie de versiune, creaza obiectul ca ActiveX.

var ob_ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
- La variabila aceasta se verifica daca browser-ul poate apela direct obiectul "XMLHttpRequest" sau prin "ActiveX", si in functie de aceasta, atribuie variabilei instanta la obiect.

Proprietatile si metodele obiectului XMLHttpRequest

Dupa ce a fost creata instanta la XMLHttpRequest, puteti folosi proprietatile si metodele acestui obiect. Mai jos este prezentata lista acestora.
        Proprietati

Metode

Ca sa intelegeti mai bine cum se foloseste si ce face "XMLHttpRequest", iata un exemplu practic:
1. - Creati un fisier .txt cu un text simplu, de exemplu fisierul "test.txt" in care este scris un text oarecare, cum ar fi sirul "Raspunsul primit de la fisierul la care se trimite cererea.".
2. - Adaugati codul de mai jos intr-un fisier HTML, numit de exemplu "teste.html", pe care-l creati in acelasi director in care a fost creat fisierul "test.txt".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Teste XMLHttpRequest</title>

<script>
// Functia care trimite datele la un fisier extern si returneaza raspunsul
function makerequest(serverPage, tagID) { //alert(serverPage+' - '+tagID);
 var ob_ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // XMLHttpRequest object

 ob_ajax.open("GET", serverPage);			// Defineste datele pt. efectuarea cererii
 ob_ajax.send(null);		// Efectuiaza trimiterea datelor

 // Verifica starea cererii
 // Daca raspunsul e primit complet, il transfera in eticheta HTML cu id-ul din "tagID"
 ob_ajax.onreadystatechange = function() {
 if (ob_ajax.readyState == 4) {
 document.getElementById(tagID).innerHTML = ob_ajax.responseText;
 }
 }
}
</script>
</head>
<body>

<h5 style="cursor:pointer;" onclick="makerequest('test.txt', 'raspuns')"><u><u>Click</u></u></h5>
<div id="raspuns">Continutul initial din tag-ul DIV</div>

</body>
</html>
		
- Acest cod este un document HTML care are in sectiunea HEAD, pe langa titlu, un script JavaScript care foloseste obiectul XMLHttpRequest, iar in sectiunea BODY are un tag <h5> folosit pentru a actiona scriptul JS si un DIV cu un text in el.
- Stilul style="cursor:pointer;" din tag-ul "h5" face cursorul mouse-ului sa capete aspectul de manuta (intarind ideea de buton), iar onclick="makerequest('test.txt', 'raspuns')" apelaza functia "makerequest()", transferandu-i ca argumente numele fisierului extern "test.txt" (care va fi apelat de script) si id-ul div-ului (in care va fi adaugat raspunsul).
- Partea importanta este functia "makerequest()", aceasta preia doi parametri, primul pentru numele fisierului la care va face apelul iar al doile reprezinta id-ul etichetei HTML in care va fi afisat raspunsul.
- La inceput se creaza, in variabila "ob_ajax", instanta la obiectul XMLHttpRequest, prin apelarea functiei "get_XmlHttp()", care defineste acest obiect in functie de browser. Apoi, folosind metoda "open()" la instanta acestui obiect (adica ob_ajax.open()), se creaza cererea care cuprinde datele acesteia (metoda de trimitere a datelor, GET, si numele fisierului care va fi apelat). Al treilea argument, care poate fi "true" sau "false", este optional si nu l-am mai adaugat.
- Dupa aceasta se foloseste metoda "send(null)" care trimite cererea.
- Apoi, cu proprietatea "onreadystatechange", se verifica starea cererii si cand raspunsul este primit complet (readyState == 4) va fi transferat, prin proprietatea "responseText" si obiectul "getElementById()", in eticheta HTML care are id-ul din "tagID".
- Functia "makerequest()" apeleaza fisierul "test.txt" ca si cum acesta ar fi fost deschis intr-o fereastra a browser-ului. Raspunsul primit de acesta, si anume datele pe care le-ar fi afisat in browser (in acest caz, continutul fisierului), sunt primite "in ascuns", fara a deschide vreo fereastra, si stocate in "ob_ajax.responseText", care apoi pot fi prelucrate de scriptul JavaScript dupa cum dorim.
Acest exemplu va afisa urmatorul rezultat (dati click pe cuvantul "Click" de mai jos):
Click
Continutul initial din tag-ul DIV

Acesta a fost un exemplu simplu, altele mai complicate pot face cereri mai complexe si determinarea de actiuni diferite in functie de starea cereri si raspunsul primit; toate acestea folosind metodele si proprietatile obiectului XMLHttpRequest prezentate mai sus si alte functii si obiecte care tin de DOM. Puteti adauga si alte functii sau comenzi in functia "makerequest()" prin care sa prelucrati raspunsul primit.
Daca, de exemplu, fisierele sunt pe un server si doriti sa preluati starea raspunsului primit de la server (adica "OK", Pagina negasita, Eroare de server, sau alte erori), puteti folosi, dupa "send()" (recomandat in cadrul operatiilor dupa "readyState") una din proprietatile: status sau statusText.
Pentru a vedea cum functioneaza, aplicati la exemplul prezentat mai sus, in cadrul acoladei   if (ob_ajax.readyState == 4) { ... }, urmatoarea expresie:
                alert(ob_ajax.status+' - '+ob_ajax.statusText);

Apelul, cererea poate fi facuta la fisiere care pot prelucra, printr-un limbaj de programare, datele primite (gen PHP, ASP) si trimite raspunsul in functie de acestea; tehnologie cunoscuta sub numele de AJAX. In lectiile urmatoare puteti invata mai multe despre aceste lucruri.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
Obiectul XMLHttpRequest

Last accessed pages

  1. OOP - Clase si Obiecte - Creare Clasa (6765)
  2. Verbe ca si Gustar (1846)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (66723)
  4. Alte forme complexe cu DIV si CSS (479)
  5. Introducere in HTML (24987)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (767)
  2. Exercitii engleza - English Tests and exercises - Grammar (596)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (587)
  4. Gramatica limbii engleze - Prezentare Generala (580)
  5. Prezentul simplu - Exercitii si teste incepatori (504)