Usuario:ManuelRomero/PHP/xajax/introduccion

De WikiEducator
Saltar a: navegación, buscar


Objetivo

  • La intención es que php genere una página html que entrega al cliente y que contenga código ajax, de modo que cuando el cliente lo necesite solicite recargar solo parte de la página.
  • En este caso pretendemos que sea el servidor el que genere este código, y no generarlo directamente en el cliente.
  • Existen situaciones en las cuales puede ser interesante aplicar esta forma de proceder.
  • Muchas de estas librerías suelen apoyarse en librerías JavaScript como jQuery para la ejecución de código en el cliente.
  • Podemos ver estas librerías en
  1. http://ajaxpatterns.org/PHP_Ajax_Frameworks
  2. http://www.ribosomatic.com/articulos/top-librerias-ajax-dhtml-y-javascript/
  • Vamos a estudiar un poco por encima Xajax, por ser una librería de código abierto y de sencillo uso.
  • Ha estado muchos años caída, pero actualmente se ha recuperado el proyecto y por lo tanto lo vamos a utilizar

Xajax

  • Para instalarlo vamos a la página oficial 
http://www.xajax-project.org/en/home/ si no está disponible ir a esta ubicación de githun
https://github.com/Xajax/Xajax
  • Esta página suele estar con mucha frecuencia hakeada.
  • Vamos a usar una actualización de xajax llamada Jaxon
  • En la sección download podemos bajar la versión 0.6 (es beta, pero funciona ok). Para un sitio en producción se recomienda la última estable (0.5)
  • Nos interesan las carpetas xajax_core y xajax_js, las cuales incorporaremos a nuestro proyecto
  • Además en el fichero php donde vayamos a usarlo lo incluiremos 
