Es interesante leer la información de la wikipedia para entender mejor el porqué es necesario programas como Mootools, Jquery, Dojo, Prototype  o script.aculo.us para desarrollar páginas web cada vez más interactivas con el usuario final (Internauta).

Mootools tiene un API para ajax, pero en mi opinión el modulo JPSpan está más desarrollado para entornos AJAX – PHP.

JPSpan una de las cosas que tiene muy buenas es el control de 6 tipos diferentes de errores.

1. Control de Error en la comunicación con XMLHttpRequest.
2. Mensajes de Error durante la comunicación con el Servidor.
3. Control de Error desde el Servidor al Cliente.
4. Mensajes de Error de Aplicación del Servidor al Cliente.
5. Mensajes de Error de Aplicación del Cliente al Servidor.
6. Error de sintaxis en los programas de JavaScript

JPSpan no se centra sólo en gestionar bien los mensajes de error, sino en la comunicación de datos pudiendo ser en los siguientes formatos:  JSON, PHP, XML, TXT.

Podemos utilizar Mootools como gestor de eventos para controlar las teclas y el ratón en nuestra aplicación WEB, dejando el código de nuestra página sólo con código HTML, sin ninguna instrucción  JavaScript y CSS.

Se dice que la era de la WEB 2.0 es eso, uno o varios ficheros con extensión  .css para los estilos, uno o varios ficheros .js para el código JavaScript y por último una página realizada en php o html o .NET o Java, que su resultado final  es sólo código HTML.

Todo lo expuesto no es posible si no tenemos herramientas como Mootools o JPSpan para poder realizar nuestros proyectos con una precisión y fiabilidad increible.

Pero todo tiene una pega, y son las incompatibilidades que un programador tiene cuando quiere unir diferentes programas (Mootools y JPSpan)  para poder llegar a un resultado final  esperado por el programador, cuando tenemos dichos problemas, nos es muy dificil solucionarlos por tener poca ayuda disponible en Internet.

Escribo dicho post para explicar cómo solucionar un problema grave de funcionamiento del modulo JPSpan utilizando Mootools como framework en nuestras aplicaciones Web.

El problema radica en la no recepción de parámetros o datos enviados por nuestro programa realizado en JavaScript al servidor de datos PHP.

Para solucionar el problema tenemos que ir al programa post.js que está en JPSpan/js/request, buscamos la instrucción (ver código abajo) y añadimos la instrucción  :

                    if (!isNaN(argName))  { y su parentisis al final ),

for ( var argName in this.args ) {
               if (!isNaN(argName))  {
            try {
                this.body += sep + argName + ‘=’;
                this.body += encodeURIComponent(this.encoder.encode(this.args[argName]));
            } catch (e) {
                throw JPSpan_Client_Error(e, 1006);
            }
            sep = ‘&’;
         }
        }

Añadir las dos instrucciones que están en rojo, dicha instrucción pregunta si el índice del objeto o el parámetro es numérico, si es así lo procesa, sino no lo graba en this.body, de esa forma sólo enviamos los parametros deseados al servidor y eliminamos un montón de datos que el módulo Mootools ha grabado el solito sin que nosotros le digamos nada.

Una vez modificado el programa post.js, tenemos que realizar la misma operación con el programa get.js

       for ( var argName in this.args ) {
          if (!isNaN(argName))  {
            try {
                uri += sep + argName + ‘=’;
                uri += encodeURIComponent(this.encoder.encode(this.args[argName]));
            } catch (e) {
                throw JPSpan_Client_Error(e, 1006);
            }
            sep = ‘&’;
          }
        };
 

El resto de funcionalidades de JPSpan no he notado nada anormal cuando incorporamos en nuestra página el módulo Mootools para realizar nuestros programas WEB 2.0 estilo escritorio.

Saludos de telepieza.

……………………………………………………..

