|
|
| (4 revisiones intermedias por el mismo usuario no mostrado) |
| Línea 1: |
Línea 1: |
| − | {{:Usuario:ManuelRomero/PHP/xajax/nav}}
| + | ===Xajax: poner ajax desde el servidor=== |
| − | ===Objetivo=== | + | ;Qué es ajax |
| − | *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.
| + | Dónde lo pongo? |
| − | *En este caso pretendemos que sea el servidor el que genere este código, y no generarlo directamente en el cliente.
| + | Qué elementos intervienen en una comunicacion ajax |
| − | *Existen situaciones en las cuales puede ser interesante aplicar esta forma de proceder.
| + | ===Usando la librería=== |
| − | | + | *La instalamos desde composer la librería que queremos utilizar |
| − | *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/ 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
| + | |
| | <source lang=php> | | <source lang=php> |
| − | require_once (./xajax_core/xajax_inc.php');
| + | "require": { |
| − | </source>
| + | "jaxon-php/jaxon-core": "~2.0" |
| − | *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 lang=php>
| + | |
| − | ....
| + | |
| − | $miXajax->printJavascript()
| + | |
| − | </source>
| + | |
| − | *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|index.php probando el método printJavaScript| | + | |
| − | <source lang=php>
| + | |
| − | <?php
| + | |
| − | //cargo la librería de xajax
| + | |
| − | require ('xajax_core/xajax.inc.php');
| + | |
| − | | + | |
| − | $ajax = new xajax();
| + | |
| − | $ajax->printJavascript();
| + | |
| − | | + | |
| − | ?>
| + | |
| − | <!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>
| + | |
| − | </source>
| + | |
| − | }}
| + | |
| − | {{Plegable|hide|Viendo el resultado del código escrito|
| + | |
| − | <source lang=html5>
| + | |
| − | | + | |
| − | | + | |
| − | <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/');
| + | |
| − | | + | |
| − | ....
| + | |
| − | </source>
| + | |
| − | | + | |
| − | *Podemos también establecer (solo para el desarrollo), que nos dé 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 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.
| + | |
| − | | + | |
| − | <source lang=php>
| + | |
| − | ...
| + | |
| − | $ajax->processRequest();
| + | |
| − | | + | |
| − | ....
| + | |
| − | </source>
| + | |
| − | *El método '''''processRequest()''''' debe ser invocado antes de sacar ninguna salida '''''ni echo ni código html'''''
| + | |
| − | {{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> | | </source> |
| − | | + | Debemos tener los ficheros javascript que utiliza |
| − | *Para ello vamos a tener las siguientes funciones en php
| + | https://github.com/jaxon-php/jaxon-js |
| − | }}
| + | https://www.jaxon-php.org/docs/usage/installation.html |
| − | *Descargamos los ficheros de github git clone git:/githib.com/MAlejandroR/xajax
| + | |
