Telepieza´s Weblog

Soy una persona que lee todos los libros informáticos que existen en el mercado, me gusta documentarme, y analizar otros trabajos informáticos que son punteros en el mundo de Internet.

Llevo algunos post escribiendo sobre la técnologia Ajax y buscando información en  libros sobre CSS, DOM, JavaScript, XML, DHTML y AJAX.

 Algunos libros que he leido son :  CSS práctico, Profesional JavaScript, Manual de Referencias HTML, Profesional de AJAX, AJAX y los mejores trucos, Eclipse, Desarrollo de PHP y MySql, CSS Hojas de estilo en cascada para el diseño Web, MySql, XHTML   y muchos más que tengo en mi biblioteca personal.

Todos ellos te explican la sintaxis y los metodos de programación de cada uno de los lenguajes, pero sus ejemplos son de páginas web realizadas por otros  , y no por los que escriben los libros.

 Cuando empiezo a leer sobre AJAX en todos estos libros, mi mente se va al pasado a los años 90 cuando en la WEB 1.0 se programaba a pelo con tecnología JavaScript y HTML.

Los navegadores IE , Mozilla y Safary son distintos en la forma de tratar el  modelo de Caja o Box (Zona de contenido de texto o imagen), cuando queremos representar una página muy elaborada en nuestra web con etiquetas div.

 Un modelo de Caja o Zona de contenido en una página web, contiene a su alrededor áreas de borde, relleno y margen que hacen imperfecto nuestra página web según se vea con uno u otro navegador o con el mismo navegador pero con versiones diferentes.

Cuando leemos los libros ninguno te indica que la programación para entornos AJAX tiene que ser limpia, eso significa que en una página web sólo tiene que tener código html y nada de JavaScript o CSS. El código JavaScript y las Hojas de Estilo (CSS) tienen que estar en ficheros diferentes al código HTML.

Lee el resto de esta entrada »

Vamos a realizar un pequeño resumen en la 5ª parte de lo aprendido sobre JPSpan y PHP antes de seguir aprendiendo más cosas sobre la tecnología AJAX – JPSpan – PHP.

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

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).

Lee el resto de esta entrada »

Nos vamos a centrar en la 4ª parte en estudiar el método  displayClient(), por ser el encargado de generar el esquema de código JavaScript necesario para la comunicación.

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

Lee el resto de esta entrada »

En la tercera parte de Ajax con JPSpan para PHP, vamos a explicar el funcionamiento del programa jpspan_server.php del servidor. (Abajo les dejo el código de dicho programa).

---

<?php
/**
* This is a remote script to call from Javascript
*/
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());

  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.

Lee el resto de esta entrada »

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

Hombre/Mujer

Mujer Hombre

Enviar

Sesion ID :

Nombre :

Empresa:

El Sexo Seleccionado es : 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:

Lee el resto de esta entrada »

Uno de los grandes problemas del protocolo HTTP es que los servidores no pueden conectar con el Cliente (Navegador), si éste no ha pedido una conversación o conexión previa con el servidor de información de Internet.

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

Lee el resto de esta entrada »