Revisión de 11:28 10 abr 2017

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

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

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

index.php probando el método printJavaScript

<?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>

{{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

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;
}

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

@@ Línea 1: / Línea 1: @@
+{{:Usuario:ManuelRomero/PHP/xajax/nav}}
 ===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.

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

Revisión de 11:28 10 abr 2017

Contenido

¡El servidor te responde

Objetivo

Xajax

Usando xajax

Resumen

Implementando el método xajax en el servidor

Invocando a la función desde el cliente

Ejemplo

Actividad

Menú de navegación

Herramientas personales

Espacios de nombres

Variantes

Vistas

Acciones

Buscar

Navegación

Herramientas

Imprimir/exportar