Invocando ASP.NET WebServices desde JQuery con notación JSON.

Hola que tal?, ayer martes 12 , hicimos un Webcast con ASP.NET & JQuery, en donde revisamos varios ejemplos, ahora bien, quiero revisar algunos que vimos de manera bastante rápida por el tiempo.

Lo bueno es que vamos a invocar al WS desde una página HTML, aunque esto igual se puede hacer con Microsoft Ajax Library, vamos a ver la potencialidad de JQuery.

Código del WService

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _

<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _

Public Class Saludame
    Inherits System.Web.Services.WebService

 

 <WebMethod()> _
  Public Function Saludame(ByVal nombre As String) As String
        Return "Bienvenido a la charla " & nombre
    End Function
End Class

El Código es sencillo, y recuerda descomentar la línea en donde está el código:

<System.Web.Script.Services.ScriptService()> _

Que nos permite hacer las llamadas desde un script del lado del cliente.

Código JQuery

<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

  <script type="text/javascript">
      $(document).ready(function() {
        $("#sayHelloButton").click(function(event){
           $.ajax({
             type: "POST",
             url: "Saludame.asmx/Saludame",
             data: "{‘nombre’: ‘" + $(‘#nombre’).val() + "’}",
    
        contentType: "application/json; charset=utf-8",
             dataType: "json",
             success: function(msg) {
                     AjaxOK(msg);
                 },
                 error: AjaxError
            });
         });
     });  

function AjaxOK(result) {
  alert(result.d);
}  

function AjaxError(result) {
  alert("ERROR " + result.status + ‘ ‘ + result.statusText);
}
</script>    

Código HTML

  <form id="form1">
     <h1> Llamando  ASP.NET AJAX Web Services con jQuery </h1>
        Ingrese su Nombre:
        <input id="nombre" /> <br />
        <input id="SaludaButton" value="Saluda!"
               type="button"  />
    </form> 

Explicación

Lo que hace este código JQuery es encadenar a al evento click del botón la funcionalidad de ajax, seteamos el tipo de envío (Post) , la URL, que corresponde a la dirección web o al nombre del archivo y luego el webmethod que invocamos “Saludame”, en data van los parámetros de entrada al WS con notación JSON, recuerda que si vas a enviar más de un parámetro tienes que formatear correctamente este string. Por ejemplo, si vas a enviar dos parámetros de entrada:

data: "{‘a’: ‘" + $(‘#a’).val() + "’,’b’: ‘" + $(‘#b’).val() + "’}",

Luego especificamos el content type, el tipo de datos y especificamos las funciones que serán invocadas si la ejecución resultó correcta(AjaxOK) o si ocurrió un error(AjaxError).

y ta tan!!

image

Espero que te sirva,

Gonzalo

7 comentarios en “Invocando ASP.NET WebServices desde JQuery con notación JSON.”

  1. Hola, muy buen articulo, pero estoy intentado desarrollaar el web service instanaciando un objeto de la capa Entidad, luego el objeto de negocio y mediante el llamar a un metodo de la capa de datos que corre un procedimiento almacenado todo ok, pero el web service bota error de “referencia de objeto no establecida”,
    la pregunta es se puede implementar un web service desde la capa presentación , utilizando la tecnica de N CAPAS ? o a lo mejor como incrustar un webmethod en una pagina normal aspx. y llamarla desde jquery ?

  2. hola anthony, implementar un ws (en) o (desde) la capa de entidad? en los dos casos se puede, creo que el problema que tienes es a nivel de código manejado, si quieres compartes el código y revisamos.
    Saludos,
    gonzalo

  3. Una consulta, en base a lo que muestras en el ejemplo de que manera se puede implementar el envio de las credenciales de un Web Services, es decir; mi Web Service tiene Autenticación de Windows y para consumirlo debo enviar las credenciasles cómo puedo hacer esto.

    Saludos.

  4. estoy tratando de conectar una pagina php con un servicio en WCF pero no ejecuta nada en IE manda una advertencia de que se enviara informacion de forma no segura si le doy que si, el script si se ejecuta y me obtiene los datos per si le doy no, no ejecuta nada. el problema es que no se le puede estar preguntando eso al usuario, alguna forma de resolverlo ?.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *