lunes, 12 de diciembre de 2011

PHP + AJAX

Ahora hablare de como conjuntar PHP con la técnica AJAX, que no es un lenguaje, su nombre es un acronimo del ingles Asynchronous JavaScript And XML y es una técnica de programación que permite una interacción mas fluida y sin tantas recargas entre la web y el usuario, lo que le da una apariencia mas profesional, ademas de un mejor desempeño al no recargar toda la pagina, con lo que si usamos muchas imágenes o flash la ventaja sera notoria, pero sin mas bla bla vamos al grano y es que el núcleo y el corazón de esta técnica es la interfaz de javascript XMLHttpRequest, es la que hace toda la "magia" realiza las peticiones post o get al servidor web.

Veamos como funciona, primero creamos el objeto en una pagina html, desde luego esto es código

JavaScript.

xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","datos.php"); //aqui va la fuente de los datos puede ser tambien por POST
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        obj.innerHTML = xmlhttp.responseText; //aqui obtenemos la respuesta puede ser XML pero requiere de tratamiento especial, asi que usamos texto simple
        var x = htmlhttp.responseText //tambien podemos llenar una variable con la respuesta
         eval(xmlhttp.responseText); //incluso podemos evaluar codigo javascript  generado del lado servidor desde nuestro datos.php
}


Después en nuestro datos.php, podemos hacer una conexión a una base de datos y generar la respuesta, pero aquí en nuestro ejemplo haremos algo mucho mas simple:

PHP

echo "Hola mundo";  //una respuesta simple
 echo "var arreglo=new Array('hola mundo','segundo item','tercer item');"; //esta parte si la usamos con un eval del lado de la pagina html sera ejecutada como codigo javascript y tendremos un arreglo que podemos usar


Desde luego en lo anterior o hacemos una cosa o hacemos otra, es decir o recibimos el texto simple y los mostramos o lo evaluamos ya que si hacemos los dos echo nos arrojara un error javascript al intentar evaluar la cadena "hola mundo" ¿capisci?

La función en javascript quedaría ya completa como sigue:

JavaScript

function ajax(){
     var xmlhttp = false;
     if (window.XMLHttpRequest) { //para los demas navegadores
           xmlhttp = new XMLHttpRequest();
     } else if (window.ActiveXObject){ //para las basuras de ie5 y 6
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
     return xmlhttp;
}
ajax=ajax();
ajax.open("POST","pagina.php"); //especificamos de donde obtener los datos
ajax.onreadystatechange=function(){
     if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
           var x = htmlhttp.responseText; //aqui ya hacemos lo que se nos antoje
     }
}


Hasta ahora vimos como recibir datos desde un script php, pero ahora queremos enviar datos de un formulario, entonces haremos la siguiente funcion:

JavaScript

//esta funcion requiere los parametros script que es la ubicacion del script al que se enviaran los datos y formulario que es el id del form html que envia los datos
function envia_ajax(script,formulario){
     var ajax=ajax(); //creamos el objeto con la anterior funcion
     ajax.open("POST", script, true);
     ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     frm=document.getElementById(formulario),cadena="";
     for(i=0;i<frm.elements.length;i++){ //recorremos los elementos del form para obtener su nombre y su valor
         cadena+=frm.elements[i].name+"="+frm.elements[i].value+"&";
     }
     ajax.send(cadena);
     ajax.onreadystatechange=function(){
         if (ajax.readyState==4){
                return ajax.responseText; //retornamos la respuesta
         }
     }
}


En un html agregamos los script javascript necesarios y el siguiente código html

HTML

<form id="forma">
<input type="test" name="x"/>
 <input type="button" name="ok" value="enviar" onclick="window.alert(envia_ajax('datos.php','forma'));" />


Ahora en datos.php recogeríamos los datos como si los hubiese enviado el mismo form

PHP

if($_POST['ok']){
     echo "el dato que mandaste fue".$_POST['x'];
}else{
    echo "aun no has enviado nada";
}


Con esta técnica podemos generar contenidos dinamicamente en tiempo real, con las obvias ventajas que esto implica, pero no debemos abusar de esta técnica, ya que esto tiende a segmentar mucho el sitio, generando muchos archivos background (en nuestro caso el datos.php) ademas de que si hacemos demasiadas peticiones xmlhttprequest terminaremos cayendo en lo que queríamos evitar, que es una carga alta de peticiones al servidor.

Saludos, felices códigos y hasta la próxima.

4 comentarios:

  1. Hola que tal , muy buen articulo , tengo una duda , hace no mucho que me inicie en este mundo ajax , mi pregunta es :

    ¿cual es la mejor forma de insertar codigo en el navegador?

    1.- responder por php con un JSON y tratarlo con JS e inyectarlo

    2.- tratar en php mi respuesta de la BD insertandole html y regresando la respuesta en HTML y despues inyectarla por js

    Gracias

    ResponderEliminar
  2. @Omar y Marile Hola, gracias por comentar.

    Con respecto a tu duda, ¿debo entender con insertar código, como generar elementos html según la respuesta? si es así, me parece mas simple, compacto y rápido Json que XML. Pero el texto plano, como así lo interpreto en tu punto 2, es todavía mas rápido, el generar directamente los elementos html desde php y cuando le llegan a la función ajax en javascript, este solo tiene que hacer, por ejemplo: document.getElementById('div').innerHTML=la_respuesta_ajax y suponiendo que la variable la_respuesta_ajax contiene una cadena que contiene un formulario html, generado desde php, con eso generarías los elementos html directamente, aunque no siempre funciona y en ie es a veces muy problemático y tampoco es la forma mas correcta, pero en definitiva la mas rápida y eficiente, yo te recomendaría Json. pero ya es cuestión de gustos

    ResponderEliminar
  3. Hola, muy interesante el ejemplo, he hecho cosas muy pequeñas parecidas a la forma en que opera esta tecnología de Ajax pero creo que para poder ejecutar esto me haría falta configurar algo en el Xampp o adicionar algún archivo ya que veo este metodo ajax.open() o XMLHttpRequest(). Cómo podría configurarlo en Xampp? Muchas Gracias :)

    ResponderEliminar
  4. @Rubenz

    Hola, XMLHttpRequest() es una interfaz implementada en javascript que viene practicamente en todos los navegadores y no necesitas hacer nada, mas que usarlo, es codigo que se ejecuta de lado cliente en el navegador.

    Saludos.

    ResponderEliminar