XMLHttpRequest

1 - Articulo
2 - Ejemplo
3 - Resumen


ARTICULO

XMLHttpRequest- ActiveXObject

XMLHttpRequest-ActiveXObject es una tecnología de traspaso de datos muy poco comentada pero muy potente y, no requiere ningún tipo de objeto que debe instalarse en las aplicaciones para funcionar, como es el caso de Ajax y AjaxPro. Existe una estrecha relación entre este tipo de transmisión de información y javascript (XMLHttpRequest y ActiveXObject pertenece a la biblioteca de javascript window, es decir, window.XMLHttpRequest – window.ActiveXObject.

Cuando se realiza uno de estos tipos de solicitud, se invoca una llamada a una URL específica que es retornada y escrita en una zona definida, generalmente en un DIV de HTML u otro tipo de capa, utilizando el método de javascript “innerHTML” (Este método lo veremos en todos los tipos de objetos que comentaremos).

- Si estamos trabajando con navegadores como IE y dependiendo de la versión del navegador que estemos utlizando, crearemos un objeto con ActiveXObject.

- En el caso de que estemos trabajando con otro tipo de navegador, como Mozilla, Safari, etc., crearemos un objeto con XMLHTTRequest

Este tipo de transacciones permite realizar una llamada asincronica a cualquier tipo de URL, pudiende ser, una imagen, una página estática (html) o páginas dinámicas que se ejecutan en un servidor y que retornan un resultado específico.
El resultado de la llamada al servidor será capturada por el cliente y desplegada en la zona definida para ello.

Ventajas Observadas

Podemos utilizar este tipo de metodología para realizar llamadas a páginas dinámicas que entregarán un resultado en respuesta a parámetros entregados, claro esta que también responde muy bien para desplegar imágenes o páginas estáticas. Destaco la primera opción ya que como persona que participa en proyectos me interesaría definir una lógica de transformación de datos en el servidor y enviar como resultado el HTML creado para ser desplegado en el cliente, o desplegar páginas que tendrán un comportamiento funcional en una zona específica.

Desventajas Observadas.

Con esta metodología, no queda registrado en el history del navegador, las llamadas que se han realizado, por lo cual solo se observará un history en la página principal que se despliega al inicio de la llamada. Este problema se observará en las otras metodologías, aunque en Ajax existe un control que se ha desarrollado para apalear el problema.

Solución de desventajas.

En navegadores como Mozilla, es posible escribir el history interviniendo el método hash de window.location, utilizando javascript, esto funciona muy bien para navegadores como Mozilla, pero para navegadores con IE, según lo que he averiguado, debe implementarse en un iframe la página. Este problema lo tendremos también con Ajax y AjaxPro, aunque como mencioné en Ajax existe un objeto que propone apalear el problema.

Bueno, no puedo cerrar esta fase sin hacerles un ejemplo simple de este tema. En las siguientes líneas se mostrará un ejemplo de este tipo de llamadas para desplegar, según un dato entregado una imagen en específico. Como es un ejemplo simple no mostraré como realizar acciones sobre Bases de Datos, pero al ver la página aspx podrán, intuitivamente, darse cuenta de que es aquí en donde deben experimentar.

volver

EJEMPLO

Antes que todo, hablaremos sobre el ejemplo, en el cual se observa que utilizando una URL, con esto desplegaremos una página en una capa, en este caso un DIV de HTML que se actualizará con javascript, para ello primero deberemos definir las funciones de java que identificarán que objeto debe crearse y luego la lógica de llamada y de despliegue del resultado. Luego construiremos una página HTML que realizará la llamada a nuestra página Web, por ultimo construiremos una página Web en aspx que retornará, según un parámetro entregado en la llamada, un texto de respuesta que será cargado en un label desde el método que atiende el evento load de la página. Yo pongo el ejemplo, ustedes los textos y si lo prefieren las imágenes.

1. Crear las funciones en javascript, por mi parte crearé un archivo a parte que llamaré asincronica.js que debe contener el siguiente código:

Función de creación de objeto.

function funObjetoCrear(oPagina){
// verificamos que tipo de navegador se está utilizando
if (window.XMLHttpRequest) {
// en el caso de que sea Mozilla u otro distino a IE
oPagina = new XMLHttpRequest()
} else {
/*
antes de crear el objeto en IE, en el caso de que
no se cumpla la primera opción, se debe verificar
que los controles activex existen, en caso contrario
no podremos crear el objeto que lleva a transacción
*/
if (!window.ActiveXObject){
return false;
}else{
/*
para las ultimas versiones de IE se crea un
objeto ActiveXObject("Msxml2.XMLHTTP")
*/
try { oPagina = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e){
/*
si es una versión anterior de IE se crea un
objeto ActiveXObject("Microsoft.XMLHTTP")
*/
try{ oPagina = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e){}
}
}
}
return oPagina;
}

Función de despliegue de resultado.

/*
dependiendo de ciertas condiciones que deben cumplirse se realizar el despliegue de información en la capa definida para ello utilizando el método innerHTML, que dijimos que utlizaríamos en estas demostraciones
*/
function funDivCargar(oPagina, strContenedor){
if (oPagina.readyState == 4 &&
(oPagina.status==200 window.location.href.indexOf("http")==-1)){
document.getElementById(strContenedor).innerHTML = oPagina.responseText
}
}

Función que llama a la creación del objeto y al despliegue.

function funLlamadaEjecutar(strUrl, strContenedor){
var oPagina = false;

oPagina = funObjetoCrear(oPagina);

oPagina.onreadystatechange =
function(){ funDivCargar(oPagina, strContenedor); }

oPagina.open('GET', strUrl, true);
oPagina.send(null);
}

2. Creación de la página que realizará la llamada y del despliegue.

Antes de definir en el body de la página, el html que utilizaremos, tendremos que agregar dentro del cuerpo del head o donde ustedes quieran, la llamada al archivo .js creado.
Una vez realizada esta acción se presenta el código html que utilizaremos.

<body>
<div id="mnuLink">
<a href="javascript:funLlamadaEjecutar('Default.aspx?id=1', 'divContenido');"> Primera opción</a>
<a href="javascript:funLlamadaEjecutar('Default.aspx?id=2', 'divContenido');"> Segunda opción</a>
</div>

<div id="divContenido">
</div>

Si se observa, es en el segundo DIV donde se debe desplegar la página que llamaremos.

3. Por ultimo crearemos la página que retornará los textos o las imágenes (según definieran), esta página se llamará, para mi ejemplo la muy conocida y bien ponderada default.aspx, en donde agregaremos un control label de aspx, Para luego escribir las siguientes líneas en el método que atiende el evento load de la aplicación:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Try
If Not Request("id") Is Nothing Then
Dim opc As String = Request("id").ToString()

Select Case opc
Case "1"
Me.Label1.Text = "Despliegue de la primera opción"
Case "2"
Me.Label1.Text = "Despliegue de la secunda opción"
End Select

End If

Catch ex As Exception
Response.Write(ex.Message)
End Try

End Sub

Ahora si ejecutamos la aplicación veremos que los cambios se realizan sin problemas.

volver

RESUMEN

Este tipo de operación, no requiere ninguna dll adicional o configuración en el archivo web.config para operar, solo se necesita que el navegador tenga definido y habilitados los objetos que se necesitan para operar.

Como consejo, este tipo de operaciones se puede realizar con llamadas a páginas que necesitan desplegar un resultado, estos despliegues se pueden hacer con archivos aspx, como en el ejemplo, archivos xslt, archivos estáticos o cualquier otra página, estática o dinámica que se desee desplegar.

volver