Llama web services .asmx con jQuery

Me enfocaré principalmente en llamar estos servicios web desde sistemas que aún manejan el Framework 2.0 de .NET. Esto es esencial que lo notes por que en algunos otros tutoriales en línea te encontrarás muchas discrepancias sobre qué es lo que debes y que es lo que no debes colocar en los llamados de jQuery. Te guiaré paso por paso y te diré cónde están las discrepancias que puedes encontar.

Antecedentes

1. Estamos utilizando un proyecto de ASP.NET con el Framework 2.0
2. La página de trabajo es Default.aspx
3. El ejemplo es un sencillo Hola Mundo que incluye código HTML

Número 1 : incluye jQuery

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

Número 2 : utilizamos jQuery.ajax

Dentro de nuestra página Default.aspx incluiremos el siguiente código de jQuery:

// ejecutar al terminar de cargar la página
jQuery(document).ready(function() {
    jQuery.ajax({
        type: 'POST',
        url: 'http://www.tudominio.com/services.asmx/HolaMundo',
        data: { 's': 'Juan' },
        cache: false,
        dataType: 'html',
        beforeSend: function(data) {
            loadContent('#myDiv', '<p class="ajax-loader">Descargando...</p>')
        },
        success: function(data) {
            loadContent('#myDiv', htmlDecode(jQuery(data).get(0).firstChild))
        },
        error: function(data) {
            loadContent('#myDiv', '<p>O.o, error al descargar.</p>');
        }
    })
});

Detalle:

Línea 5: Esta es la dirección de tu Web Service (aún no lo programamos). Nota que después de services.asmx tenemos /HolaMundo. Este es el nombre de nuestro método dentro de nuestra clase que maneja al Web Service.

Línea 6: Nuestro método HolaMundo recibe un parámetro de nombre ‘s’ y lo que le estamos enviando de valor es ‘Juan’. Si requieres enviar más parámetros no olvides el formato: parejas nombre : valor separadas por comas (,).

Línea 10: Esto le da un toque muy personal. Antes de que comience la llamada AJAX le estamos diciendo a la función que ejecute el método loadContent.

Línea 13: Si el resultado de la llamada es exitoso entonces ejecutará el método loadContent. OJO: Debes observar qué se está enviando como parámetro en esta ocasión.

Línea 16: Si el resultado no es exitoso entonces enviamos al método loadContent un mensaje de error.

DISCREPANCIAS EN OTROS TUTORIALES (PRUEBENSE BAJO SU PROPIO RIESGO)

Ok, antes de continuar te comento que podrás encontrar las siguientes discrepancias en la red:

1. type: ‘POST’ – En efecto, para que tu Web Service de ASP.NET te pueda contestar es necesario que siempre le hagas peticiones de tipo POST aunque sólo quieras recibir consultas a datos.
2. sintaxis de los parámetros – Esta si es un conflicto. Yo aquí te muestro la siguiente sintaxis: data: { ‘parametroINT’ : 3 , ‘parametroSTRING’ : ‘hola’ } Esta sintaxis en lo particular me ha funcionado perfectamente para el caso en estudio: proyecto ASP.NET con Framework 2.0.
3. dataType: ‘html’ – Así es. Lo que nuestro Web Service de ASP.NET nos va a entregar de vuelta es texto en formato HTML así que yo les recomiendo que coloquen esta configuración a fin de evitarnos dolores de cabeza al momento del ‘debug’.
4. content-type: – Evitalo. jQuery.ajax será el responsable de entregar este pedazo de información por tí. Sólo preocupate de colocar los demás parámetros que yo te he mostrado. A través de sangre propia me dí cuenta que sólo colocar este parámetro evitaba que mi Web Service contestara correctamete a las peticiones que recibían más de un parámetro.

Número 4: Agregamos el método loadContent

Justo donde termina el Java Script anterior vamos a agregar la siguiente función:

function loadPostContent(id, data) {
    jQuery(id).html(data)
}

Este método recibe un id y datos. Con id nos referimos precisamente a eso: al ID del elemento HTML que recibirá nuestro contenido. En la función previa notarás que todos los casos en dónde se llama al método loadContent se hace enviando diferentes datos pero siempre el ID = #myDiv

Número 5: jQuery(data).get(0).firstChild ?

El resultado satisfactorio de nuestra ejecución será algo parecido a lo siguiente:

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://www.tudominio.com/">&lt;p&gt;Hola Juan&lt;/p&gt;</string>

Lo que debemos de hacer es navegar este pedazo de código XML y obtener el texto que nos importa. Para ello utilizamos la función jQuery(data).get(0).firstChild que en resúmen le indica a jQuery que del objeto data obtenga el primer nodo y nos entregue el contenido interno del mismo (grrr).

Dicho contenido si te das cuenta es HTML codificado. Esto ocurre para que pueda viajar cómodamente dentro del XML. ¿Te imaginas que no viniera codificado? No sabríamos dónde termina el XML de la respuesta del WS y dónde comienza el HTML. Esto nos lleva al último método java script que vamos a utilizar.

Número 6: htmlDecode

el contenido del xml y hay que convertirlo en HTML válido y para ello utilizamos la siguiente función.

function htmlDecode(text) {
    return jQuery('<div/>').html(text).text();
}

Número 7: El html de tu página

No puede ser más sencillo que esto:

<div id="myDiv"></div>

He aquí el DIV en dónde aparecerá la información que se descargará dinámicamente a través de jQuery.

Número 8: Programamos el WebService

[WebService(Namespace = "http://www.tudominio.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class services : System.Web.Services.WebService
{
    [WebMethod]
    public string HolaMundo(string s)
    {
        return "<p><strong>Hola: " + s + "</strong></p>";
    }
}

Recuerda que nuestro método se llamaba HolaMundo y que recibía una variable de nombre s.

Número 9: Ajustamos el Web.Config

Finalmente debemos ajustar el Web.Config de nuestra aplicación para que todo esto funcione de maravilla.

<system.web>
    <webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
    </webServices>

Debajo de <system.web> deberás colocar las entradas que indican que tu aplicación tiene que administrar Web Services.

Número 10: Corre y prueba

DISCREPANCIA FINAL: Algunos sitios indican que para que los servicios web del Framework 2.0 puedan ser llamados desde un java script es necesario que instales las librerías del Ajax Control Toolkit 1.0. Esto NO es necesario. ¿Cómo lo se? Bueno, este sitio funciona utilizando esta misma técnica que te acabo de enseñar para cargar los posts y comentarios … sin instalar nada de más.

Espero tus comentarios acerca de esta forma de agregar funcionalidad a tu sitio. – Gracias.