Curs Ajax

In general, datele adaugate in casetele dintr-un formular sunt trimise prin POST la un script de pe server specificat in atributul "action" al etichetei <form>.
Cu Ajax puteti trimite datele preluate din formulare atat prin metoda GET cat si prin metoda POST. Totusi, tinand cont ca prin GET continutul care poate fi trimis este limitat iar in formulare pot fi adaugate o cantitate mare de date, in special daca aveti o caseta <textarea>, e de preferat folosirea metodei POST.
Procedeul de trimitere a datelor din formulare folosind Ajax este similar cu exemplele prezentate in lectiile anterioare, diferenta e data de modul de preluare a acestor date. Pentru formulare, datele din casetele acestuia pot fi preluate folosind una din urmatoarele formule:
                document.nume_form.nume_caseta.value
- unde "nume_form" e valoarea adaugata in atributul "name" din eticheta <form>, iar "nume_caseta" e valoarea adaugata in atributul "name" din caseta a carei valoare vrem sa o preluam.
Sau
                document.getElementById(id_caseta).value
- unde "id_caseta" e valoarea adaugata in atributul "id" din caseta a carei valoare vrem sa o preluam.
Despre lucru cu JavaScript si date din formulare puteti citi si in lectia -> Ierarhia JavaScript (la punctul 2).

Iata si un exemplu practic, din care sa intelegeti mai bine.
1. - Creati pe server un fisier PHP, de exemplu "test_form.php", in care adaugati urmatorul cod:

<?php
// Daca sunt primite date din formular
if (isset($_POST['nume']) && isset($_POST['mesaj'])) {
    $nume = $_POST['nume'];
    $mesaj = $_POST['mesaj'];

    // Daca au fost completate casetele din formular
    if (strlen($nume)>0 && strlen($mesaj)>0) {
        echo 'Bine ai venit <b>'. $nume. '</b><br />Mesajul pe care ti-l transmiti este "<i>'. $mesaj. '</i>"';
    }
    else {
        echo 'Completati toate campurile din formular';
    }
}
?>
- Acesta este un script PHP care primeste date prin POST. Le stocheaza in variabile "$nume" si "$mesaj", si daca au fost completate toate campurile din formular (verificand cu "strlen()" daca sirurile sunt mai mari decat zero), afiseaza /transmite un mesaj, in caz contrar atentioneaza ca nu au fost completate toate casetele.

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

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

 // Preia datele necesare din formular
 var numele = formular.nume.value;
 var mesajul = formular.mesaj.value;

 // Construieste datele care trebuie trimise prin POST la scriptul PHP (perechi nume=valoare)
 var datele = 'nume='+numele+'&mesaj='+mesajul;

 ob_ajax.open("POST", 'test_form.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>

<form action="test_form.php" method="post" name="form1" onsubmit="ajaxrequest(this, 'raspuns'); return false;">
 Numele tau: <input type="text" name="nume" id="nume" size="20" maxlength="33" /><br />
 Transmite un mesaj:<br />
 <textarea name="mesaj" id="mesaj" cols="25" rows="4"></textarea><br />
 <input type="submit" value="Trimite" />
</form>
<div id="raspuns"> </div>

</body>
</html>
- Aici este un document HTML ce are in sectiunea HEAD un script pentru Ajax, iar in sectiunea BODY un formular in care vizitatori pot adauga un nume si un mesaj, aceste date vor fi trimise la script-ul Ajax care apoi le trimite la script-ul PHP din fisierul "test_form.php".
- Codul onsubmit="ajaxrequest(this, 'raspuns'); return false;", din eticheta <form>, face ca la click pe butonul "Trimite" sa fie apelata direct functia "ajaxrequest()" (si nu adresa din atributul "action"), transferandu-i ca argument "this" (care aici reprezinta formularul curent) si id-ul div-ului in care va fi adaugat raspunsul.
Sintaxa "return false" are rolul de a opri deschiderea din formular a adresei din "action", fara aceasta sintaxa, dupa trimiterea datelor la scriptul Ajax, ar fi fost apelata in fereastra navigatorului si adresa din atributul "action"; totusi, aceasta e bine sa fie adaugata deoarece astfel datele vor fi trimise la fisierul PHP si daca utilizatorul are JavaScript dezactivat.
- Dupa ce in variabila "ob_ajax" este adaugata instanta la obiectul XMLHttpRequest, sunt preluate datele din formular in variabilele "numele" si "mesajul".
- Apoi am creat variabila "datele" pentru a construi si adauga aceste date sub forma care este recunoscuta de script-ul PHP (perechi indice=valoare); 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_form.html" va afisa urmatorul rezultat.
Numele tau:
Transmite un mesaj:

 
- Completati campurile din formular si dati click pe butonul "Trimite.

Daca doriti ca datele preluate din formular sa fie trimise de scriptul Ajax prin GET, aplicati exemplul prezentat in Lectia 2. In acest caz trebuie modificat si scriptul PHP, ca sa preia datele primite prin GET.

Puteti construi si exemple mai complicate, cum ar fi functii JavaScript care sa auto-apeleze la intervale de timp (cu "setInterval()") o functie Ajax, sau scriptul PHP sa foloseasca datele primite pentru a le adauga intr-o baza de date ori in alte fisiere. Totul depinde de imaginatia si cunostintele dumneavoastra.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
Ajax cu formulare

Last accessed pages

  1. Pronume indirect (2216)
  2. Curs PHP MySQL, Tutoriale si Scripturi PHP (128379)
  3. Forma verbului Hay (5814)
  4. Prezent perfect continuu - Exercitii si teste incepatori (15572)
  5. Limba spaniola curs online incepatori si avansati (28486)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (767)
  2. Exercitii engleza - English Tests and exercises - Grammar (596)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (587)
  4. Gramatica limbii engleze - Prezentare Generala (580)
  5. Prezentul simplu - Exercitii si teste incepatori (504)