Descriere: Utilizare Ajax cu POST si PHP
Download:
Autor: Anonim
Sursa (Link-ul oficial): Propria parere: Folositor.
Tutorialul:
Un alt mod de trimitere a unor date dintr-o pagină 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 fişierului PHP la care va fi transmisă cererea, iar "flag" este o valoare booleană true sau false (Mai multe despre aceste atribute sunt prezentate în lecţiile anterioare).
Diferenţa faţă de GET, în trimiterea datelor prin POST, constă în 2 lucruri importante:
1. După crearea cererii cu "open()" şi înainte de trimiterea ei cu "send()", se apelează o altă metodă a obiectului "XMLHttpRequest", şi anume "setRequestHeader()", folosind sintaxa :
setRequestHeader("Content-type", "application/x-www-form-urlencoded")
- Aceasta trimite un Header la server care-i spune să recunoască datele trimise de "send()" ca şi cum au fost transmise prin POST (precum sunt encodate şi trimise datele din formulare). Dacă acest Header nu este adăugat, serverul nu va recunoaşte că datele din parametrul lui "send()" au fost trimise prin POST.
2. Ca parametru al metodei "send()", în loc de null se adaugă datele (perechile de tip indice=valoare) care trebuie trimise prin POST.
În rest, prelucrarea răspunsului primit de la server se face la fel ca în cazul apelării cu GET.
Ca să înţelegeţi mai bine cum se trimit date cu Ajax prin POST, aplicaţi şi studiaţi exemplul următor:
1. - Creaţi pe server un fişier PHP, de exemplu "test_post.php", în care adăugaţi următorul cod:
Cod: Selectaţi tot
<?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.';
}
?> 2. - Creaţi un fişier HTML pe server, de exemplu "ajax_post.html", în acelaşi director unde este şi fişierul "test_post.php", şi adăugaţi în el codul de mai jos (studiaţi şi comentariile din cod).
Cod: Selectaţi tot
<!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 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(tagID) {
var cerere_http = get_XmlHttp(); // Apeleaza functia pt.
//crearea instantei la obiectul XMLHttpRequest
// Creaza datele care trebuie trimise prin POST la scriptul PHP (perechi nume=valoare)
var datele = 'test='+document.getElementById(tagID).innerHTML;
cerere_http.open("POST", 'test_post.php', true); // Creaza cererea
// 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(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"
cerere_http.onreadystatechange = function() {
if (cerere_http.readyState == 4) {
document.getElementById(tagID).innerHTML = cerere_http.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> - codul onclick="ajaxrequest('context')", din eticheta <h5> face ca la click pe ea să fie apelată funcţia "ajaxrequest()", transferându-i ca argument id-ul div-ului (din care va fi preluat conţinutul şi apoi va fi adăugat răspunsul).
- Faţă de exemplele din lecţiile anterioare, aici, funcţia "ajaxrequest()" preia doar un singur parametru (tagID), pentru id-ul etichetei DIV. Oricum, acest aspect nu e important, depinde de fiecare cum doreşte să construiască funcţiile, în acest caz important e modul de creare şi trimitere a datelor la server şi recepţionarea răspunsului.
- După ce în variabila "cerere_http" este adăugată instanţa la obiectul XMLHttpRequest (prin apelarea funcţiei "get_XmlHttp()", care defineşte acest obiect în funcţie de browser) am creat variabila "datele" pentru a stoca datele de tip "tex=continutul_din_div" care trebuie transmise scriptului PHP, această variabilă va fi folosită ca parametru al metodei "send()".
- În continuare este creată cererea cu "open()", conţinând tipul metodei de transfer POST şi adresa, numele fişierului PHP.
- Pentru ca datele să fie recunoscute că au fost trimise prin POST, am adăugat cu metoda "setRequestHeader()" un Header specific, iar datele care trebuie recunoscute de scriptul PHP sunt adăugate ca parametru în "send(datele)".
- Scriptul PHP va procesa datele şi după ce se verifică faptul că raspunsul a fost primit complet, îl afişează în div-ul cu id-ul precizat pentru "tagID" .
Avantajul transferului prin POST este faptul că puteţi trimite un conţinut de date mai mare decât prin metoda GET (care este limitat la un număr de 1024 caractere); lucru important, de exemplu când doriţi să trimiteţi date adăugate în formulare.