1.- JPSpan se comunica mediante HTTP, define la sintaxis y la semántica que utilizan los elementos software de la arquitectura web (clientes, servidores, proxies) para comunicarse. Es un protocolo orientado a transacciones y sigue el esquema petición-respuesta entre un cliente y un servidor.

2.- JPSpan utiliza el Objeto XMLHttpRequest (XHR), también referida como XMLHTTP (Extensible Markup Language / Hypertext Transfer Protocol), es una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores WEB. Para los datos transferidos se usa cualquier codificación basada en texto, incluyendo: texto plano, PHP, XML, JSON, HTML. Dicho objeto lo tenéis en JPSpan/js/httpclient.js

3.- JPSpan utiliza la técnica de reflexión de objetos. La reflexión es un proceso mediante el cual un programa es capaz de obtener información sobre si mismo y por tanto es capaz de auto modificarse en tiempo de ejecución. JavaScript emplea el concepto de reflexión para permitir descubrir propiedades y métodos de objetos externos. El ejemplo más sencillo es el de averiguar si un objeto posee un determinado método y así poder ejecutarlo (Eso es lo que hace JPSpan).

4.- JPSpan puede utilizar JSON, acrónimo de “JavaScript Object Notation”, es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.

5.- JPSpan puede utilizar XML-RPC es un protocolo de llamada a procedimiento remoto que usa XML para codificar los datos y HTTP como protocolo de transmisión de mensajes, gracias al Objeto XMLHttpRequest.

6.- JPSpan está pensado para trabajar con servidores PHP. Es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas, y puede ser incrustado en páginas de código HTML.

7.- JPSpan se utiliza para la técnica AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o de entorno escritorio.

8.- JPSpan no es un entorno de programación, sino de comunicaciones mediante HTTP y gestion de Errores entre el Cliente (Navegador) y el Servidor de PHP, utilizando la técnica AJAX mediante el objeto XMLHttpRequest.

9.- JPSpan puede representar sus argumentos pasados por el servidor (Variables), mediante DOM (Document Object Model), es una interfaz de programación de aplicaciones que proporciona un conjunto estándar de objetos para representar documentos HTML y XML.  DOM es una API para acceder, añadir y cambiar dinámicamente contenido estructurado en documentos con lenguajes como ECMAScript (Javascript).

10.- JPSpan al lado del Cliente (Navegador), necesita para que funcione lenguaje JavaScript. Dicho lenguaje es de programación interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a lenguajes orientado a objetos como Java , C++ .

11.- JPSpan por ser tecnología HTTP, necesita de un servidor Web Apache o IIS para windows con soporte versión 5 de PHP.

RESUMIENDO :

JPSpan es un marco de trabajo Ajax construido con la intención de integrar JavaScript, CSS, XML, HTML, DOM y JSON, en el lado del Cliente (Navegador) con el código del lado del servidor escrito en PHP para realizar aplicaciones web interactivas.

 Un Saludo de Telepieza

Cómo hemos indicado JPSpan proporciona al Cliente el código JavaScript necesario para realizar llamadas a la clase en el lado del servidor y hacer que la página pueda gestionar las llamadas en sí.

La función displayCliente(), está en la página /JPSpan/Server.php y es :

/**
* Display the Javascript client and exit
* @return void
* @access public
*/
function displayClient() {
$G = & $this->getGenerator();
require_once JPSPAN . ‘Include.php’;
$I = & JPSpan_Include::instance();
// HACK – this needs to change
$I->loadString(__FILE__,$G->getClient());
$client = $I->getCode();
header(‘Content-Type: application/x-javascript’);
header(‘Content-Length: ‘.strlen($client));
echo $client;
}

Lo importante de dicho método es la generación de la variable $client, es donde está todo el código JavaScript generado por JPSpan en función a los parámetros que le hemos enviado, por ejemplo, indicar que el código de transmisión de los argumentos (variables) sea por ‘php’, ‘xml’ o json’ o Comprimir el código JavaScript mediante la página script.php.

