Hola a todos, vamos a ver como con jQuery podemos consumir un Web Service de una manera bastante sencilla y rápida.

La idea de este artículo es ver como consumir el servicio más no como crearlo, solo les voy a colocar el colocar la función creada en el Web Service, dicha función va a validar si el usuario es válido o no, claro la idea serpia hacer dicha validación contra una base de datos, peor en este caso vamos a tener un array, lo importante a tener en cuenta es que la clase debe adornarse con el atributo

1: Imports System.Web.Services 2: Imports System.Web.Services.Protocols 3: Imports System.ComponentModel 4: Imports System.Web.Script.Services 5:  6: ' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 7: ' _ 8: Namespace:="http://tempuri.org/")> _ 9: _ 10: False)> 11: 12: PublicClass ValidarUsuario 13: Inherits System.Web.Services.WebService 14:  15: 16: PublicFunction ValidarUsuario(sUser AsString) AsBoolean 17: Dim sUsuarios AsString() = {"user1", "user2"} 18: ForEach usuario AsStringIn sUsuarios 19: If sUser = usuario Then 20: ReturnTrue 21: EndIf 22: Next 23: ReturnFalse 24: EndFunction 25:  26: End Class

Ahora en nuestra página aspx, vamos a tener un campo de texto y un botón para realizar la comunicación con el Web Service y validar el usuario:

1: <h1>Consumir Web Service con jQueryh1> 2: <label>Usuario:label> 3: <asp:TextBoxID="txtUsuario"runat="server">asp:TextBox> 4: <asp:ButtonID="btnValidar"runat="server"Text="Validar Usuario"/>

Ahora va el código jQuery:

1: $(function () { 2: $("#<%= btnValidar.ClientID %>").click(function (e) { 3: e.preventDefault(); 4: ValidarUsuario($("#<%= txtUsuario.ClientID %>").val()); 5: }) 6: function ValidarUsuario(user) { 7: $.ajax({ 8: type: "POST", 9: url: "ValidarUsuario.asmx/ValidarUsuario", 10: data: '{"sUser":"' + user + '"}', 11: contentType: "application/json; charset=utf-8", 12: dataType: "json", 13: success: function (resul) { 14: if (resul.d) 15: alert('El usuario es válido.'); 16: else 17: alert('El usuairo es inválido.'); 18: }, 19: error: function (error) { 20: alert('Se ha producido un error validando el usuario.'); 21: } 22: }) 23: } 24: })

y que hace ese código?

En la línea 2 atachamos un manejador para el click del botón, en la siguiente línea con e.preventDefault() le estamos diciendo que cancele su comportamiento por defecto que sería realizar postback y en la línea 4 llamamos la función que validará el usuario.

La función ValidarUsuario recibe como parámetro el nombre del usuario, ahora con $.ajax le decimos que vamos a realizar una petición AJAX al servidor, en este cas será consumir el Web Service, ahora voy a comentar los parámetros importantes:

  • url: especificamos el nombre del servicio y de la función.
  • data: datos que enviamos al servicio
  • success: función que es llamada si la petición es correcta, luego allí validamos si el valor devuelto por el servicio es true para usuario válido o false para usuario inválido.
  • error: función que es llamada si se produce algún error al llamar el servicio.

Como ven es bastante sencillo, como siempre les dejo el código del ejemplo:

Descarga el ejemplo! (el archivo se llama Consumir WS con jQuery)