Enviando y recibiendo lo necesario de un Servidor Web a través de XML y XSL

Por Carlos Anampa

 Descargar ejemplos de este artículo (17 KB).

Contenido

 Introducción
 Solicitando lo necesario a un Servidor Web
 Construyendo un XSL
 Ordenación a través de XSL
 Enviando lo necesario a un Servidor Web
 Conclusión

Introducción

Es muy necesario dar a nuestro cliente Web ciertas particularidades para que pueda trabajar con datos de forma más transparente y que ocasione menos dificultades al usuario final de nuestra aplicación. Esas dificultades se reflejan entre idas y vueltas al Servidor Web, esto a su vez ocasiona que se envíe y reciba información del estado de cada control dentro del Formulario Web (Web Form).

La idea principal de este artículo parte de “Solo enviar y recibir lo necesario desde un Servidor Web”, y algo que un servidor Web entiende sin ningún problema es XML y ni hablar de .NET, que expone diferentes formas de trabajar con XML. Pero ante esta idea que suena grandiosa nos tropezamos con la realidad de que tenemos un cliente que nos ayuda poco para tener Aplicaciones Web que corran de esta forma.

Tanto con XML como con XSL trabajado desde un cliente se pueden hacer muchas cosas interesantes, sin necesidad de tener mucho código en el cliente. Para los ejemplos de este artículo empleamos Visual Studio 2003, SQL Server 2000, IIS y SMTP y, claro, MSXML.

Solicitando lo necesario a un Servidor Web

Para esto necesitamos a nuestro fiel amigo Javascript (aunque a veces no lo sea), para acceder a un ActiveX llamando MSXML2.DOMDocument; con ese objeto podemos traer desde el Servidor Web algún contenido en XML (Ver Figura 1):

Figura 1. Volver al texto.

XMLData es el nombre de nuestra variable, que hace uso del método Load, encargado de traer con contenido XML desde la página getData.aspx. Pasa además ciertos parámetros, que luego podrían ser utilizados para determinados propósitos en el Servidor Web. En este ejemplo mostramos código referenciado para transformaciones y XSL; entenderemos que significa esto más adelante.

En el Servidor Web debemos recuperar esa petición y hacer las cosas que deseemos (Ver Figura 2):

Figura 2. Volver al texto.

Para los puristas ésta es la forma más arcaica de conectarse a una Base de Datos, pero para la comprensión del ejemplo, este código sirve.

Construyendo un XSL

XSL (Extensible Stylesheet Language) es la alternativa más convincente para cambiar un formato de presentación; también se puede usar de otros modos como por ejemplo: reorganizar un XML o construir archivos especializados tales como Excel, PDF, etc. a través de Formating Objects (FO). Lo interesante del XSL es que podemos utilizarlo también en el cliente para hacer las cosas que queramos en cuanto a presentación y/o estructura de los datos. Las siguientes líneas muestran un archivo XSL sencillo:

<? xml version =” 1.0” encoding =”UTF- 8”?> 
< xsl:stylesheet version =” 1.0” xmlns : xsl =”http://www.w3.org/1999/XSL/Transform” > 
   < xsl:template match =”/”> 
                < div id =”tabData” style =”overflow:auto” align =”center”> 
                    < table border =” 1” width =”400px”> 
                               < tr > 
                                  <tdwidth=”50”><ahref=”javascript:sortBy(‘ID’)”>ID</a></td> 
                                  <tdwidth=”300”><a   href=”javascript:sortBy(‘Nombre’)”>Nombre</a></td> 
                                  <tdwidth=”50”><a   href=”javascript:sortBy(‘Precio’)”>Precio</a></td> 
                               </ tr > 
                               < xsl:call-template name =”Table”/> 
                   </ table > 
                </ div > 
   </ xsl:template > 
   < xsl:template name =”Table”> 
                < xsl:for-each select =”NewDataSet/Categories”> 
                   < tr > 
                               < td >< xsl:value-of select =”ProductID” /></ td > 
                               < td >< xsl:value-of select =”ProductName” /></ td > 
                               < td >< xsl:value-of select =”UnitPrice” /></ td > 
                   </ tr > 
                </ xsl:for-each > 
   </ xsl:template > 
</xsl:stylesheet> 

XSL define ciertas sentencias que nos facilitan las cosas al momento de programar. El código citado, unido a un XML, podría formar cierto contenido luego de aplicarse una transformación; para el ejemplo, el resultado de esta unión será un fragmento HTML que luego se visualizará en nuestra página. En la Figura 1 se muestra cómo realizar esa transformación basado en un XSL; con ello ya tenemos un resultado en nuestro cliente Web, y ya logramos visualizar la data simulando una pequeña grilla.

XMLData.load("getData.aspx?CategoryID="+valor); 
            sConvert = XMLData.transformNode(XSLData); 
            window.gridXSL.innerHTML = sConvert;

Ordenación a través de XSL

