E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale PHP

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DEVELOPMENT  /  PHP  /  Diverse (10)

Comunicarea dintre Ajax si PHP

24.07.2008
Comunicarea dintre Ajax si PHP

In acest articol voi incerca sa fac un sumar al tehnicilor de baza in comunicatia Ajax si PHP. La final, vei gasi un exemplu total functional de comunicatie Ajax - PHP.

Total vizualizari: 9718 9718 afisari   |   Comentarii  0   |   Rating   |   (5 voturi)   |   Timp necesar: 15 min 15 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  www.ajaxf1.com  
Autor:  AjaxF1
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

Pasul 1 - Bazele Ajax

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;
    }
}

Acum, partea de client este gata. Sa implementam partea de server.

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>

Server:

<?php
    if (isset($_GET["inputText'"))
           echo strtoupper($_GET["inputText"]);
?>
Pagina:
1
comenteaza printeaza
Alte tutoriale PHP:
Noteaza acest tutorial
Rating tutorial
 
(5 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
5340
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
5300
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
5135
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
5130
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4875
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Ruby on Rails Gimp Fotografie XHTML Word Verilog Sony Vegas Flash PSD Fireworks Swift 3D Java Photoshop Outlook SEO Bridge Illustrator PHP Javascript RoR AJAX Lightroom JSON Excel Powerpoint Dreamweaver HTML StyleSheet XML COREL DRAW Action Script CSS Vista MySQL SWF Python
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software