E-learn.ro

In acest articol se va prezenta modalitatea de crearea unei comunicatii functionale AJAX - PHP.

Singurul lucru important la acest moment este ca AJAX foloseste JavaScript, asa ca acesta va trebui validat in browserul tau pentru a putea urma cu succes acest tutorial.

Pentru a face o demonstratie de conexiune AJAX PHP vom crea un formular foarte simplu cu doua campuri de intrare. In primul camp poti introduce orice text, pe care il vom transmite secventei noastre de instructiuni PHP, care il va converti in majuscule si ni-l va trimite inapoi. La sfarsit, vom trece rezultatul in cel de-al doilea camp de intrari. ( Poate ca exemplul nu este in sine foarte util, insa consider ca este acceptabil la acest nivel. )

Asa ca, sa punem pe o lista ce avem de facut:
o Fii atent la evenimentul de apasare a tastelor din campul de intrari.
o In cazul unui asemenea eveniment, trimite un mesaj catre secventa de instructiuni PHP de pe server.
o Proceseaza intrarea cu PHP si trimite rezultatul inapoi.
o Captureaza datele returnate si afiseaza-le.

Secventa noastra html este deosebit de simpla si arata asa:

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax - PHP example</title>
</head>
 
<body>
 
<form name="testForm">
    Input text: <input type="text"  onkeyup="doWork();"
    name="inputText" id="inputText" />
    Output text: <input type="text" name="outputText" 
    id="outputText" />
</form>
</body>
</html>

Dupa cum vezi, exista o functie doWork(), care este apelata in fiecare situatie in care o tasta se indreapta in sus (o tasta a fost apasata). Desigur, poti folosi oricare alte evenimente suportate, daca doresti.

Dar ce este aceasta doWork() si cum putem trimite mesaje catre secventa de instructiuni de pe server? Vei gasi respunsurile pe pagina urmatoare.

Pasul 2 – Trimiterea datelor catre PHP cu Ajax

Inainte de a explica functia doWork(), trebuie sa invatam mai intai un lucru mult mai important. Pentru a realiza o comunicatie intre client si server, codul de client trebuie sa creeze un asa-zis obiect XMLHttpRequest („solicitare XMLHyyp”). Acest obiect va fi responsabil pentru comunicatia AJAX PHP.

Totusi, crearea acestui obiect este un pic alunecoasa, intrucat browserul il implementeaza in diverse moduri. Daca nu doresti sa oferi suport browserele mai vechi, putem proceda astfel:

// Implement business logic
function doWork(){   
    httpObject = getHTTPObject();
    if (httpObject != null) {
        httpObject.open("GET", "upperCase.php?inputText="
            +document.getElementById('inputText').value, true);
         httpObject.send(null);
                 
    }
}

Este in regula, dar cum captam raspunsul de la server?
Pentru a face acest lucru, avem nevoie sa folosim o alta proprietate speciala a obiectului XMLHttpRequest. Putem asigna acestui parametru o functie, iar aceasta functie va fi apelata in cazul in care starea obiectului s-a modificat. Codul final este urmatorul:

// Implement business logic   
function doWork(){   
    httpObject = getHTTPObject();
    if (httpObject != null) {
         httpObject.open("GET", "upperCase.php?inputText="
             +document.getElementById('inputText').value, true);
         httpObject.send(null);
         httpObject.onreadystatechange = setOutput;
     }
}

Ultimul pas de partea clientului este implementarea functiei setOutput(), care va schimba valoarea celui de-al doilea camp al nostru. Singurul lucru interesant este acela ca trebuie sa verificam starea reala, efectiva a obiectului XMLHttpRequest. Vom avea nevoie sa schimbam valoarea campului doar daca starea sa este completa.

Proprietatea readyState poate lua urmatoarele valori:
o 0 = neinitializata
o 1 = in curs de incarcare
o 2 = incarcat
o 3 = interactiv
o 4 = complet

Deci, setOutput() arata asa:

// Change the value of the outputText field
function setOutput(){
    if(httpObject.readyState == 4){
        document.getElementById('outputText').value
            = httpObject.responseText;
    }
}

Pasul 3 – Cod PHP si exemplul complet AJAX

Implementarea partii de functionalitate a serverului este foarte simpla in comparatie cu partea de client. In codul PHP, nu avem nevoie decat sa modificam matricea super-globala $_GET. Apoi, fa-i conversia in majuscule si transmite (echo) rezultatul. Codul PHP arata astfel:

<?php
    if (isset($_GET['inputText']))
           echo strtoupper($_GET['inputText']);
?>

Este chiar scurt, nu?

In sfarsit, poti gasi codul de client si cel de server, in format complet, mai jos:

Client:

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" />
<title>Ajax - PHP example</title>
</head>
  
<body>
  
<script language="javascript" type="text/javascript">
<!--
// Get the HTTP Object
function getHTTPObject(){
   if (window.ActiveXObject) return new 
   ActiveXObject("Microsoft.XMLHTTP");
   else if (window.XMLHttpRequest) return new XMLHttpRequest();
    else {
       alert("Your browser does not support AJAX.");
       return null;
    }
 }  
  
 // Change the value of the outputText field
 function setOutput(){
     if(httpObject.readyState == 4){
         document.getElementById('outputText').value =
          httpObject.responseText;
     }
  
 }
  
 // Implement business logic   
 function doWork(){   
     httpObject = getHTTPObject();
     if (httpObject != null) {
         httpObject.open("GET", "upperCase.php?inputText="
                         +document.getElementById('inputText')
                         .value, true);
         httpObject.send(null);
         httpObject.onreadystatechange = setOutput;
     }
 }
  
var httpObject = null;
  
 //-->
 </script>
  
  <form name="testForm">
      Input text: <input type="text"  onkeyup="doWork();"
       name="inputText" id="inputText" />
      Output text: <input type="text" name="outputText" 
      id="outputText" />
   </form>
 </body>
 </html>

Pasul 1 - Bazele Ajax

Pasul 2 – Trimiterea datelor catre PHP cu Ajax

Pasul 3 – Cod PHP si exemplul complet AJAX