Tips-Utilizar WebServices con JSONP, ejemplo práctico

Hola que tal, acá algo que te puede servir. Cuando queremos hacer una petición por ajax, y estamos en otro dominio, te podrás haber percatado que el server envía un bonito mensaje “Access to restricted URI denied”, y es que por motivos de seguridad parece lógico, cuando todo esto partió, que Ajax no funcione en dominios distintos al que lanza el request, pero sinceramente, hoy en día se hace necesario el poder usar servicios web desde el lado del cliente a dominios diferentes. Para estoy hay varias técnicas, como Cors, XMLHttpRequest Level 2 y JSONP (JavaScript Object Notation with Padding), que básicamente es la llamada mediante JSON a dominios diferentes, en este articulo vamos a ver esta última técnica con un ejemplo sencillo(y por esta vez, sin mucha teoría), personalmente hace un tiempo tuve que implementarlo y fue bastante sencillo.

Utilicé jQuery para la llamada, que debe seguir ciertos patrones:

  • Tu llamada hazla con el verbo http GET
  • Setea crossDomain en true
  • Define la URI con el primer parametro como callback
  • Setea el DataType como “JSONP”

function LlamadaJSONP(param1, param2){

   $.ajax({
          type: "GET",
          crossDomain: true,
          contentType: "application/json; charset=utf-8",
      url: http://otrodominio/myws.asmx/NombreWebmethod?callback=?,
          data: {ID_Param1: param1,ID_Param2: param2 },
      dataType: ‘jsonp’,
          success: function(msg) { 
                    AjaxOK(msg);
                 },
                 error: AjaxError
            });

            function AjaxOK(result) {
                alert(result.d);
            } 
            function AjaxError(result) { 
                 alert("ERROR " + result.status + ‘ ‘ + result.statusText);
             }
}    
        
La variable callback nos sirve para que se devuelva el JSON como una llamada a una función. Esto nos permite el NO hacer una llamada Ajax real , si no incluir el archivo como script (y ahi si se permite las llamadas a otros dominios).

El Webmethod simplemente lo marqué con los siguientes atributos(no quise agregar el cuerpo del webmethod, ya que no influía para el ejemplo)

<ScriptMethod(UseHttpGet:=True,ResponseFormat:=ResponseFormat.JSON)

Puede que te encuentres con el siguiente error: Request format is unrecognized for URL unexpectedly ending in XXXXXX, para esto, lo solucionas agregando en el Web.config

<webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
</webServices>

y listo!, funcionando sin problemas Sonrisa, problema del dominio cruzado solucionado.
Espero que te sirva
@chalalo!

Deja un comentario

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