Ajax este mai mult decat utilizarea obiectului XMLHttpRequest, consta in folosirea, pe langa JavaScript, si a unui limbaj pe partea de server. Ajax poate fi utilizat in multe tipuri de aplicatii care pot fi incluse intr-o pagina web, dar cel mai folosit este pentru navigare de la un continut la altul al site-ului. Aceasta navigare se face de obicei prin link-uri, acestea contin o adresa URL catre pagina /continutul respectiv. Metoda standard de transmitere a datelor adresei URL din link-uri la server este GET.
In lectia precedenta (despre lucrul cu XMLHttpRequest) este prezentat modul de creere a unei cereri pentru apelarea unui fisier, si anume cu metoda open(method, url, flag).
- - "method" este metoda prin care vor fi trimise datele, GET sau POST (in aceasta lectie este prezentat GET).
- - "url" este adresa URL care va fi apelata, aceasta poate contine, alaturi de calea si numele fisierului care va fi apelat, si date de tip perechi "indice=valoare", care sunt transmise prin GET fisierului respectiv.
- - "flag" este o valoare booleana, "true" sau "false"(este explicata in lectia precedenta).
Intr-o adresa URL, pe langa adresa paginii /fisierului care va fi apelat, pot fi incluse si anumite valori care sa fie procesate de fisierul respectiv. Aceste valori sunt adaugate in adresa URL, dupa numele paginii si semnul '
?', sub forma de perechi
indice=valoare (despartite prin caracterul
&, daca sunt mai multe astfel de perechi).
De exemplu:
- o adresa URL simpla catre o pagina / fisier PHP, poate fi de forma http://www.domeniu_site/fisier.php (numita si "cale absoluta" deoarece contine toata calea catre pagina) sau dir/fisier.php (folosita pentru fisiere din cadrul aceluiasi server, numita si "cale relativa").
- o adresa ce contine si valori care trebuie transferate la server are forma http://www.domeniu_site/fisier.php?indice1=valoare1&indice2=valoare2 (sau dir/fisier.php?indice1=valoare1&indice2=valoare2
Metoda "open()" a obiectului XMLHttpRequest face exact acest lucru, creaza cererea care va fi trimisa la server, compusa din metoda de transfer si adresa URL a fisierului la care se face cererea, unde pot fi adaugate aceste valori (perechi indice=valoare). Apoi, prin metoda "send()" se executa trimiterea.
Partea importanta este si fisierul de pe server care va primi datele, in contextul acestui curs ma refer la fisiere PHP, dar pe partea de server poate fi folosit oricare alt limbaj acceptat de server. Astfel, daca vreti sa folositi Ajax si sa intelegeti exemplele prezentate, trebuie sa cunoasteti PHP, macar nivel incepator.
Ca sa intelegeti mai bine cum se foloseste Ajax cu GET si PHP, iata un exemplu practic:
1. - Creati pe server un fisier PHP, de exemplu "test_get.php", in care adaugati urmatorul cod:
<?php
// Daca sunt primite date prin GET, cu indice 'test'
if (isset($_GET['test'])) {
$sir = $_GET['test']; // Preia datele primite
echo 'Textul "<i>'.$sir.'"</i> contine '. strlen($sir). ' caractere si '. str_word_count($sir, 0). ' cuvinte.';
}
?>
2. - Creati un fisier HTML pe server, de exemplu "ajax_get.html", in acelasi director unde este si fisierul "test_get.php", si adaugati in el codul de mai jos (
studiati si comentariile din cod).
<!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>Exemplu Ajax GET</title>
<script type="text/javascript">
<!--
// Functia care trimite datele la un fisier PHP si returneaza raspunsul
function ajaxrequest(serverPage, tagID) {
var ob_ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // XMLHttpRequest object
// Creaza adresa URL cu perechea de date indice=valoare
var url = serverPage+'?test='+document.getElementById(tagID).innerHTML;
ob_ajax.open("GET", url, true); // Creaza cererea
ob_ajax.send(null); // Efectueaza 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="ajaxrequest('test_get.php', 'context')"><u>Click</u></h5>
<div id="context">Sir transmis cu Ajax la server si prelucrat cu PHP</div>
</body>
</html>
- Fisierul PHP "test_get.php" contine un script relativ simplu. Daca primeste date prin GET, cu indice 'test', preia valoarea lor in variabila "$sir" si cu "echo" afiseaza /returneaza un sir care contine valoarea string (text) primita si numarul de caractere si cuvinte din aceasta (calculate de functiile PHP specifice).
- In fisierul "ajax_get.html" este, in sectiunea HEAD un script pentru Ajax, iar in sectiunea BODY e un tag <h5> folosit pentru a actiona scriptul si un DIV cu un text in el.
- codul
onclick="ajaxrequest('test_get.php', 'context')", din eticheta <h5> face ca la click pe ea sa fie apelata functia "ajaxrequest()", transferandu-i ca argumente numele fisierului PHP "test_get.php" (care va fi apelat de script) si id-ul div-ului (din care va fi preluat continutul si apoi va fi adaugat raspunsul).
- Dupa ce in variabila "ob_ajax" este adaugata instanta la obiectul XMLHttpRequest, am creat in variabila "url" adresa URL cu fisierul php care va fi apelat si datele care-i sunt transmise, aceste date fiind perechea "tex=
continutul_din_div".
- Apoi, cu "open()" este creata cererea si metoda de transfer GET, iar "send()" efectueaza trimiterea datelor.
- Comform codului din scriptul PHP "
if (isset($_GET['test'])", acesta recunoaste ca au fost trimise date prin GET si cu indicele 'test', si prelucreaza datele, trimitand ca raspuns sirul pe care-l returneaza expresia din "echo".
- Dupa ce scriptul a verificat ca raspunsul a fost primit complet, il afiseaza in div-ul cu id="context".
Daca deschideti fisierul "ajax_get.html", va afisa urmatorul rezultat, dati click pe cuvantul "Click" de mai jos.
Click
Sir transmis cu Ajax la server si prelucrat cu PHP
- Daca apasati de mai multe ori, de fiecare data sirul trimis si analizat de script este cel curent, nu cel initial.
Puteti folosi Ajax ca sa apelati un script PHP nu doar pentru a afisa vreun raspuns primit, ci si pentru a prelucra si inregistra anumite date (de exemplu intr-o baza de date). Asta depinde exclusiv de scriptul PHP respectiv.
In lectia urmatoare puteti invata cum sa trimiteti date cu Ajax prin metoda POST.