require_once (./xajax_core/xajax_inc.php');
  • Nosotros usaremos la clase xajax, podemos ver su documentación en la misma página sección doc&tutorial 
http://www.xajax-project.org/en/docs-tutorials/api-docs/xajax-core/xajax-inc-php/xajax/

Usando xajax

  • Para usar esta tecnología con esta clase 
require_once (./xajax_core/xajax_inc.php');
 
$miXajax = new xajax();
  • La clase necesita incluir una serie de código en javascript en la página que vamos a generar, printJavascript() 
....
$miXajax->printJavascript()
  • Prueba a ver el resultado de la página con lo escrito hasta ahora. Para ello ejecuta el proyecto, y aunque no aparezca nada, mira el código de la página en el cliente y podrás observar algo parecido

{{Plegable|hide|Viendo el resultado del código escrito| 

<script type="text/javascript" charset="UTF-8">
/* <![CDATA[ */
try { if (undefined == xajax.config) xajax.config = {}; } catch (e) { xajax = {}; xajax.config = {}; };
xajax.config.requestURI = "http://localhost/AppAjax/index.php";
xajax.config.statusMessages = false;
xajax.config.waitCursor = true;
xajax.config.version = "xajax 0.5";
xajax.config.defaultMode = "asynchronous";
xajax.config.defaultMethod = "POST";
xajax.config.JavaScriptURI = "";
/* ]]> */
</script>
<script type="text/javascript" src="xajax_js/xajax_core.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
/* <![CDATA[ */
window.setTimeout(
 function() {
  var scriptExists = false;
  try { if (xajax.isLoaded) scriptExists = true; }
  catch (e) {}
  if (!scriptExists) {
   alert("Error: the xajax Javascript component could not be included. Perhaps the URL is incorrect?\nURL: xajax_js/xajax_core.js");
  }
 }, 2000);
/* ]]> */
</script>
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Probando xajax</title>
        <script type="text/javascript" src="valida.js"></script>
 
 
    </head>
    <body>
        <h1> Accede al código fuente de esta página y verás código javascript</h1>
 
 
    </body>
</html>
</html>
}}
*En caso de que la librería de '''''xajax_js''''', no esté en la carpeta actual, hay que confirugarlo
<source lang=php>
...
$miXajax->configure ('javascript URI','./libs/');
 
....
  • Podemos también establecer (solo para el desarrollo), que nos dé un traceo del proceso. 
...
$miXajax->configure ('debug',true);
 
....
  • A continuación debemos registrar aquellas funciones que queremos ejecutar en modo ajax.

Es decir el cliente puede solicitar para recargar solo parte de la página que se ejecute una función. Estas funciones las debemos de registrar primero 

...
$ajax->register(XAJAX_FUNCTION, 'saludar');
 
....
  • Esto implicará que se en la página html se crea una función que tiene este nombre con el prefijo xajax_
  • En el caso anterior se creará una función llamada xajax_saludar(...)
  • Y para terminar este proceso de configuración, debemos usar el método que se encargue de procesar las llamadas ajax que se reciban. 
...
$ajax->processRequest();
 
....
  • El método processRequest() debe ser invocado antes de sacar ninguna salida ni echo ni código html


Icon summary.gif

Resumen

<?php
//cargo la librería de xajax
require ('xajax_core/xajax.inc.php');
 
$ajax = new xajax();
 
//Para poder tener una traza de lo que ocurre
$ajax->configure('debug',true);
//Especificar la ubicación de la librería (En este caso innecesario)
$ajax->configure('javascript URI','./');
 
//Ahora registramos las funciones que podrán ser invocadas de forma asíncrona desde el cliente
$ajax->register(XAJAX_FUNCTION, 'saludar');
$ajax->register(XAJAX_FUNCTION, 'otraFuncion');
//Estas acciones implicarán que en el html del cliente se creen las funciones xajax_saludar ()   y xajax_otraFuncion()
 
//Este método procesará las llamadas que reciba la página  ????
//Imporante llamarla antes de que el guión genere ningúna salida.
$ajax->processRequest();
 
 
//La librería necesita generar código java script en la página que enviamos al cliente
$ajax->printJavascript();



Implementando el método xajax en el servidor

  • Ahora en el servidor hay que escribir el código de la función que hemos registrado
  • Implementarmos lo que queremos que haga
  • Para comunicarnos con el cliente necesitamos un objeto de la clase xajaxReponse() 
http://www.xajax-project.org/en/docs-tutorials/api-docs/xajax-core/xajaxresponse-inc-php/xajaxresponse/

function saludar ($datosDelCliente){
 
   $respuesta = new xajaxResponse();
 
 ................ 
   return $respuesta;
}
;Leyendo los datos que vienen del cliente
*En el parámetro de la función recibimos un array con todos los input del formulario desde el que se invoca a la función
<source lang=php>
function saludar ($datosDelCliente){
 
   $respuesta = new xajaxResponse();
 
//En el formulario del cleinte desde donde se invoca a esta función habrá un input con name  nombre
$nombre = $datosDelCliente['nombre'];
 
 ................ 
   return $respuesta;
}
Indicando acciones en el cliente
  • por ejemplo podemos poner un mensaje que se visualizará en el cliente
  • También podemos indicar que se ejecute un script 
function saludar ($datosDelCliente){
 
   $respuesta = new xajaxResponse();
   $respuesta->alert("Este es un mensaje para el cliente");
 
 ................ 
   return $respuesta;
}
Poniendo datos para el cliente
  • Una de los objetivos principales será pasar valores al cliente para que actualice la página
  • Podremos actuar sobre los distintos elementos del html volviendo elementos ocultos o mostrando otros
  • Para pasar valores usamos el método assign o append 
function saludar ($datosDelCliente){
 
   $respuesta = new xajaxResponse();
   //En el formulario del cleinte desde donde se invoca a esta función habrá un input con name  nombre
  $nombre = $datosDelCliente['nombre'];
  $msj="Hola $nombre encantado de saludarte");
  $respuesta->assign('saludo', 'innerHTML', $msj);
 ................ 
   return $respuesta;
}
  • En el cliente tendremos un elemento con id saludo que se sustituirá por el texto especificado

Invocando a la función desde el cliente

  • Para terminar el proceso lo que nos queda es la parte de cliente
  • Ahora tenemos que hacer que desde el cliente podamos invocar a este método
  • En este caso lo vamos a hacer desde un formulario
  • Nos vamos a crear un formulario donde vamos a invocar a una funcion en el cliente
  • Esa función es la que va a invocar a la función del servidor
  • Es importante ahora el id del formulario que va a ser el nombre de array con el que el servidor va a recibir los datos del mismo
  • Al mismo tiempo establecemos un id para ubicar el lugar donde pongamos el texto que el servidor nos ponga 
 <form id='datosFormulario' action="javascript:void(null);" onsubmit="saludar();">
            Dime tu nombre:
            <input type="text" name="nombre" id="nombreCliente">
            <input type="submit" value="enviar">
            <div id="saludo" ></div>
 </form>
  • Ahora queda implementar la función saludar() 
<script type="text/javascript">
 
function saludar() {
 
    // Aquí se hace la llamada a la función registrada de PHP
    xajax_saludar(xajax.getFormValues("datosFormulario"));
 
    return false;
}
</script>
  • Como ya sabéis se recomienda escribir las funciones en un fichero aparte 
  <script type="text/javascript" src="saludar.js"></script>
  • y ya en el fichero saludar.js escribimos la función

Ejemplo

  • Hacemos un programa que nos haga o el cuadrado de un número o su raiz cuadrada meditante llamadas ajax 
<?php
//cargo la librería de xajax
require ('xajax_core/xajax.inc.php');
 
$ajax = new xajax();
 
//$ajax->configure('debug',true);
//Estas funciones podrán ser invocadas de forma asíncrona desde el cleinte
$ajax->register(XAJAX_FUNCTION, 'calcularC');
$ajax->register(XAJAX_FUNCTION, 'calcularR');
 
//Este método procesará las llamadas que reciba la página  ????
//Imporante llamarla antes de que el guión genere ningúna salida.
$ajax->processRequest();
 
//$ajax->configure('javascript URI','./');
//La librería necesita generar código java script en la página que envíamos al cliente
$ajax->printJavascript();
 
 
 
 
 
 
function calcularC($datos) {
    $respuesta = new xajaxResponse();
    $num = $datos['cuadradoServidor'];
    $r = $num*$num;
    $respuesta->alert("Calculando Cuadrado .....");
    $respuesta->assign('valorC', 'innerHTML', $r);
    return $respuesta;
}
 
function calcularR($datos) {
    $respuesta = new xajaxResponse();
    $num=$datos['raizServidor'];
    $rtdo = sqrt($num);
    $respuesta->alert("Calculando Raiz .....");
    $respuesta->assign('valorR', 'innerHTML', $rtdo);
    return $respuesta;
}
?>
 
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Probando xajax</title>
        <script type="text/javascript" src="valida.js"></script>
 
 
    </head>
    <body>
        <form id='datosC' action="javascript:void(null);" onsubmit="calcularCuadrado();">
            Calcula Cuadrado:
            <input type="text" name="cuadradoServidor" id="cuadradoCliente">
            <input type="submit" value="calcular Cuadrado" name="calcularC">
            <div id="valorC" ></div>
        </form>
        <hr/>
 
        <form id='datosR' action="javascript:void(null);" onsubmit="calcularRaiz();">
            Calcula Raiz:
            <input type="text" name="raizServidor" id="raizCliente">
            <input type="submit" value="calcular Raiz" name="calcularR">
            <div id="valorR" ></div>
        </form>
        <hr />
 
 
    </body>
</html>
/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
 
 
 
function calcularCuadrado() {
    // Se cambia el botón de Enviar y se deshabilita
    //  hasta que llegue la respuesta
   // xajax.$('enviar').disabled = true;
   // xajax.$('enviar').value = "Procesando.....";
 
    // Aquí se hace la llamada a la función registrada de PHP
    xajax_calcularC(xajax.getFormValues("datosC"));
 
    return false;
}
 
function calcularRaiz() {
    // Se cambia el botón de Enviar y se deshabilita
    //  hasta que llegue la respuesta
   // xajax.$('enviar').disabled = true;
   // xajax.$('enviar').value = "Procesando.....";
 
    // Aquí se hace la llamada a la función registrada de PHP
    xajax_calcularR(xajax.getFormValues("datosR"));
 
    return false;
}



Icon activity.jpg

Actividad

  • Vamos a hacer una validación de un formulario en el servidor usando ajax 
<span class='error'>Debe tener más de 3 caracteres.</span>
<span class='error'>Debe ser mayor de 5 caracteres o no coinciden.</span>
<span class='error'>La dirección de email no es válida.</span>
  • Para ello vamos a tener las siguientes funciones en php




  • Descargamos los ficheros de github git clone git:/githib.com/MAlejandroR/xajax
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/PHP/xajax/introduccion&oldid=24975»