[Tutorial JS] Utilizare Ajax cu GET si PHP

#1
Nume Tutorial: Utilizare Ajax cu GET si PHP
Descriere: Utilizare Ajax cu GET si PHP
Download:
Autor: Anonim
Sursa (Link-ul oficial):
tutorialeonline
Propria parere: Folositor.
Tutorialul:

Ajax este mai mult decât utilizarea obiectului XMLHttpRequest, constă în folosirea, pe lângă JavaScript, şi a unui limbaj pe partea de server. Ajax poate fi utilizat în multe tipuri de aplicaţii care pot fi incluse într-o pagină web, dar cel mai folosit este pentru navigare de la un conţinut la altul al site-ului. Această navigare se face de obicei prin link-uri, acestea conţin o adresă URL către pagina /conţinutul respectiv. Metoda standard de transmitere a datelor adresei URL din link-uri la server este GET.
În lecţia precedentă (despre lucrul cu XMLHttpRequest) este prezentat modul de creare a unei cereri pentru apelarea unui fişier, şi anume cu metoda open (method, url, flag).

- "method" este metoda prin care vor fi trimise datele, GET sau POST (în această lecţie este prezentat GET).
- "url" este adresa URL care va fi apelată, aceasta poate conţine, alături de calea şi numele fişierului care va fi apelat, şi date de tip perechi "indice=valoare", care sunt transmise prin GET fişierului respectiv.
- "flag" este o valoare booleană, "true" sau "false" (este explicată în lecţia precedentă).

Într-o adresă URL, pe lângă adresa paginii /fişierului care va fi apelat, pot fi incluse şi anumite valori care să fie procesate de fişierul respectiv. Aceste valori sunt adăugate în adresa URL, după numele paginii şi semnul '?', sub formă de perechi indice=valoare (despărţite prin caracterul &, dacă sunt mai multe astfel de perechi).
De exemplu:

o adresă URL simplă către o pagină / fişier PHP, poate fi de forma http://www.domeniu_site/fisier.php (numită şi "cale absolută" deoarece conţine toată calea către pagină) sau dir/fisier.php (folosită pentru fişiere din cadrul aceluiaşi server, numită şi "cale relativă").
o adresă ce conţine şi valori care trebuie transferate la server are forma http://www.domeniu_site/fisier.php?indice1=valoare1&indice2=valoare2 (sau dir/fisier.php?indice1=valoare1&indice2=valoare2)

Metoda "open()" a obiectului XMLHttpRequest face exact acest lucru, crează cererea care va fi trimisă la server, compusă din metoda de transfer şi adresa URL a fişierului la care se face cererea, unde pot fi adăugate aceste valori (perechi indice=valoare). Apoi, prin metoda "send()" se execută trimiterea.
Partea importantă este şi fişierul de pe server care va primi datele, în contextul acestui curs mă refer la fişiere PHP, dar pe partea de server poate fi folosit oricare alt limbaj acceptat de server. Astfel, dacă vreţi să folosiţi Ajax şi să înţelegeţi exemplele prezentate, trebuie să cunoaşteţi PHP, măcar nivel începător.
Ca să întelegeţi mai bine cum se foloseşte Ajax cu GET şi PHP, iată un exemplu practic:
1. - Creaţi pe server un fişier PHP, de exemplu "test_get.php", în care adăugaţi următorul cod:

Cod: Selectaţi tot

<?php
 // Daca sunt primite date prin GET, cu indice 'test'
 if (isset($_GET['test'])) {
    $sir = $_GET['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_get.html", în acelaşi director unde este şi fişierul "test_get.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 GET</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(serverPage, tagID) {
          var cerere_http =  get_XmlHttp();        // Apeleaza functia pt. crearea
             //instantei la obiectul XMLHttpRequest
 
          // Creaza adresa URL cu perechea de date indice=valoare
          var  url = serverPage+'?test='+document.getElementById(tagID).innerHTML;
 
          cerere_http.open("GET", url, true);            // Creaza cererea
          cerere_http.send(null);        // Efectueaza trimiterea datelor
 
          // 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('test_get.php', 'context')"><u>Click</u></h5>
    <div id="context">Sir transmis cu Ajax la server si prelucrat cu PHP</div>
 
 </body>
 </html> 
- Fişierul PHP "test_get.php" conţine un script relativ simplu. Dacă primeşte date prin GET, cu indice 'test', preia valoarea lor în variabila "$sir" şi cu "echo" afişează /returnează un şir care conţine valoarea string (text) primită şi numărul de caractere şi cuvinte din aceasta (calculate de funcţiile PHP specifice).
- În fişierul "ajax_get.html" este, în secţiunea HEAD un script pentru Ajax, iar în secţiunea BODY e un tag <h5> folosit pentru a acţiona scriptul şi un DIV cu un text în el.
- codul onclick="ajaxrequest('test_get.php', 'context')", din eticheta <h5> face ca la click pe ea să fie apelată funcţia "ajaxrequest()", transferându-i ca argumente numele fişierului PHP "test_get.php" (care va fi apelat de script) şi id-ul div-ului (din care va fi preluat conţinutul şi apoi va fi adăugat răspunsul).
- 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 în variabila "url" adresa URL cu fişierul php care va fi apelat şi datele care-i sunt transmise, aceste date fiind perechea "tex=continutul_din_div".
- Apoi, cu "open()" este creată cererea şi metoda de transfer GET, iar "send()" efectuează trimiterea datelor.
- Conform codului din scriptul PHP "if (isset($_GET['test'])", acesta recunoaşte că au fost trimise date prin GET şi cu indicele 'test', şi prelucrează datele, trimiţând ca răspuns şirul pe care-l returnează expresia din "echo".
- După ce scriptul a verificat că răspunsul a fost primit complet, îl afişează în div-ul cu id="context".
- Dacă apăsaţi de mai multe ori, de fiecare dată şirul trimis şi analizat de script este cel curent, nu cel iniţial.

Puteţi folosi Ajax ca să apelaţi un script PHP nu doar pentru a afişa vreun răspuns primit, ci şi pentru a prelucra şi înregistra anumite date (de exemplu într-o bază de date). Asta depinde exclusiv de scriptul PHP respectiv.

Înapoi la “Tutoriale JS”

Cine este conectat

Utilizatori răsfoind acest forum: Niciun utilizator înregistrat și 1 vizitator

cron