Cómo no es posible visualizar por pantalla la variable $client, vamos a introducir tres líneas nuevas de código php (ver abajo en rojo la incorporación) para grabar dicha variable en un fichero con nombre ‘logclient.txt’ para analizar su contenido en profundidad y es :

/**
* Display the Javascript client and exit
* @return void
* @access public
*/
function displayClient() {
$G = & $this->getGenerator();
require_once JPSPAN . ‘Include.php’;
$I = & JPSpan_Include::instance();
// HACK – this needs to change
$I->loadString(__FILE__,$G->getClient());
$client = $I->getCode();
$t_log_fp   = fopen(‘logclient.txt’, ‘w’);
fwrite($t_log_fp, $client );
fclose($t_log_fp);
header(‘Content-Type: application/x-javascript’);
header(‘Content-Length: ‘.strlen($client));
echo $client;
}

La primera instrucción insertada por nosotros $t_log_fp  = fopen(‘logclient.txt, ‘w’); le indicamos que abra el fichero de modo escritura, si no existe lo crea, y que empiece en el primer registro al indicar la letra ‘w’.

La segunda instrucción  fwrite($t_log_fp, $clientn ); le indicamos que grabe en dicho fichero la variable $client.

La tercera instrucción fclose($t_log_fp); le indicamos que cierre el fichero logclient.txt.

NOTA : Cuando activamos el programa realizado en html con el navegador y llama al programa jpspan_server.php del servidor, grabará en la carpeta  (donde ha sido llamado el programa jpspan_server.php) el fichero logclient.txt con todas las instrucciones javascript necesarias para poder realizar la comunicación.

Podemos ver el fichero una vez generado : FICHERO LOGCLIENT.TXT

Al verlo nos damos cuenta que tiene más de 1200 líneas y un peso de 33 Kb. Es la unión de varios ficheros js que lee el programa para generar en una sola variable  ($client) según la necesidades de comunicación y compresión. Los programas JavaScript que lee están en la ruta /JPSpan/js y son : serialize.js, httpclient.js, json,js , remoteobject.js, recuest.js, otra carpeta que utiliza es  /JPSpan/js/code/php.js , xml.js , json.js y por último la carpeta /JPSpan/js/request/get.js , post.js , rawpost.js.

Una vez leídos y procesados todos los .js necesarios para la comunicación, al final de la varaible $client crea el programa todos los métodos necesarios de la function customer para la interconexión entre los dos programas (Cliente y Servidor).

Ejemplo de la función customer creada por el programa :

function customer() {
var oParent = new JPSpan_RemoteObject();
if ( arguments[0] ) {  oParent.Async(arguments[0]); }
oParent.__serverurl = ‘http://localhost/generic/jpspan_server.php/customer’;
oParent.__remoteClass = ‘ customer’;
oParent.__request = new JPSpan_Request_Post(new JPSpan_Encode_PHP());
oParent.getmydatos = function() { var url = this.__serverurl+’/getmydatos/’;
return this.__call(url,arguments,’getmydatos’);  };
return oParent;  }

Imaginaros que realizo un programa en html que pide un código de una referencia y el programa JPSpan del servidor tiene que devolver la descripción, el Pr. Venta y los descuentos, según lo analizado anteriormente, nos generará una variable $client de más de 1.200 líneas con un peso de 33 Kb, si nuestro programa pide 10 referencias, el programa abra generado más de 12.000 líneas con un peso de 330 Kb.

Vamos es como matar moscas a cañonazos.

Tenemos que solucionar el problema de peso y número de líneas de la variable $client, no puede llegar a sobrepasar más de 12 Kb y no puede tener más de 15 líneas en su conjunto, para que pueda ser competitivo el módulo JPSpan con otros programas similares a él .

Cómo hemos indicado el propio programa JPSpan tiene un compresor de código JavaScript y lo hemos rechazado, porque cada vez que genera el objeto client, tiene que realizar la compresión y eso relentiza un montón todo el proceso de comunicaciones.

