jpspan_02.jpg
En la segunda parte de Ajax con JPSpan, vamos a realizar un programa en el lado del cliente con JavaScript y HTML y en el servidor un programa en PHP.

Dichos programas serán muy sencillos, porque mi intención es probar la rápidez del sistema de comunicaciones con JPSpan y después iremos complicando los programas en función de los comentarios y pruebas a realizar.

La ídea del programa: El programa tiene que enviar un campo con un select de M=Mujer y H=Hombre al servidor y este tiene que responder la ID de session del sistema, un nombre y empresa, supuestamente extraido de una Base de Datos y el texto de Hombre o Mujer seleccionado por el Usuario.

Ejemplo del programa muy Sencillo de Comunicación Ajax con JpSpan

Sesion ID :

Nombre :

Empresa:

Mujer

El programa en el lado del cliente y realizado en html es :

<head>
<title>Ejemplo Sencillo de JPSpan</title>
<script type=»text/javascript» src=»jpspan_server.php?client»></script>
<script type=»text/javascript»>

function init() {
remoteCustomer = new customer(customerCallback);
}

var customerCallback = {
getmydatos:function(mydatos)
{
showDatos(mydatos);
}
};

function fetchMydatos(tysexo) {
remoteCustomer.getmydatos(tysexo.value);
}

function showDatos(Mydatos) {
document.getElementById(«txtSession»).value = Mydatos[«sessionid»];
document.getElementById(«txtNombre»).value  = Mydatos[«nombre»];
document.getElementById(«txtEmpresa»).value = Mydatos[«empresa»];
document.getElementById(‘esSexo’).innerHTML=Mydatos[«tysexo»];
}

</head>
<body onload=»init();»>
<h1>Ejemplo muy Sencillo de Comunicación Ajax con JpSpan</h1>
<p><label>Hombre/Mujer</label>
<select size=»1″ name=»txtSexo»>
<option selected value=»M»>Mujer</option>
<option value=»H»>Hombre</option>
</select></p>
<p><button onClick=»javascript:fetchMydatos(document.getElementById(‘txtSexo’));» >Enviar</button></p>
<p>Sesion ID : <input id=»txtSession»  name=»sessionid» size=»55″ type=»text»></p>
<p>Nombre :<input id=»txtNombre» name=»nombre»  size=»55″ type=»text»> </p>
<p>Empresa : <input id=»txtEmpresa» name=»empresa» size=»45″ type=»text»></p>
<label>El Sexo Seleccionado es : </label><p id=»esSexo»> </p>
</body>
</html>

Vamos a comentar las instrucciones que son esenciales para la conexión del  programa con el servidor PHP:

La sentencia :

<script type=»text/javascript» src=»jpspan_server.php?client«></script>

Indicamos el nombre del programa del servidor php a llamar con la cadena de consulta client, se le indica que es código javaScript.

La Funcion  :

function init() {
remoteCustomer = new customer(customerCallback);
}

La funcion init() se carga de forma automatica en la etiqueta body con la instruccion onload ejemplo en el programa: <body onload=»init();»>

Dicha funcion inicia una variable objeto customer de rellamada a la funcion customerCallBack, aqui es donde empieza todo el proceso con sus metodos que se llaman al programa jpspan_server.php del servidor y recibimos los datos o mensajes de error.