Como ya comentamos, el XSL nos ofrece muchas ventajas para manipular los datos y su estructura, si se quisiere; en este caso veremos cómo hacer ordenamientos en un XSL y cómo hacer que esos cambios se reflejen en la presentación de los datos en nuestro cliente Web.

<? xml version ="1.0" encoding ="UTF-8"?> 
< xsl:stylesheet version ="1.0" xmlns : xsl ="http://www.w3.org/1999/XSL/Transform" xmlns : fo 
="http://www.w3.org/1999/XSL/Format"> 
       < xsl:template match ="/"> 
             < NewDataSet > 
                    < xsl:call-template name ="Table"/> 
             </ NewDataSet > 
       </ xsl:template > 
       < xsl:template name ="Table"> 
             < xsl:for-each select ="NewDataSet/Categories"> 
                    < xsl:sort data-type ="number" order ="ascending" select ="ProductID"/> 
                    < Categories > 
                           < ProductID > 
                                  < xsl:value-of select ="ProductID"/> 
                           </ ProductID > 
                           < ProductName > 
                                  < xsl:value-of select ="ProductName"/> 
                           </ ProductName > 
                           < UnitPrice > 
                                  < xsl:value-of select ="UnitPrice"/> 
                           </ UnitPrice > 
                    </ Categories > 
             </ xsl:for-each > 
       </ xsl:template > 
</ xsl:stylesheet > 

Aplicando xsl:sort se puede hacer ordenamiento; en este caso se genera nuevamente el XML partiendo del nuevo orden seleccionado.

Cabe resaltar que cuando trabajamos una aplicación que no sea como un cliente Web, podemos obviar la sentencia xsl:for-each dependiendo de cual sea el caso en que la apliquemos; esto es debido a que en esta ocasión estamos empleando la versión 1.0 de XSL; es decir, esta versión es soportada por JavaScript, a diferencia de cuando trabajamos en un entorno de .NET Framework, en el cual se usa preferiblemente la versión 2.0 de XSL.

Para utilizar el ordenamiento aplicado debemos ordenar o crear un nuevo documento XML con el orden indicado. El código siguiente hace el llamado al XSL a través de Javascript (Ver Figura 3):

Figura 3. Volver al texto.

Enviando lo necesario a un Servidor Web

Una vez que ya tenemos las cosas necesarias en el Cliente, podemos hacer el envío de datos al Servidor Web (solo el “envío de datos” y no el envío de toda la página, porque solamente los datos a través del ActiveX MSXML2.XMLHTTP serán enviados Servidor). La forma de hacer esto es muy sencilla y es la que se muestra en la Figura 4):

Figura 4. Volver al texto.

El contenido es enviado a través de poster.send(window.gridXSL.innetHTML); si bien es cierto que es HTML, éste respeta una buena estructura XML que es lo que acepta este método.

Del lado del Servidor es necesario recuperar estos datos enviados y para ello ultimamos un objeto StreamReader para obtener la información enviada:

      StreamReader read = new StreamReader(Request.InputStream); 
      string sBody = read.ReadToEnd();

Mediante el código anterior logramos obtener los datos que vienen desde el Cliente; ahora veamos una de las utilidades de emplear esta técnica mediante XSL: enviaremos un mensaje de correo electrónico a la persona que deseemos como si fuese un reporte que fue solicitado en determinado orden o bajo determinada presentación. A continuación se muestra el listado de código:

private void Page_Load(object sender, System.EventArgs e) 
{ 
      StreamReader read = new StreamReader(Request.InputStream); 
      string sBody = read.ReadToEnd(); 
      MailMessage msg = new MailMessage(); 
      msg.From = "carlosanampa@speedy.com.pe"; 
      msg.To = "carlosanampa@yahoo.com"; 
      msg.Subject = "HTML Generado"; 
      msg.BodyFormat = MailFormat.Html; 
      msg.Body = sBody; 
      SmtpMail.SmtpServer = "smtp.speedy.com.pe"; 
      SmtpMail.Send(msg);

Conclusión

Tanto XML como XSL pueden ayudarnos a construir aplicaciones más ricas del lado del cliente pero, todo exceso no es bueno; dependiendo de cuál fuese el caso en que desarrollamos esta técnica es una alternativa para el desarrollo de nuestras aplicaciones Web, en función de la arquitectura por la que optemos. Existen más formas de manipular XSL tales como, por ejemplo, controlar el paso de los parámetros o construir una grilla más compleja, sólo del lado del cliente.

Carlos Anampa es Técnico en Computación e Informática y estudiante de la Ingeniería de Sistemas de la Universidad Privada del Norte, Trujillo. Trabaja como Desarrollador desde 1999 y como Director de Proyectos, estando dedicado al desarrollo de aplicaciones ASP .net como programador y consultor en diversas compañias privadas en Perú. Es Docente de Especialización en la UPN y ex- Docente en el Insituto Tecnológico del Norte. Cuenta con la certificación MCSD sobre .net gracias al programa de becas de Microsoft Perú.