Curs Ajax

Cu Ajax puteti expedia date la un script de pe server prin GET si POST in aceeasi cerere. Procedeul este similar cu trimiterea datelor prin post, de fapt este la fel, fiind doar aplicat un "artificiu".
Datele din formula adresei URL (cele de tip indice=valoare) sunt recunoscute de server ca fiind trimise prin GET. Astfel, pentru a expedia date prin GET si POST in acelasi timp, se procedeaza in felul urmator:
                - valorile pe care vrem sa le trimitem prin GET se adauga in adresa URL care va fi inclusa intr-o cerere de tip "POST" definita cu metoda "open()"
                - iar valorile care trebuie transmise prin POST se adauga in parametrul metodei "send()".

Ca sa intelegeti mai bine, aplicati si studiati exemplul de mai jos:

1. - Creati pe server un fisier PHP, de exemplu "get_post.php", in care adaugati urmatorul cod:
<?php
// Daca sunt primite date prin GET (cu indice 'timp') si prin POST (cu indice 'nume')
if (isset($_GET['timp']) && isset($_POST['nume']) && strlen(trim($_POST['nume']))>0) {
    // Preia datele primite
    $nume = $_POST['nume'];
    $timp = $_GET['timp'];

    // Afiseaza raspunsul
    echo 'Salut <b>'.$nume.'</b>.<br />Ai trimis datele la server dupa ce ai stat <i>'. $timp. '</i> secunde pe pagina.';
}
else {
    echo 'Adaugati numele in formular.';
}
?>
- Acest script PHP verifica daca sunt primite date prin GET, cu indice "timp", si prin POST cu indice "nume"; le preia si afiseaza /trimite cu "echo" raspunsul.
Expresia: strlen(trim($_POST['nume']))>0 verifica daca in formular este adaugat ceva si nu doar spatii.
- Daca nu sunt primite datele comform conditiei din expresia "if()", afiseaza mesajul de atentionare.

2. - Creati un fisier HTML pe server, de exemplu "ajax_gp.html", in acelasi director unde este si fisierul "get_post.php", si adaugati in el codul de mai jos.
<!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 si POST simultan</title>

<script type="text/javascript">
<!--
// Functia care verifica si creaza obiectul XMLHttpRequest in functie de browser
function get_XmlHttp() {
  // Creaza variabila care va contine instanta la XMLHttpRequest, initial cu valoare nula
  var xmlHttp = null;

  if(window.XMLHttpRequest) {		// Daca browser-ul e Forefox, Opera, Safari, ...
    xmlHttp = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) {	// Daca browser-ul este Internet Explorer
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return xmlHttp;
}

// Functia care trimite datele la un fisier PHP si returneaza raspunsul
function ajaxrequest(formular, tagID) {
  var cerere_http =  get_XmlHttp();		// Apeleaza functia pt. crearea instantei la obiectul XMLHttpRequest

  // Creaza URL-ul cu datele care vor fi trimise prin GET (pereche nume=valoare)
  var  url = 'get_post.php?timp='+document.getElementById('timp').innerHTML;

  // Creaza datele care trebuie trimise prin POST la scriptul PHP (pereche nume=valoare)
  var  d_post = 'nume='+formular.nume.value;

  cerere_http.open("POST", url, true);			// Creaza cererea la adresa URL setata

  // Adauga un Header specific pentru ca datele sa fie recunoscute ca au fost trimise prin POST
  cerere_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  cerere_http.send(d_post);		// Trimiterea cererea, impreuna cu valorile care trebuie transmise prin POST

  // Verifica starea cererii
  // Daca raspunsul e primit complet, il transfera in eticheta HTML cu id-ul din "tagID"
  cerere_http.onreadystatechange = function() {
    if (cerere_http.readyState == 4) {
      document.getElementById(tagID).innerHTML = cerere_http.responseText;
    }
  }
}

// Functia pentru cronometrarea timpului in secunde si afisarea lui
var secunde = 0;
function get_secunde() {
  secunde++;		// Incrementeaza cu o unitate

  // Adauga valoarea in eticheta HTML cu id="timp"
  document.getElementById('timp').innerHTML = secunde;
}
setInterval("get_secunde()", 1000)    // Apeleaza functia la fiecare secunda
//-->
</script>
</head>
<body>

<div id="sec"><span id="timp"> </span> secunde</div>
<form action="get_post.php" method="post" name="form2" onsubmit="ajaxrequest(this, 'raspuns'); return false;">
  Numele tau: <input type="text" name="nume" id="nume" size="20" maxlength="33" />
  <input type="submit" value="Trimite" />
</form>
<div id="raspuns"> </div>

</body>
</html>
- Scriptul Javascript din sectiunea HEAD a documentului HTML din acest exemplu, are, pe langa functiile pentru Ajax, inca o functie, "get_secunde()" care la fiecare apelare incrementeaza cu o unitate o variabila "secunde" si o afiseaza intr-o eticheta HTML cu id="timp", iar aceasta functie este apelata cu "setInterval()" la fiecare secunda.
- Cand este apasat butonul "Trimite" din formular, se apeleaza functia pentru Ajax, "ajaxrequest()". Aceasta, dupa crearea instantei la obiectul "XMLHttpRequest", preia datele ce trebuie trimise prin GET si le adauga in formula adresei URL care va fi inclusa in cererea definita cu "open()", iar datele preluate pentru a fi expediate prin POST sunt definite in variabila "d_post", care va fi parametrul metodei "send()".
- Studiati cu atentie scriptul JS si codurile HTML, explicatiile necesare le gasiti in codul scriptului.

Acest exemplu va afisa urmatorul rezultat:
secunde
Numele tau:  

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care atribut specifica adresa unde sunt trimise datele din formular?
method action name
<form action="script.php" method="post"> ... </form>
Ce proprietate CSS desparte cuvinte lungi, adaugand pe rand nou?
word-wrap line-height font-size
#id {
  width: 100px;
  word-wrap: break-word;
}
Ce functie aranjeaza elementele din array in ordine alfabetica, bazat pe valorile lor?
pop() sort() shift()
var tutorials = ["php", "html", "css", "flash"];
tutorials.sort();
alert(tutorials[0]);          // css
Indicati functia care returneaza valoarea ultimului element din array.
current() next() end()
$code =[10=>"Perl", 20=>"PHP", 21=>"Python", 30=>"JavaScript");
$last = end($code);
echo $last;      // JavaScript
Alegeti verbul auxiliar corect care trebuie in propozitia: "Her plane ... just arrived".
have has does
Her plane has just arrived.
- Avionul ei tocmai a sosit.
Indicati forma corecta a verbului SER (a fi) in propozitia: "Vosotros ... muy simpáticos".
son soy sois
Vosotros sois muy simpáticos.
- Sunteti foarte simpatici.
Trimitere date prin GET si POST simultan

Last accessed pages

  1. Dreptunghi, Oval, Poligon - Stea (1484)
  2. Gramatica limbii engleze - Prezentare Generala (200617)
  3. Select in MySQL, Creare tabel HTML cu date din Select (613)
  4. Aliniere DIV-uri pe aceeasi linie (4524)
  5. Viitor simplu si continuu - Future Tense Simple and Continuous (43215)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (166)
  2. Gramatica limbii engleze - Prezentare Generala (164)
  3. Exercitii engleza - English Tests and exercises - Grammar (111)
  4. Curs HTML gratuit Tutoriale HTML5 (88)
  5. Pronumele in limba engleza - Pronouns (82)