Este es el primero de una serie de artículos que escribiré sobre la implementación de un mismo ejemplo de AJAX en las diferentes versiones del framework.
Cuando veamos el ejemplo de AJAX con .NET Framework 3.5, podremos observar que todo esta muy encapsulado y aunque es muy intuitivo y productivo nos aleja bastante de lo que ocurre "por debajo".
Esto tiene dos consecuencias negativas, que tenemos menos control y que los programadores noveles, que comienzan sus primeros pasos directamente en la ultima versión de la plataforma no comprenden como funcionan conjuntamente estas tecnologías. Precisamente este es el motivo que impulsa esta serie de artículos.
¡Comencemos ya!. En primer lugar veamos la interfaz de usuario y expliquemos que pretendemos hacer. Recuerdo que el ejemplo será el mismo en todos los artículos de la serie pero implementados de forma diferente.
La aplicación es muy simple. El usuario selecciona un nombre de empleado y se devuelve por AJAX la categoría profesional del mismo. Estos datos están guardados en el servidor en un archivo XML. En el servidor, se ha relentizado la devolución de los datos para simular una tarea muy larga a la hora de obtener los datos.
El campo de texto inferior solo sirve para comprobar como a pesar de que se esta realizando una petición al servidor, el usuario puede seguir interactuando con la IU escribiendo al tiempo que los datos vuelven desde el servidor.
Código Cliente
El código cliente consiste en crear un objeto de tipo XMLHTTPRequest, configurarlo y enviar los datos al servidor. También implementaremos una función para recoger los datos devueltos por el servidor y mostrar el resultado. Mencionar que este código, al ser solo JavaScript, es compatible con cualquier plataforma, ya sea PHP, Java o .NET como en este caso.
Esta es la función que envía los datos al servidor.
function EnviarPeticion(datoEnviado) {
//Crear transmisor
try {
transmisor = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (ex1) {
try {
transmisor = new ActiveXObject('Microsoft.XMLHTTP'); //Inferior a IE7.
}
catch (ex2) {
try {
transmisor = new XMLHttpRequest(); //IE7, Mozilla FireFox, etc.
}
catch (ex3) {
transmisor = false;
}
}
}
//Configurar el transmisor y enviar los datos.
if (transmisor != null) {
transmisor.onreadystatechange = RecogerRespuesta;
//Envio de datos con POST.
transmisor.open("POST", "AJAX_XMLHTTPRequest.aspx", true);
transmisor.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
transmisor.send("opcion=" + datoEnviado); // param1=valor¶m2=valor
}
}
En primer lugar creamos un objeto transmisor de tipo XMLHTTPRequest que nos permitirá comunicarnos con el servidor. Este objeto tiene diferentes implementaciones dependiendo del tipo de navegador cliente.
A continuación configuramos el transmisor para enviar los datos. La propiedad onreadystatechange determina cual será la función a la que se llamará automaticamente cuando los datos estén de vuelta desde el servidor.
La función open() abre la conexión con los siguientes parámetros, todos de tipo cadena menos un boleano:
- POST/GET: método de envío del protocolo HTTP.
- Página de servidor a la que se envía la petición. Es recomendable que esta página no contenga código HTML. Solo la declaración de la directiva @Page.
- True/False (bool): Realizar una llamada asíncrona (true) o una llamada no asíncrona (false).
- Usuario: Nombre de usuario. Este parámetro y el siguiente solo es necesario para páginas con autentificación de usuarios.
- Contraseña: Contraseña del usuario. Opcional.
La función setRequestHeader() solamente es necesario si estamos enviando la petición por el método POST. Se encarga de especificar los atributos necesarios en la cabecera de la petición HTTP.
La función send() envía los datos al servidor en formato cadena. La cadena formada debe tener la forma param1=valor¶m2=valor¶m3=valor etc.
Con esto hemos realizado una llamada asíncrona hacia el servidor. Allí, lo veremos a continuación, se recogerá los datos enviados por el cliente, se manipularan debidamente y de devolverán al cliente. Concretamente a la función cliente especificada en la propiedad onreadystatechange.
function RecogerRespuesta() {
if (transmisor.readyState == 4) // 4 = completado
{
if (transmisor.status == 200) // 200 = OK
{
var datosReturn = transmisor.responseXML.getElementsByTagName("categoria");
var resp = document.getElementById("txRespuesta");
resp.innerText = datosReturn[0].childNodes[0].nodeValue;
}
else //En caso de error
{
alert("Error: " + transmisor.status + " / " + transmisor.statusText);
}
}
}
Primero comprobamos que la petición a finalizado con la propiedad readyState y a continuación comprobamos que no se han producido errores con la propiedad status.
Con la propiedad responseXML recogemos los datos como un documento XML dado que así han sido enviados desde el servidor. También pueden ser recogidos como una cadena con la propiedad responseText en el caso de que solo se enviará desde el servidor una cadena.
Accedemos al nodo que nos interesa del documento XML con la función getElementByTagName() y utilizando el DOM lo mostramos por pantalla.
Código Servidor
El código cliente consiste básicamente en recoger los datos con el objeto Request, leer el archivo XML y buscar en el dato requerido. Construir luego un XML con el dato requerido y devolverlo al cliente con el método Response.Write().
Este es un ejemplo del código que se ejecutará en el evento Load() de la página.
//Recogemos el dato enviado desde el cliente.
string datoRecibido = Request.Params["opcion"];
// Se devuelve como XML.
Response.ContentType = "text/xml";
// Evitar que haya caché.
Response.AppendHeader("cache-control", "no-cache");
Response.Expires = -1;
//Antes de enviar la petición simulamos una tarea larga.
System.Threading.Thread.Sleep(5000);
//Enviamos y cerramos la respuesta.
Response.Write(ManejarDatos.ObtenerRespuesta(datoRecibido, rutaDatos));
Response.End();
No hay mucho que comentar. Indicar que ManejarDatos es una clase con métodos estáticos que encapsula toda la funcionalidad para recuperar el dato requerido desde el XML en el servidor y con este dato construir el XML que será devuelto al cliente.
Código de descarga
El código completo mencionado en este artículo se encuentra en la carpeta AJAX_NET_1.x del siquiente enlace. Para probar la aplicación ejecutar la página index.htm de la carpeta mencionada.
AJAX_ASP.NET.rar (15,45 kb)