Más AJaX de IntraWeb

AJAX, acrónimo de Asynchronous JavaScript And XML (en inglés «JavaScript y XML asincrónicos»). Técnica de desarrollo web para crear aplicaciones interactivas mediante la combinación de tres tecnologías ya existentes:

HTML (o XHTML) y hojas de estilos en cascada (CSS) para presentar la información;
Document Object Model (DOM) y JavaScript, para interactuar dinámicamente con los datos, y XML y XSLT, para intercambiar y manipular datos de manera desincronizada con un servidor web (aunque las aplicaciones AJAX pueden usar otro tipo de tecnologías, incluyendo texto llano, para realizar esta labor).
Como el DHTML o LAMP, AJAX no constituye una tecnología en sí, sino que es un término que engloba a un grupo de éstas que trabajan conjuntamente.

Las aplicaciones AJAX usan navegadores web que soportan las tecnologías mencionadas más arriba. Entre estos se incluyen Mozilla, Firefox, Internet Explorer, Opera, Konqueror y Safari. (wiki)

Intraweb se ha convertido en una libreria muy popular para hacer programas web. Hace transparente al programador muchos pequeños inconvenientes de la programación web. Por ejemplo para hacer el primer programa IntraWeb, no se necesita escribir ningún código HTML, además nuestra aplicación correrá en varios usuarios simultaneos de forma independiente, es decir el propio sistema se hace cargo de la gestion de diferentes sesiones de usuario. Son muchas más las ayudas que nos da IntraWeb para programar. Sin embargo hace uso del esquema clasico/tradicional de programacion WEB: La mayoría de las acciones del usuario en el 'navegador' disparan una petición HTTP al servidor web. El servidor efectúa un proceso (recopila información, procesa números, textos...), y le devuelve una pagina HTLM al cliente. Este es un modelo adaptado del uso original de la Web como un medio hipertextual, pero no la hace necesariamente buena para las aplicaciones de software.

Cuando el usuario cambia un dato, este cambio puede implicar otros cambios en otros campos o en la información mostrada, pero este cambio se produce solo si refrescamos la página.

En nuestra aplicación quisieramos una respuesta más activa de la web, cuando el usuario está introduciendo datos, se produzcan cambios en la página web sin refrescarla de nuevo, que solo se refresque la parte que cambia.

Es aqui donde introducimos el concepto AJaX. El nucleo de un componente AJaX, consiste en un código JavaScript que se conecta con el servidor le hace peticiones, y maneja las respuestas. Somo estas respuestas, generalmente producen cambios en la interface del usuario, AJaX se asocia por extensión a librerias GUI en JavaScript que potencian el uso de ventanas y componentes más sofisticados que los tradicionales.

Nosotros queremos un objetivo sencillo: Solo queremos intercambiar información con el servidor que produzcan cambios sencillos en la interface del usuario ( cambios de valores en etiquetas y campos)

De momento nos centraremos en el motor de consulta haciendo comentario del script GpAjax.js, que sera nuestro primer acercamiento a esta técnica

//	 AJaX plugging  
var request;



