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).

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: 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.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Ajax cu GET si PHP

Last accessed pages

  1. Pronumele direct si indirect (758)
  2. Gramatica limbii engleze - Prezentare Generala (100355)
  3. Teste spaniola - Tests y ejercicios de Español - Gramática (6921)
  4. Prepozitii - Prepositions (10440)
  5. Prezentul simplu si continuu - Present Tense Simple and Continuous (46073)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2367)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1301)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1197)
  4. Conditional IF in Limba Engleza - Fraze Conditionale (856)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (804)