Para solucionar el problema de peso y número de líneas tenemos que comprimir los ficheros javascript que lee el programa servidor realizado en php de antemano (Antes de ser leídos por JPSpan). Eso significa comprimir el serialize.js, httpclient.js, remoteobject.js, request.js, php.js, xml.js, json.js, get.js, post.js y rawpost.js.

Para ello, tenemos que ir al mejor compresor de instrucciones javascript que existe en la red y no es otro que el realizado por Yahoo Download YUI Compressor version 2.4.2, en dicha página nos explica el funcionamiento del programa, está realizado en java, pero la verdad es muy bueno.

Aquí les dejo el proceso de compresión de los ficheros xxxxxx.js que los pasa ya comprimidos a xxxxx2.js, por ejemplo el httpclient.js pasa a httpclient2.js ya comprimido.

NOTA : Pasar todos los ficheros xxxxx.js a la carpeta /yuicompressor-2.4-2/build/ y crear un programa .bat con el editor de texto para que realice la compresión de todos ellos.

Programa JPSpan.bat :

java -jar yuicompressor-2.4.2.jar –type js httpclient.js   -o httpclient2.js   
java -jar yuicompressor-2.4.2.jar –type js remoteobject.js -o remoteobject2.js
java -jar yuicompressor-2.4.2.jar –type js request.js      -o request2.js      
java -jaryuicompressor-2.4.2.jar –type js serialize.js    -o serialize2.js    
java -jar yuicompressor-2.4.2.jar  –type js json.js         -o json2.js         
java -jar yuicompressor-2.4.2.jar –type js php.js          -o php2.js          
java -jar yuicompressor-2.4.2.jar –type js xml.js          -o xml2.js         
java -jar yuicompressor-2.4.2.jar –type js get.js          -o get2.js          
java -jar yuicompressor-2.4.2.jar –type js post.js         -o post2.js      
java -jar yuicompressor-2.4.2.jar –type js rawpost.js    -o rawpost2.js 

Una vez comprimido los ficheros aún no podemos renombrarlos y pasarlos a la carpeta JPSpan/js, porque tenemos que incluir en algunos de ellos, el encabezado “include” que el JPSpan necesita en algunos ficheros .js,  y el compresor de yahoo ha eliminado por entender que son comentarios.

En el fichero request2.js incluiremos al principio estas cuatro líneas que están al principio del fichero sin comprimir request.js (Editar el fichero request.js y ver dichas líneas)

/**@
* include ‘httpclient.js’;
* include ‘json.js’;
*/

En el fichero json2.js está repetido dos veces, una en la carpeta /js y otra en la carpeta js/code/ incluiremos al principio estas tres líneas que están al principio del fichero sin comprimir json.js, tiene que estar repetido en las dos carpetas, no borrar ninguno de ellos.

/**@
* include ‘serialize.js’;
*/

En los ficheros php2.js y xml2.js incluiremos al principio estas tres líneas que están al principio del fichero sin comprimir php.js y xml.js (Editar el fichero php.js y xml.js y ver dichas líneas)

/**@
* include ‘serialize.js’;
*/

De los ficheros get2.js, post2.js y rawpost2.js incluiremos estas tres líneas que están al principio del fichero sin comprimir get.js, post.js y rawpost.js de la carpeta js/request/ (Editar el fichero get.js, post.js y rawpost.js y ver dichas líneas)

/**@
* include ‘request.js’;
*/

Una vez introducidos todos los includes borrados por el compresor, guardamos los .js originales sin comprimir y pasamos ya renombrados los xxxxx2.js comprimidos machacando los originales con xxxxx.js.

Y ahora hacemos una prueba con nuestro programa de comunicaciones y vemos si enseña los datos, si los enseña es que todo el proceso de compresión es correcto, si por algún motivo no enseña los datos, es porque te falta algún include en un .js o has borrado algún .js de la carpeta JPSpan/js.

