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
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.
Trimitere date prin GET si POST simultan

Last accessed pages

  1. Substantivul din limba engleza - The Noun (45899)
  2. Utilizare Masks (46)
  3. Diferenta dintre Like si As (8858)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (105639)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (69469)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (2876)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2798)
  3. Curs HTML gratuit Tutoriale HTML5 (2413)
  4. Curs CSS Online Tutoriale CSS3 (1927)
  5. Curs si Tutoriale JavaScript (1918)