Invocar webservice jsonp con ajax y jquery

Este ejemplo utiliza NewtonSoft JSON que se puede bajar de acá: http://james.newtonking.com/json


En web.config del webservice:

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



Página que invoca al servicio:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
    <input id="btn1" type="button" value="ok" />
 
 
    </div>
    </form>

<script>
    $(function() {

           var host = "http://localhost:11245/webservice1/Clientes.asmx/ObtenerClientes";

           $("#btn1").click(function() {
               $.ajax({
                   type: 'GET',
                   url: host,
                   data: { prefix: $("#txtNombreT").val() },
                   dataType: "jsonp",
                   jsonpCallback: "funcion1",
                   crossDomain: true,
                   cache: false,                                    
                   error: function(jqXHR, textStatus, errorThrown) {
                       alert(errorThrown);
                   }
               });
           });

     });



        window.localJsonpCallback = function(json) {
            if (!json.Error) {
                alert(json[0].nombre);
            }
            else {
                alert(json.Message);
            }
        }

    });

       //ojo!! esta funcion debe estar fuera del document.ready!!
       //o sino definirla como window.funcion1 = .... VER EJEMPLO ARRIBA
       function funcion1(data) {
           if (!data.Error) {
               datos = data;            
           }
           else {
               alert(data.Message);
           }
       }

</script>

</body>
</html>


Código del webservice:

Ejemplo de lo que debe retornar:

funcion1([
  {
    "nombre": "Juan",
    "documento": "23-10013"
  },
  {
    "nombre": "Pedro",
    "documento": "23-463"
  },
  {
    "nombre": "Silvia",
    "documento": "23-460"
  },
  {
    "nombre": "Fernanda",
    "documento": "23-10132"
  },
  {
    "nombre": "Ricardo",
    "documento": "2-21539085001"
  }
]);


    Public Class pers
        Public nombre As String
        Public documento As String
    End Class

    <WebMethod()> _
    <ScriptMethod(UseHttpGet:=True, ResponseFormat:=ResponseFormat.Json)> _
    Public Sub ObtenerClientes(ByVal prefix As String, ByVal callback As String)
        'Mantis 25829 - rmeneses

        'Dim personas As New List(Of String)()
        Dim personas As New List(Of pers)()

        Dim odb As New SqlDb
        Dim nombre As String

        odb.AbrirDB()
        odb.BeginTran()

        cifIO.cli.LeerClientesBusquedaIncrementalTodos(odb, prefix)

        Dim s As String = ""

        For i As Integer = 0 To odb.dt.Rows.Count - 1
            nombre = CType(odb.dt.Rows(i).Item(3), String)

            s = "{" & Chr(34) & "nombre" & Chr(34) & ": " & Chr(34) & nombre.Trim() & Chr(34) & ", " & _
                          Chr(34) & "documento" & Chr(34) & ": " & Chr(34) & odb.dt.Rows(i).Item(0) & "-" & odb.dt.Rows(i).Item(1) & "-" & odb.dt.Rows(i).Item(2) & Chr(34) & "}"

            Dim p As pers = New pers()
            p.nombre = nombre.Trim()
            p.documento = odb.dt.Rows(i).Item(0) & "-" & odb.dt.Rows(i).Item(1)

            personas.Add(p)
        Next

        Dim sb As New StringBuilder()
        sb.Append(callback & "(")
        sb.Append(JsonConvert.SerializeObject(personas, Formatting.Indented))
        sb.Append(");")

        odb.CommitTran()
        odb.CerrarDB()

        Context.Response.Clear()
        Context.Response.ContentType = "application/json"
        Context.Response.Write(sb.ToString())
        Context.Response.End()
    End Sub


No hay comentarios:

Publicar un comentario