Podemos ver el fichero una vez generado con los .js comprimidos por el programa de yahoo : FICHERO LOGCLIENT2.TXT, el fichero resultante tiene 12 Kb, pero aún tiene muchas líneas unas 30, y es porque al crear la  funcion costumer el programa deja espacios en blanco por cada instrucción añadida a la variable client.

Para solucionar el problema, editamos el programa JPSpan/server/PostOffice.php y al final veremos la function generateHandleCliente y empezamos a eliminar los blancos y unir varias líneas en una sola, el código ya cambiado tiene que quedar más o menos asi:

function gerateHandleClient(& $Code, & $Description) {
ob_start();
?>
function <?php echo $Description->Class; ?>() { var oParent = new JPSpan_RemoteObject();
if ( arguments[0] ) {  oParent.Async(arguments[0]);  } oParent.__serverurl = ‘<?php
echo $this->serverUrl . ‘/’ . $Description->Class; ?>’; oParent.__remoteClass = ‘ <?php echo $Description->Class; ?>’;
<?php
switch ($this->RequestEncoding) {
case ‘xml’:
?>oParent.__request = new JPSpan_Request_RawPost(new JPSpan_Encode_Xml()); <?php
break;
case ‘json’:
?>oParent.__request = new JPSpan_Request_RawPost(new JPSpan_Encode_JSON());<?php
break;
default:
?>oParent.__request = new JPSpan_Request_Post(new JPSpan_Encode_PHP());<?php
}

foreach ( $Description->methods as $method ) {
?>
oParent.<?php echo $method; ?> = function() { var url = this.__serverurl+’/<?php echo $method; ?>/’;
return this.__call(url,arguments,’<?php echo $method; ?>’); }; <?php }?>return oParent; } <?php
$Code->append(ob_get_contents());
ob_end_clean();
}
}

Una vez realizado los cambios en el programa .php, volvemos a realizar otra prueba para ver el resultado de nuestra variable $client en el fichero :  FICHERO LOGCLIENT3.TXT

AHORA SI, LA VARIABLE $CLIENT SÓLO PESA 12 Kb Y TAN SÓLO TIENE 12 LÍNEAS, HEMOS GANADO EN RÁPIDEZ Y PRECISIÓN EN LAS COMUNICACIONES ENTRE EL SERVIDOR Y EL NAVEGADOR.

YA EMPIEZA A SER COMPETITIVO E INTERESANTE EL MÓDULO JPSpan PARA LAS COMUNICACIONES CON AJAX EN NUESTROS PROGRAMAS.

Pero aún no hemos terminado, estamos en el principio de algo grande para todos nosotros a nivel de comunicaciones estilo AJAX con PHP …………

OBSERVACIONES : Una vez realizada todas las pruebas , recordar en comentar las tres instrucciones creadas en la function displayClient(), para que no genere el fichero logclient.txt

function displayClient() {
$G = & $this->getGenerator();
require_once JPSPAN . ‘Include.php’;
$I = & JPSpan_Include::instance();
// HACK – this needs to change
$I->loadString(__FILE__,$G->getClient());
$client = $I->getCode();
// $t_log_fp   = fopen(‘logclient.txt’, ‘w’);
// fwrite($t_log_fp, $client );
// fclose($t_log_fp);
header(‘Content-Type: application/x-javascript’);
header(‘Content-Length: ‘.strlen($client));
echo $client;
}

Saludos de Telepieza

  Las instrucciones requiere_once ‘../JPSpan.php’ declara la constante JPSPAN, para después utilizarla en la llamada del programa principal que está en la carpeta JPSpan/Server/PostOffice.php de esa forma tiene disponibles las clases necesarias para la comunicación entre el Servidor y el Navegador.

1.- require_once ‘../JPSpan.php’;
2.- require_once JPSPAN . ‘Server/PostOffice.php’;

