Diferencia entre revisiones de «Usuario:ManuelRomero/PHP/xajax»

De WikiEducator
Saltar a: navegación, buscar
 
(6 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
===Objetivo===
+
{{TEP}}
*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.
+
{{:Usuario:ManuelRomero/PHP/xajax/nav}}
*Podemos ver estas librerías en
+
<br />
#http://ajaxpatterns.org/PHP_Ajax_Frameworks 
+
__NOTOC__
#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/
+
*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
+
<source lang=php>
+
require_once (./xajax_core/xajax_inc.php');
+
</source>
+
*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
+
<source lang=php>
+
require_once (./xajax_core/xajax_inc.php');
+
 
+
$miXajax = new xajax();
+
</source>
+
*La clase necesita incluir una serie de código en javascript en la página que vamos a generar, '''''printJavascript()'''''
+
</source>
+
....
+
$miXajax->printJavascript()
+
</source>
+
*Prueba a ver el resultado de la página con lo escrito hasta ahora
+
*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/');
+
 
+
....
+
</source>
+
 
+
*Podemos también establecer (solo para el desarrollo), que nos de un traceo del proceso
+
<source lang=php>
+
...
+
$miXajax->configure ('debug',true);
+
 
+
....
+
</source>
+
*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
+
 
+
<source lang=php>
+
...
+
$ajax->register(XAJAX_FUNCTION, 'saludar');
+
 
+
....
+
</source>
+
 
+
*Esto implicará que se en la página html se cree 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
+
 
+
<source lang=php>
+
...
+
$ajax->processRequest();
+
 
+
....
+
</source>
+
*El método '''''processRequest()''''' debe ser invocado antes de sacar ninguna salida
+
{{Resumen|
+
<source lang=php>
+
<?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();
+
 
+
</source>
+
}}
+
 
+
===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/
+
<source lang=php>
+
 
+
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;
+
}
+
</source>
+
;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
+
<source lang=php>
+
function saludar ($datosDelCliente){
+
 
+
  $respuesta = new xajaxResponse();
+
  $respuesta->alert("Este es un mensaje para el cliente");
+
 
+
................
+
  return $respuesta;
+
}
+
</source>
+
 
+
;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
+
<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'];
+
  $msj="Hola $nombre encantado de saludarte");
+
  $respuesta->assign('saludo', 'innerHTML', $msj);
+
................
+
  return $respuesta;
+
}
+
</source>
+
*En el cliente tendremos un elemento con id saludo que se sustituirá por el texto especificado <div id=saludo></div>
+
===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
+
<source lang=html5>
+
 
+
<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>
+
</source>
+
*Ahora queda implementar la función saludar()
+
<source lang=html5>
+
<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>
+
</source>
+
*Como ya sabéis se recomienda escribir las funciones en un fichero aparte
+
<source lang=html5>
+
  <script type="text/javascript" src="saludar.js"></script>
+
</source>
+
* 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
+
<!--
+
<source lang=php>
+
<?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>
+
</source>
+
 
+
<source lang=javascript>
+
/*
+
* 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;
+
}
+
 
+
</source>
+
-->
+
{{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
+
}}
+

Última revisión de 22:20 15 ene 2018

Road Works.svg Trabajo en proceso, espera cambios frecuentes. Tu ayuda y retroalimentación son bienvenidos.
Ver página de charlas.
Road Works.svg