Curs Ajax

Un alt mod de trimitere a unor date dintr-o pagina web la server este prin metoda POST.
Cu Ajax, cererea pentru trimiterea datelor cu POST se face tot prin metoda "open()" a obiectului "XMLHttpRequest", sintaxa acesteia fiind open("POST", url, flag), unde "POST" este metoda de transfer, "url" este adresa fisierului PHP la care va fi transmisa cererea, iar "flag" este o valoare booleana true sau false (Mai multe despre aceste atribute sunt prezentate in lectiile anterioare).
Diferenta fata de GET, in trimiterea datelor prin POST, consta in 2 lucruri importante:
1. Dupa crearea cererii cu "open()" si inainte de trimiterea ei cu "send()", se apeleaza o alta metoda a obiectului "XMLHttpRequest", si anume "setRequestHeader()", folosind sintaxa :
                setRequestHeader("Content-type", "application/x-www-form-urlencoded")
- Aceasta trimite un Header la server care-i spune sa recunoasca datele trimise de "send()" ca si cum au fost transmise prin POST (precum sunt encodate si trimise datele din formulare). Daca acest Header nu este adaugat, serverul nu va recunoaste ca datele din parametrul lui "send()" au fost trimise prin POST.
2. Ca parametru al metodei "send()", in loc de null se adauga datele (perechile de tip indice=valoare) care trebuie trimise prin POST.

In rest, prelucrarea raspunsului primit de la server se face la fel ca in cazul apelarii cu GET.
Ca sa intelegeti mai bine cum se trimit date cu Ajax prin POST, aplicati si studiati exemplul urmator:
1. - Creati pe server un fisier PHP, de exemplu "test_post.php", in care adaugati urmatorul cod:

<?php
// Daca sunt primite date prin POST, cu indice 'test'
if (isset($_POST['test'])) {
    $sir = $_POST['test'];             // Preia datele primite
    echo 'Textul "<i>'.$sir.'"</i> contine '. strlen($sir). ' caractere si '. str_word_count($sir, 0). ' cuvinte.';
}
?>
- Acesta e un script PHP relativ simplu. Daca primeste date prin POST, 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).

2. - Creati un fisier HTML pe server, de exemplu "ajax_post.html", in acelasi director unde este si fisierul "test_post.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 POST</title>

<script type="text/javascript">
<!--
// Functia care trimite datele la un fisier PHP si returneaza raspunsul
function ajaxrequest(tagID) {
  var ob_ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object

  // Creaza datele care trebuie trimise prin POST la scriptul PHP (perechi nume=valoare)
  var  datele = 'test='+document.getElementById(tagID).innerHTML;

  ob_ajax.open("POST", 'test_post.php', true);			// Creaza cererea

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

  // 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('context')">Click</h5>
<div id="context">Sir transmis cu Ajax, prin POST, la server si prelucrat cu PHP</div>

</body>
</html>
- Aici este un document HTML ce are in sectiunea HEAD un script pentru Ajax, iar in sectiunea BODY un tag <h5> folosit pentru a actiona scriptul si un DIV cu un text in el.
- codul onclick="ajaxrequest('context')", din eticheta <h5> face ca la click pe ea sa fie apelata functia "ajaxrequest()", transferandu-i ca argument id-ul div-ului (din care va fi preluat continutul si apoi va fi adaugat raspunsul).
- Fata de exemplele din lectiile anterioare, aici, functia "ajaxrequest()" preia doar un singur parametru (tagID), pentru id-ul etichetei DIV. Oricum, acest aspect nu e important, depinde de fiecare cum doreste sa construiasca functiile, in acest caz important e modul de creare si trimitere a datelor la server si receptionarea raspunsului.
- Dupa ce in variabila "ob_ajax" este adaugata instanta la obiectul XMLHttpRequest, am creat variabila "datele" pentru a stoca datele de tip "tex=continutul_din_div" care trebuie transmise scriptului PHP, aceasta variabila va fi folosita ca parametru al metodei "send()".
- In continuare este creata cererea cu "open()", continand tipul metodei de transfer POST si adresa, numele fisierului PHP.
- Pentru ca datele sa fie recunoscute ca au fost trimise prin POST, am adaugat cu metoda "setRequestHeader()" un Header specific, iar datele care trebuie recunoscute de scriptul PHP sunt adaugate ca parametru in "send(datele)".
- Scriptul PHP va procesa datele si dupa ce se verifica faptul ca raspunsul a fost primit complet, il afiseaza in div-ul cu id-ul precizat pentru "tagID".
Daca deschideti fisierul "ajax_post.html" va afisa urmatorul rezultat, dati click pe cuvantul "Click" de mai jos.
Click
Sir transmis cu Ajax, prin POST, la server si prelucrat cu PHP

Avantajul transferului prin POST este faptul ca puteti trimite un continut de date mai mare decat prin metoda GET (care este limitat la un numar de 1024 caractere); lucru important, de exemplu cand doriti sa trimiteti date adaugate in formulare.

In lectia urmatoare puteti invata cum sa folositi Ajax pentru a trimite date preluate din formulare.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag este element de tip bloc?
<div> <img> <span>
<div>Web Programming and Development</div>
Care cod CSS afiseaza textul subliniat?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Clic pe functia JavaScript care apeleaza o alta functie dupa un anumit timp.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Clic pe instructiunea care returneaza numarul total de elemente dintr-un array asociativ.
count($array) count($array, 1) strlen()
$food =["fruits" =>["banana", "mar"), "veggie" =>["ceapa", "rosie"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
Indicati Viitorul Perfect la negativ al verbului din paranteze, in propozitia: "The child (to not play) by Sunday".
has't played haven't been playing will haven't played
The child will haven't played by Sunday.
- Copilul nu s-ar fi jucat pana duminica.
Indicati Viitorul Perfect pentru verbul "contar" (a povesti) la forma "Él".
habrá contado va a contar contaba
Él no habrá contado el cuento.
- El nu ar fi spus povestea.
Ajax cu POST si PHP

Last accessed pages

  1. Gerunziu (933)
  2. Trecut perfect si Trecutul perfect continuu - Past perfect and Continuous (56590)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (261627)
  4. Instructiuni repetitive for() (2805)
  5. Prezent perfect - Exercitii si teste incepatori (20020)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1271)
  2. Curs HTML gratuit Tutoriale HTML5 (968)
  3. Coduri pt culori (726)
  4. Creare si editare pagini HTML (567)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (526)
Chat
Discuta sau lasa un mesaj pt. ceilalti utilizatori
Full screenInchide