La variable JPSPAN_INCLUDE_COMPRESS, puede ser TRUE o FALSE, sirve para comprimir el programa en javascript generado por el servidor para la comunicación, siempre le indicaremos FALSE, porque la técnica de compresión que tiene JPSpan es muy lenta y come mucho recurso de máquina, no es nada aconsejable colocar en dicha variable TRUE.

3.- define(‘JPSPAN_INCLUDE_COMPRESS’,FALSE);

Arrancamos la sesión de usuario con la instrucción  : 4.- session.start(); , para después enviar el ID de sessión al navegador.

Definimos nuestra clase, la class Customer que si recordáís, es la creada como objeto en javascript  function init() {  remoteCustomer = new customer(customerCallback); }  (Leer la 2ª parte)

Mirar sobre todo la concordancia del nombre al crear el objeto en javascript con new customer y la clase del servidor como class Customer.

IMPORTANTE : Cuando se define el objeto y el método en javascript siempre se tiene que colocar en minúsculas (new customer) y en el servidor puede ser el nombre en mayúsculas y minúsculas, ejemplo class Customer.

Una vez creada la clase , creamos la funcion public function getMyDatos($tysexo), es la función pública por donde entran los datos de javascript y los que enviaremos nosotros al navegador con la instrucción :  return $mydatos ;.

En el programa de JavaScript recordar la instrucción :  var customerCallback = {    getmydatos:function(mydatos)   {  showDatos(mydatos);  } }; .

Fijaros en el nombre de la variable de JavaScript y en la función del servidor son el mismo nombre (function getMyDatos) y por dicha coincidencia la comunicación es posible entre el programa de JavaScript y el programa del servidor realizado en PHP.

Las siguientes instrucciones son completar la matriz con el id de sesion_id, con los nombres de campo a enviar , para no complicar el programa, simplemente he colocado constantes de “mariano”, “Telepieza S.A.” y después realizo una comprobación de la variable (M o H) que envía el navegador para grabar el texto de Mujer o Hombre en la matriz con el índice “tysexo” ,

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

- Indexada: Aquella cuyo acceso a los elementos se realiza por la posición que ocupan dentro de la estructura (se inician siempre desde la posición 0). Ejemplo: $mymatriz[0].

