Curs Ajax

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 atribut e folosit in tag-ul <img> pentru adresa imaginii?
href src rel
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS ascunde elementul in pagina?
display: none; display: inline; position: relative;
#id {
  display: none;
}
Ce instructiune opreste executia lui while() sau for() ?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}
Indicati functia utilizata pentru a crea constante.
define() include() defined()
define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;
Care este forma de plural a substativului "class" (clasa)?
classes clases clasis
This school has three classes.
- Scoala asta are trei clase.
Care este pluralul substativului "voz" (voce)?
vose voze voces
Escuché dos voces.
- Am auzit doua voci.
Ajax cu GET si PHP

Last accessed pages

  1. Prezentul continuu - Exercitii si teste incepatori (34365)
  2. Exercitii engleza - English Tests and exercises - Grammar (103181)
  3. Trecutul continuu - Exercitii si teste incepatori (12210)
  4. Creare si editare pagini HTML (80024)
  5. Curs HTML gratuit Tutoriale HTML5 (184912)

Popular pages this month

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