Studio Press

Just another Blogger Blog

ad

Ajax desde el principio.

Introducción.

Hoy las aplicaciones mas robustas de la web emplean en sus desarrollos Ajax en asp net 2.0, uno de ellos es Google .

Si no estas enterado de este tema, debes hacerlo lo mas pronto posible antes de quedarte sin trabajo o que otros te ganen la inovación en tu empresa.

Piensa en esto como usuario que al seleccionar un combo tengas que ver que la página se recarga totalmente, que molesto ver un pantalla blanca que no sabes si se pasmo, esta lenta la red o ya la consulta se cayó, entonces imagina, bueno no lo imagines ve algunas aplicaciones en la web que recargan solo segmentos de la pagina y ves un flujo mas limpio.

Una de las batallas en punto net es la parte de la recarga y ni modo tienes que manejar muy bien el Page_PreRenderComplete y el Page.IsPostBack y te platico la peor parte, si tienes un Datasource ligado directamente a los controles , si que sufrirás, pues resulta que en un grid cada vez que cambias la paginación del grid vuelve a realizar la consulta y todo se recarga por un evento que debiera de ser ligero, pero no lo es.

Pero estas cosas no son tu culpa pues los controles están mal diseñados desde el inicio y haces trucos para hacerlo funcionar lo mas limpio posible.

¡Para de sufrir!, te digo que hay una alternativa AJAX, sin embargo debes tomar en cuenta que debes empezar con este concepto y te ahorrarás mucho tiempo, generando código más legible, rápido y funcional, una vez que entiendas como funciona el principio básico, lo demás será pan comido.

Piensa como usuario y como te gustaría que funcionen las cosas, si actualizas contenidos robustos, vendes en línea esto es para ti, dale una experiencia diferente a tu usuario, no te quedes fuera, piensa que los cambios a la aplicación serán mas rápidos separando ciertas estructuras, quedando un código limpio y fácil de seguir, también la cantidad de trafico entre cliente servidor disminuirá.

Pero no todo es bello, piensa que pasará cuando des back en el navegador, puede funcionar erraticamente y si deseas que tu contenidos sean considerados en las búsquedas, pues como están ocultas hasta que haya un usuario que genere un evento, ese contenido NO existirá y ahí no fue negocio, por otro lado los servidores de consulta son sencibles a inyección de código, por ello hay que tener cuidado y ser cauto en donde emplearlo y tomar las medidas correspondientes, no puedes emplearlo indiscriminadamente.

Lo Básico.


Comencemos con el significado del acrónimo (Asynchronous Javascript and XML), el término "asíncrono" - en otras palabras, ¡Vamos a hacer un viaje de ida y vuelta al servidor, sin necesidad de ir allí!.

Es entonces el empleo de un engine en tu aplicación, un concepto empleando ciertas técnicas mas que un componente o tecnología nueva, porque no hay nada nuevo en esto, recordemos como le hacemos para tener cierta comunicación desde el cliente con el servidor empleando iframes ocultos guardando información en formas o tags y recuperandola en el cliente actualizando los contenidos de los divs o cualquier forma predispuesta para tal efecto.

Explicado lo anterior como contexto, hay muchas formas de implementar este engine en nuestra aplicación mediante Frameworks prediseñados por fabricantes que lo ponen libre o con costo de licencias. En este capitulo me referiré a la creación inicial que necesitaremos para desarrollar. Se que estas tentado a emplear el ajax extensions de Microsoft, te digo Alto, no necesariamente es lo mejor, pues hay varios puntos de instalación y de uso que no te van a satisfacer y generarás código adicional.

Lo primero que debemos saber es el empleo de Javascript en el cliente y el lenguaje que mejor te parezca en el server, debes saber que emplearas ciertas reglas del protocolo de XML y pensar en una forma diferente como estructuras tus páginas para emplear este concepto.

Código Básico.

Primero.

Lo primero que debes saber es que tienes que crear un objeto del tipo XMLHTTP que se puede usar desde el 2001, para ello es necesario conocer que versión esta existe en el navegador del cliente, existen varias, MSXML2.XMLHTTP.5.0, MSXML2.XMLHTTP.4.0, MSXML2.XMLHTTP.3.0, MSXML2.XMLHTTP y Microsoft.XMLHTTP.
A partir de esto debes crear el objeto y regresar como resultado el objeto, en una función , algo si como esto.

function createXMLHTTP()
{
var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i=0; i <>
{try{
var oRequest = new ActiveXObject(arrSignatures[i]);
return oRequest;} catch (oError) { }
} throw new Error("MSXML No esta instalado en su sistema");
}

Segundo.

Crear la función donde llamarás a este objeto, debes valorar si el objeto existe y destruir el anterior, una vez hecho esto debes abrir el objeto con la llamada de información al server.

var X=null;
if(X && X.readyState!=0) { X.abort(); }//Aborta el objeto si es que ya esta inicializado
X=createXMLHTTP();
X.open("GET","db.aspx?Variable1=1",false);

Tercero.

Hay tres parámetros importantes en la funcion open().

Primero es GET solo para regresar información, en cambio si lo que se desea es actualizar, agregar o borrar información lo que debe usar es POST.

Segundo petición de la página y la consulta en si.

Tercero si es síncrono, false, de otra manera habrá una espera hasta recibir la respuesta, es decir podemos seguir trabajando en otra cosa en lo que llega la repuesta.

hay que validar el estado que guarda el objeto, para saber que hacer en cada caso y tomar la mejor decisión:

Los cuatro estados.

0 No inicializado, el objeto ha sido creado pero el método Open no ha sido llamado.
1 Cargando, El método Open ha sido llamado pero la respuesta no ha llagado aun.
2 Cargado, la respuesta ha sido enviada,
3 Interactivo, parte de la respuesta ha sido recibida, no termina el proceso.
4 Completado, todos los datos han sido enviados y la conexion ha sido cerrada.

Cuarto

Estos estados son importantes pues sabemos como esta la conexion y valorar si es pertinente llenar el tag o función con la información que ha llegado, el contenido lo podemos tomar de la propiedad ResponseText en forma de string.

X.onreadystatechange=function()
{ if(X.readyState==4&&X.responseText)
{ eval(d).innerHTML = X.responseText;}};

Quinto.

Sin embargo es posible que llegue un error del estado de la página consultada como el 404 , para lo cual debemos evaluar el estado de la página que nos regresa el resultado.

200 Ok, Sin error cualquier otro valor no traerá los resultados deseados.

if(X.status==200)


Sexto.

Para el último paso, llamas al método send(), este método acepta solo un argumento, el cual puede ser un string, no puedes omitir el argumento, debes pasarle un null como en los casos que utilices GET .

X.send(null);

Así termina la Teoría básica de como funciona el Ajax Engine para asp net ajax con net c#, para ver el ejemplo completo verifica el artículo anterior.



0 comentarios:

ad

Consejos y ejemplos practicos como aplicar ajax

Mas info...

Ingresa tu correo:

Atraves de FeedBurner