|
|
| Línea 2: |
Línea 2: |
| | {{:Usuario:ManuelRomero/PHP/xajax/nav}} | | {{:Usuario:ManuelRomero/PHP/xajax/nav}} |
| | <br /> | | <br /> |
| − | | + | __NTOC__ |
| − | | + | |
| − | ===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
| + | |
| − | #http://ajaxpatterns.org/PHP_Ajax_Frameworks
| + | |
| − | #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
| + | |
| − | <source lang=html5>
| + | |
| − | <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>
| + | |
| − | </source>
| + | |
| − | | + | |
| − | *Para ello vamos a tener las siguientes funciones en php
| + | |
| − | }}
| + | |
| − | *Descargamos los ficheros de github git clone git:/githib.com/MAlejandroR/xajax
| + | |