Un tema muy importante :En javaScript las palabras de las clases y funciones de reflexion con el servidor de PHP, tienen que estar en minúsculas, no así en el lado del servidor, el objeto customer es la clase que tenemos que crear nuestra lógica de programa en el servidor del PHP y puede ser creada como   class Customer {  .

En el post (abajo) he colocado el programa PHP del servidor para que se pueda ver el funcionamiento de los nombres de la clase Customer y la funcion getMyDatos.

La siguiente instrucción creamos la variable customerCallback con la propiedad getmydatos:function(mydatos).  La propiedad getmydatos es la public function getMyDatos($tysexo) que esta dentro de la clase Customer del programa jpspan_server.php del servidor y como argumeto los datos que vamos a recibir desde el servidor. Una ver recibidos los argumentos pasamos a la funcion showDatos(mydatos); para que sean visualizados mediante el objeto document.getElementById();

var customerCallback = {
getmydatos:function(mydatos)
{
showDatos(mydatos);
}
};

Nos queda ya sólo comentar La funcion :

function fetchMydatos(tysexo) {
remoteCustomer.getmydatos(tysexo.value);
}

function fechMydatos(tysexto) es llamada cuando el usuario pica el botón enviar, mediante el evento onClik, y a su vez llama al objeto remoteCustomer.getmydatos pasando los datos que deseamos al servidor. Se activa la llamada al programa   jpspan_server.php?client , una vez terminado el proceso devuelve la informacion por la variable customerCallback { getmydatos:function(mydatos) }.

El ejemplo de la instrucción evento de ratón onClick es :

<p><button onClick=»javascript:fetchMydatos(document.getElementById(‘txtSexo’));» >Enviar</button></p>

Una vez explicado todo el proceso vamos a repasar la lógica del programa

  1. El usuario selecciona (M = Mujer o H=Hombre) y picar el botón «ENVIAR»
  2. Se activa el evento onClick que llama a la funcion fechMydatos, enviando el valor seleccionado por el usuario (M o H).
  3. Se pasa el valor a la propiedad getmydatos del objeto ya creado anteriormente remoteCustomer
  4. Dicho objeto realiza la llamada al programa jpspan_server.php?client, pasando los datos por POST al servidor
  5. Una vez procesada la información, son devueltos los datos por  la variable getmydatos:function(mydatos)
  6. y por último enseñamos la información por la funcion showDatos(mydatos);

Los datos son recibidos por el programa y los visualizamos por la función :

function showDatos(Mydatos) {
document.getElementById(«txtSession»).value = Mydatos[«sessionid»];
document.getElementById(«txtNombre»).value  = Mydatos[«nombre»];
document.getElementById(«txtEmpresa»).value = Mydatos[«empresa»];
document.getElementById(‘esSexo’).innerHTML=Mydatos[«tysexo»];
}

Lo importante de dicha funcion es la forma de visualizar los datos con el objeto document.getElementByID().value y document.getElementById().innerHTML  la tabla devuelta indexada por los nombres de campos enviados por el servidor.

Para los programadores de PHP dichas tablas son muy conocidas por estar siempre trabajando con ellas en los programas de PHP.

Voy a dejar escrito el programa jpspan_server.php en el lado del servidor y en la siguiente entrega lo explicare, pero es muy importante ver la descripción de la clase Custumer y su funcion getMydatos, porque por ahí se comunican los dos programas y sobre todo mirar los nombres de las clases, funciones y datos para no tener problemas de comunicación entre los dos programas :

El Programa  : jpspan_server.php en el servidor es :

<?php
/**
* This is a remote script to call from Javascript
* @version  $Id: jpspan_server.php 0001 2009-01-01 00:00:00 mariano $
* @package  mvmphp
* @copyright Copyright (C) 2009
* @comment      Server de datos para entornos Ajax
*               Recibir y Enviar información al cliente
*/
require_once ‘../JPSpan.php’;
require_once JPSPAN . ‘Server/PostOffice.php’;
define(‘JPSPAN_INCLUDE_COMPRESS’,FALSE);
session.start();
class Customer
 {
public function getMyDatos($tysexo)
 {
$mydatos[‘sessionid’] = session_id() ;
$mydatos[‘nombre’] = «mariano» ;
$mydatos[‘empresa’] = «Telepieza S.A.» ;
if ($tysexo == «H») $mydatos[‘tysexo’]= «Hombre»;
elseif ($tysexo == «M» ) $mydatos[‘tysexo’]=’Mujer’  ;
else   $mydatos[‘tysexo’] = ‘¿?’;
return $mydatos ;
}
}
$S = & new JPSpan_Server_PostOffice();
$S->RequestEncoding = ‘php’;
$S->addHandler(new Customer());
if (isset($_SERVER[‘QUERY_STRING’]) && strcasecmp($_SERVER[‘QUERY_STRING’], ‘client’)==0)
{
$S->displayClient();
} else {
require_once JPSPAN . ‘ErrorHandler.php’;
$S->serve();
}
?>

Un Saludo de Telepieza.