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
Care tag HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Ce pseudo-element adauga un anume stil la prima linie de text din element?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.
window.location window.self window.status
var url = window.location;
alert(url);
Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
seven - eight ten - six three - five
This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
diez - seis siete - ocho tres - cinco
Esta fruta tiene siete u ocho semillas.
- Acest fruct are sapte sau opt seminte.
Ajax cu GET si PHP

Last accessed pages

  1. Trecut perfect si Trecutul perfect continuu - Present perfect and Continuous (2822)
  2. Zoo Amigos (922)
  3. Zilele saptamanii - Lunile anului - Anotimpurile - Engleza (978)
  4. Zuma Honey (483)
  5. Prezentul simplu si continuu - Present Tense Simple and Continuous (6072)

Popular pages this month

  1. Bubbles3 (3094)
  2. Gramatica limbii engleze - Prezentare Generala (2931)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2163)
  4. Butterfly Kyodai (2012)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1827)