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:
<!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.<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
h3 {
padding: 2px 0.2em;
}// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);if(isset($_POST["field"])) {
echo $_POST["field"];
}We speak english. - Noi vorbim engleza.
Nosotros hablamos español. - Noi vorbim spaniola.