function createRequest() {
  try {
	request = new XMLHttpRequest();
  } catch (trymicrosoft) {
	try {
	  request = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (othermicrosoft) {
	  try {
		request = new ActiveXObject("Microsoft.XMLHTTP");
	  } catch (failed) {
		request = false;
	  }
	}
  }
  if (!request)
	alert("Error initializing XMLHttpRequest!");
}

Debido a las típicas diferencias entre los navegadores de microsoft con respecto a todos los demás, se tiene que probar con diferentes formas de crear un objeto request. Lo importante de este trozo de código, es que estamos creando el objeto que va a interrogar al servidor.

Ahora viene la parte importante, tenemos que usar el objeto request para hacer una consulta a nuestro servidor IntraWeb. Pero IntraWeb tiene sus propias reglas a la hora de hacerle una consulta. Lo primero es que maneja la sesion de usuario automaticamente. La información de esta sesion de usuario va implicita en la consulta http , (en la propia URL y/o en los cookies). Asi que si no queremos complicarnos en manejar a más bajo nivel las consultas realizadas, dejaremos que sigan su camino normal como si fuera la accion de click en un boton.

Aquí tenemos que revisar como hace IntraWeb para que una acción de un usuario se procese en un form en concreto, refiendose a un objeto de este form, pasandole algún parametro o comando, que va a producir una respuesta activa (devolviendo una respuesta inmediata como la descarga de un fichero) o pasiva ( haciendo operaciones internas que produciran el cambio en la página cuando se vuelve a cargar. IW utiliza comandos 'POST' para intercambiar información del usuario al servidor. Envia datos en los campos asociados a este POST * para que el servidor los procese, y añade al menos 4 campos más que van a indicar el form, el objeto y la acción o comando que se envia al objeto.

IW_FormName : Nombre del objeto form que contiene el manejador de la respuesta.

IW_FormClass: Nombre de la clase del objeto form de respuesta

( esta última puede ser no necesaria en nuestro caso, pero la mantendremos por compatibilidad )

IW_Action : Nombre del objeto que maneja la respuesta.

IW_ActionParam : Parametros o comandos que se le pasan a ese objeto.

* Recordaremos que para realizar una llamada POST, los datos se pasan como una secuencia de caracteres que utilizan el siguiente formato:

NameField1="Value1"&NameField2="Value2"....

Es decir los campos se representan con un nombre, el signo =, y un valor entre comillas. Y separando diferentes campos, se utiliza el signo &.

Ahora tenemos los parametros para hacer la llamada AJaX:

var hostAjax;
var formName;
var formClassName;
var actionObject;

function getElemento(nombre,valor) {
  createRequest();
  // alert (sss);
  var cmd = "/ajax"+nombre+"=" + escape(valor);
  var url = hostAjax+"?"+cmd;
  request.open("POST", url, true);
  request.onreadystatechange = updatePage;
  var sss="IW_Action="+actionObject+
           "&IW_ActionParam="+cmd+
           "&IW_FormName="+formName+
           "&IW_FormClass="+formClassName;
  request.send(sss);
 }

            

Vemos que hacemos uso de una funcion updatePage. Esta funcion puede ser algo así como lo siguiente

function valor (s) {
   var sepa = s.split("=");
   elemen=sepa[0];
   va = sepa[1];
// processAjax (elemen,va);
}

            

function updatePage() {
  if (request.readyState == 4) 
  {            
   if (request.status == 200) 
     {
       var response = request.responseText.split("|");
       for (var i = 0; i < response.length; ++i) {
         valor (response[i]);
       }

     } else alert("status is " + request.status);
  }
}

Como el uso puede ser muy variado, es tu imaginación la que manda para dar respuestas del servidor a comandos AJaX, y procesar las respuestas en el navegador a base de JavaScript

En cuentro ejemplo, la respuesta obtenida del servidor sera una secuencia de campos en formato:

NameField1="Value1"|NameField2="Value2"....

En updatePage, dividimos los campos separados por | y los enviamos de uno a uno a una funcion abstracta valor que procesará la respuesta.

Un ejemplo puede ser el siguiente

function processAjax (elemen,s)
  {
   if (elemen) {
     var el=document.getElementById (elemen);
     if (el) {
        elemNodeName = el.nodeName;
        var os=elemNodeName.toLowerCase();
        if (os == "input"
              || os == "select"
              || os == "option"
              || os == "textarea") {
              el.value = s;
              } else {
              el.innerHTML = s;
              }

      }
    } 
  }

           

No es muy sofisticado pero es efectivo para muchos casos. La informacion HTML que genera nuestra aplicacion IntraWeb, suelen ser etiquetas HTML con parametros Name y/o ID, es decir cada etiqueta importante tiene su nombre y se puede ser referenciada en JavaScript.

Esto veremos que nos va a aportar cierto problema al dar la respuesta desde el servidor, ya que tenemos que hacerlo utilizando el nombre de los ID utilizados al renderizar la página.

Ahora solo queda disparar el evento que provoca la llamada AJaX, utilizando en evento onblur en los campos INPUT de nuestro form que provoquen AJaX.

  
 function getAjax (sender) {
  var el = document.getElementById(sender);
  if (el) {
    var valor ;
    if (el.value) {
     valor =el.value;} else
	 {valor ="";}
    return	 getElemento (sender,valor);
	}
  }

¿ Que pasa en el servidor ?

Básicamente, la respuesta a los comandos Ajax la podemos dar en el servercontroller o en el propio form que generó la página.

Hacerlo en el servercontroller, puede ser util en respuestas 'automaticas' que no dependan del usuario o del form que creó la página. Por ejemplo operaciones simples, servicio de ficheros, ciertas validaciones.

Hacerlo en el form, tiene la ventaja que se esta identificando la sesión adecuadamente y se puede interactuar con los objetos del form. Aunque aquí hay que hacer un aviso; Los cambios realizados en los controles del form, no se renderizan de forma normal, ya que no hay un 'refresco' completo de la página.

Articulos en castellano:

http://www.uberbin.net/archivos/internet/ajax-un-nuevo-acercamiento-a-aplicaciones-web.php

http://adaptivepath.com/publications/essays/archives/000385.php

En Ingles,

http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro2/

http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro3/

http://blogs.phparch.com/mt/?p=51

Links

http://blog.marcocantu.com/blog/ajax2.html

http://ajaxpatterns.org

http://weblogtoolscollection.com/archives/2005/03/21/some-ajax-links/

Plataformas Ajax

http://www.backbase.com

http://www.orbeon.com/

http://www.telerik.com/

http://bennolan.com/behaviour/

http://ajaxpatterns.org/Ajax_Frameworks

Examples

http://www.start.com/