h@nz …el Geek

Hace poco había yo publicado un artículo en el que explicaba como utilizar Ajax con JQuery y en aquel artículo había dado como ejemplo llamadas hacia controladores HTTP de ASP .Net, que son documentos con extensión *.ashx. En uno de los comentarios de dicho artículo me hicieron una pregunta, que por cierto creo que es una pregunta típica:

¿Hay forma de NO utilizar ASHX y utilizar WebServices de página?

Sí, la hay, y se hace utilizando JSON para el intercambio de información; y para demostrarlo, en este artículo voy a publicar el mismo ejemplo pero utilizando métodos de la página .Net. Como será el mismo ejemplo, el resultado será el mismo:

Para empezar, debemos crear un nuevo ASP .NET AJAX-Enabled Web Site, que es en realidad un sitio web con el archivo Web.Config modificado para trabajar con ASP .Net AJAX. (obviamente debemos instalarlo antes).  Una vez hecho esto. ya podemos empezar a escribir nuestra aplicación.

Ahora crearé el método en la página que será invocado desde JavaScript, para hacerlo, simplemente se define un método como cualquier otro, con la diferencia de que dicho método debe ser público y estático, además, este método debe tener de forma obligatoria el atributo WebMethod() (disponible en el namespace System.Web.WebService), el cual permitirá que dicho método sea accesible por un solicitud HTTP. En resúmen, debe quedar como se muestra en la siguiente imágen:

Ahora que ya tenemos creado un método accesible desde el lado del cliente, vamos a crear el método JavaScript para invocar a dicho método. Esto lo haremos de la siguiente manera:

Como se ve en la imágen,  los atributos de ajax en jquery deben ser definidos de la siguiente manera:

• type: Indica que los datos viajarán como parte del cuerpo de la solicitud y no serán visibles en la url.
• dataType: El tipo de dato que Jquery espera como respuesta del servidor.
• contentType:  Se usa cuando se desean enviar datos al servidor.
• url: La url hacia donde se van a enviar los datos. En este caso estamos indicando el nombre de la página y seguido del slash (“/”) el nombre del método que queremos invocar. Incluso con este método podremos invocar métodos de otras páginas sin necesidad de cargar toda la página, aunque no recomiendo esto último.
• data: Los datos enviados al servidor. Y como estamos usando json, el formato debe ser {clave:valor, clave:valor}.
• success: Invoca al método que se ejecutará cuando finalice de forma exitosa una llamada a Ajax.
• error: Se desencadena cuando se produce un error en el llamado a ajax.

Bien, espero que me disculpen la demora en escribir este artículo pero estaba un poco ocupado jugando Counter Strike en el trabajo.Yo lo he confesado, antes era fanático de utilizar AjaxPro para mis desarrollos, pero desde que conozco a Jquery Ajax y he aprendido a usarlo, lo utilizo bastante, ya que es más rápido en su desempeño y me permite un mejor control sobre mi código, que es algo que siempre se debe cuidar, además que AjaxPro me generaba algunos archivos adicionales y eso era algo que no me caía bien =P

El código completo y funcionando se encuentra en el archivo a continuación.

Descargar el ejemplo Jquery Ajax WebMethods

Espero que les sea de utilidad.

Saludos.