Asociativa: Es aquella en la que los elementos están formados por pares clave-valor y el acceso se realiza proporcionando una determinada clave. Ejemplo: $mydatos[tysexo'].

Las utilizadas en el ejemplo del programa servidor en PHP para enviar al programa del Navegador en JavaScript son de tipo Asociativas :

$mydatos['sessionid'] = session_id() ;
$mydatos['nombre'] = “mariano” ;
$mydatos['empresa'] = “Telepieza S.A.” ;
$mydatos['tysexo']=’Mujer’  ;

Y las visualizamos de la misma forma en el programa JavaScript del Navegador mediante la instrucción del objeto : document.getElementById :

document.getElementById(“txtSession”).value = Mydatos["sessionid"];
document.getElementById(“txtNombre”).value  = Mydatos["nombre"];
document.getElementById(“txtEmpresa”).value = Mydatos["empresa"];
document.getElementById(‘esSexo’).innerHTML=Mydatos["tysexo"]

Si os dais cuenta lo importante para visualizar los datos es el nombre del indice y no así el nombre de la matriz.

La siguiente instrucción del programa es  :

6.- $S = & new JPSpan_Server_PostOffice();, creamos una nueva instancia de JPSpan_Server_PostOffice, que es utilizada en todas las aplicaciones de JPSpan y es la responsable de crear los métodos JavaScript del lado del cliente cuyas firmas replican las de la clase Customer.

En lugar de ejecutar estos métodos de forma local, se pasan los argumentos  al servidor utilizando un objeto XmlHttpRequest y los resultados obtenidos se devuelven mediante una respuesta HTTP.

A continuación se pasa la clase Customer a JPSpan_Server_PostOffice a través del método addHander :  8.-  $S->addHandler(new Customer());, ese momento mediante la técnica de reflexión examina nuestra clase de trabajo y crea los esquemas de código JavaScript necesarios para la comunicación.

La instruccion : 7.- $S->RequestEncoding = ‘php’;, es la forma a transmitir los datos , pudiendo ser ‘xml’,`’php’ y ‘json’, por defecto si no le indicamos nada a JPSpan siempre es de tipo  ‘php’.

La siguiente línea del programa es :

9.- if (isset($_SERVER['QUERY_STRING']) && strcasecmp($_SERVER['QUERY_STRING'], ‘client==0) ,  Si existe una cadena de consulta e incluye la clave de nombre client, se llama al método 10.- displayClient(), que devuelve el código JavaScript al navegador por dicha instrucción.

En el programa de JavaScript (Explicado en la 2ª parte) la instrucción  <script type=”text/javascript” src=”jpspan_server.php?client”></script>, tiene que concordar con la comparación de client del programa PHP.

La siguiente instrucción es :  11.-   require_once JPSPAN . ‘ErrorHandler.php’;,  sirve para gestionar errores y la veremos de forma detallada en otro post por tener una gran importancia en JPSpan.

Un Saludo de Telepieza.

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

Hombre/Mujer

Enviar

Sesion ID :

Nombre :

Empresa:

El Sexo Seleccionado es : Mujer

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

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>

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 :

La naturaleza de HTTP en las aplicaciones web, del punto de vista del internauta, se llevan a cabo por acciones (Eventos) y la aplicación web responde con otra página para enseñar dicha información o solicitar más información al usuario.

En una aplicación Web , cada acción del usuario, por ejemplo hacer un click en un botón de un formulario, genera la recarga de otra página web entera para actualizar la información solicitada y a la vez, muchas veces dicha información precisa de más datos que a su vez, crea frustración por tanta demora entre página y página.

Pero el mundo de internet está cambiando con la revolución de la WEB 2.0 y la técnica AJAX. Gracias a dicha técnica nos podemos acercar a apliaciones en entorno escritorio, sin la necesidad de recargar páginas enteras, sino partes de ella para visualizar los datos requeridos por el usuario.

Para poder trabajar con AJAX, necesitas dominar las tecnologías de  CSS, HTML, XML, JAVASCRIPT, DHTML y DOM, en el lado del Cliente (Navegador) y en el lado del servidor, puede ser cualquier lenguaje orientado a objetos como (JAVA, PHP, VISUAL, PERL).

La técnica que vamos a explicar con JPSpan, es un marco de trabajo Ajax,  para comunicar y transferir datos en formato (XML, JSON y PHP) con servidores programados en PHP con aplicaciones que en su otro extremo tengan  JAVASCRIPT.

JPSpan es simplemente un integrador de clases entre Javascript y PHP, para que se puedan comunicar entre ellos utilizando una clase PHP la técnica de reflexión.

Para poder conseguir los programas de JPSpan, hay que realizar lo siguiente :

1. Nos descargamos de OpenSource la versión JPSpan 0.4.3, dicha versión tiene un montón de ejemplos y uno de ellos el autocomplete2.html es digno de probar.
2. La versión que está colgada en OpenSource es muy antigua, para descargar la versión de explotación o programación tenemos que ir al blog de Valentin Agachi y recuperar JPSpan 2.0 con JSON, dicha versión no tiene ejemplos, pero es una de las más actualizadas, es del año 2.006 y soporta el navegador Opera 8.5+ en sus comunicaciones.
3. Una vez recuperado JPSpan, tenemos que leer el artículo de uno de los blog más importantes de habla inglesa sobre AJAX y es The weblog of Joshua Eichorn

En el blog de Joshua Eichorn nos explica en su post como realizar un pequeño programa en el lado del cliente con Javascript y otro en el lado del servidor con php y su interconexión entre ellos.

En los próximos artículos sobre JPSpan iremos dando más información sobre una de las herramientas más interesantes de comunicación AJAX que existe en el mundo del Open Source para servidores PHP.

Saludos de Mariano.