Consumir un Webservice con jQuery AJAX y ASP.NET

Este post ya tenia varios días que quería crearlo, ya que en mi trabajo me fue muy útil al trabajar con jQuery y entre otras cosas, lo que vamos a hacer es es consumir un webservice desde el lado del cliente utilizando jQuery. Esto se puede llevar acabo utilizando ASP.NET AJAX pero la verdad a mi no me ha gustado ese framework y espero no verme obligado a utilizarlo en el futuro.

Consumir un WebService se puede hacer de diferentes maneras, usando un Service Reference y utilizando sus métodos directamente, o  habilitarlo para Client Script, que es lo que nosotros vamos a hacer.

Antes de empezar

Primero que nada yo tengo una solución en visual studio 2012 en donde yo agregué un nuevo sitio web vacío

Ahora vamos a agregar una nueva clase que se llamará Customer, también agregaremos un nuevo WebService, como creamos un sitio web, todas las clases nos las pondrá automáticamente en la carpeta App_Code, si tu hiciste un proyecto en vez de un sitio web, pues verás la diferencia. Bueno tendremos nuestra solución de la siguiente manera:

image

Como ven, yo ya agregue una carpeta “Script” y agregué la librería de jQuery, en este caso en la versión 1.7.2 pero ya existe la 1.8, tu decides cual usar, pero recomiendo las mas recientes.

Tenemos un WebService llamado CustomerServices y con su clase automáticamente agregada al App_Code.

Empecemos por definir la clase Customer

image

Simple, tres propiedades, Nombre,Apellido y Edad.

Nos vamos ahora al CustomerService.cs para agregar un método y configurar nuestro webservice

image

Cuando creas el webservice te pone un método HelloWorld por default, simplemente lo borramos y agregamos el método GetCustomers.

Primero que nada hay que notar la propiedad que esta justo arriba de la definición de la clase CustomerService, tenemos la propiedad [System.Web.Script.Service.ScriptService], como el comentario de arriba lo dice, originalmente esa línea viene como un comentario, simplemente la descomentamos para poder invocar este Webservice desde ClientScripts o sea JavaScript

Podemos darle clic derecho a CustomerService.aspx y verlo en el navegador y ya tenemos el método listo para ejecutarse

image

image

Al llamar el método del WebService podremos ver la respuesta

image

Como ven son los 3 objetos que agregue estáticos en el método.

Consumir el WebService con jQuery

Nos vamos a la pagina Default.aspx:

Inicialización básica

image

Ahora vamos a hacer uso de la función $.ajax para consumir el servicio de manera asíncrona

image

enviaremos los datos por POST y recibiremos los resultados en forma de json, igual los parámetros (si los hubiera) los enviaríamos también con formato json, ejemplo: “{‘parametro1’:’valor’}”

Para mas referencia de esta función visita http://api.jquery.com/jQuery.ajax/ 

Si corremos la pagina veremos:

image

data.d contiene todo el resultado que nos envía el WebService, por lo tanto podemos recorrer ese arreglo data.d por medio de un each de jquery o como uds deseen

image

 

Y el resultado será

image

Así ustedes ya podrán manejar los datos como lo necesiten, dentro de la función success.

Esto es todo por esta entrada, nos vemos luego, Saludos!!.

Anuncios

10 comentarios sobre “Consumir un Webservice con jQuery AJAX y ASP.NET

  1. Gracias, muy claro el ejemplo. Tengo una duda… si yo quiero darle un bueno uso a un web service de este tipo, podría generarse el caso en que por otro dispositivo se actualice, agregue o elimine algun dato… entiendo que la web generada (como todas las webs) es estática. Cuál sería el procedimiento normal para que la información se actualice en los disositivos conectados al web service (navegadores, celulares, otras aplicaciones, etc)? Se me ocurre que los que muestran la información consulten cada x tiempo si hubo novedades, y si las hubo recargar todo el contenido… Otra opción sería que cuando alguien hace un cambio en el servidor este dispare actualizaciones, sería la mejor solución, pero para esto el cliente debería quedar esperando novedades del servidor… puede hacerse algo así?

    1. Tu duda podemos resumirla al timeline de twitter o facebook?, o sea que si hay tweets nuevos, se vayan agregando al timeline en tiempo real?. La verdad no entendí muy bien tu pregunta, pero si fue eso, si se puede. Tienes que tener un setTimeOut (un timer en javascript), que este consultando si hay novedades como tu dices pero de manera moderada o utilizando alguna buena estrategia, por que estar haciendo solicitudes cada segundo al servidor se comería todo el ancho de banda. Sería interesante hacer algun dia un post sobre eso!.

      Saludos!

    1. Teniendo los datos en ese bucle que muestro ($.each) puedes generar cualquier HTML que quieras, con un INNERHTML en cualquier elemento div de tu DOM.

      Lo siento por no poder detallar más, pero espero te ayude. saludos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s