Utilizare Ajax cu GET si PHP

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.
Obiectul XMLHttpRequest <<-- Anterior --- Urmator -->> Ajax cu POST si ...

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a crea o caseta de adaugare text?
<form> <input> <div>
<input type="text" name="a_name" value="val" />
Ce proprietate CSS se foloseste pentru a afisa textul cu majuscule-mici?
display font-variant font-style
h3 {
  font-variant: small-caps;
}
Ce instructiune afiseaza o fereastra cu un mesaj in ea?
for() Date() alert()
var msg = "Viziteaza CoursesWeb.net";
alert(msg);
Indicati codul PHP prin care se obtine IP-ul utilizatorului.
$_SERVER["HTTP_USER_AGENT"] $_SERVER["REMOTE_ADDR"] $_GET[]
$ip = $_SERVER["REMOTE_ADDR"];
echo $ip;
Cum se traduce cuvantul "actually"?
actual de fapt acum
He actually came on time.
- De fapt, el a venit la timp.
Cum se traduce expresia: "Hace buen tiempo"?
Face timp E vreme frumoasa Drum bun
Hoy hace buen tiempo.
- Astazi e vreme frumoasa.
Ajax cu GET si PHP - Tutorial Ajax