19

¿Cómo consumir servicios web usando JavaScript?

21Ene
en Desarrollo web, Javascript, jQuery, Tutoriales, Web

Este tutorial ya fué publicado en el blog de desarrollo SOA en la UCI. Aprovecho la oportunidad para ponerlo a vista de toda la comunidad cubana. Aquí pretendo explicar cómo consumir un servicio web usando JavaScript a través de peticiones AJAX. Primero debo aclarar que por motivos de seguridad, los navegadores no permiten que las peticiones AJAX se hagan a otros dominios(peticiones cross-domain). Al hacer esto los navegadores como Firefox y Chrome mostrarán algún error (no en Internet Explorer demostrando lo vulnerable que es). Existen varias maneras de hacer peticiones cross-domain aunque no es objetivo de este tutorial; para ver algunas soluciones y explicaciones pueden visitar:

https://www.funcion13.com/2012/04/12/como-realizar-peticiones-ajax-cross-domain-jsonp-jquery/
https://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
https://www.ribosomatic.com/articulos/ajax-cross-domain-obten-informacion-de-dominio-externo-con-ajax/

No existen restricciones al hacer peticiones cross-domain, si estamos construyendo extensiones para Chrome o Firefox, tampoco si estamos creando un gadet para Windows 7.

Conociendo esto podemos pasar entonces a la construcción de nuestro código, aquí mostraré una forma de consumir el servicio usando JQuery. El servicio web que utilizaremos de ejemplo, es el de Akademos en la UCI, aquí que podemos ver su descripción. Utilizaremos la operación ObtenerEstudianteDadoCI que permite obtener los datos de un estudiante dado su carnet de identidad. Los que están fuera de la universidad pueden utilizar algún otro webservice y seguir el mismo procedimiento.

Para poder hacer uso del protocolo SOAP en JavaScript, debemos construir los mensajes soap que enviaremos al servidor, para esto utilizaremos el addon de Firefox SOAClient.
Para usar el addon abrimos el Firefox y hacemos click derecho en cualquier página, seleccionamos la opción SOA Client -> Acces Web Services.

En el campo WSDL Address escriben la dirección del WSDL del servicio web a consumir, en este caso: https://akademos2.uci.cu/servicios/v4/AkademosWS.wsdl.

Hacemos click en el botón Parse WSDL. El addon nos mostrará una lista con todas las operaciones descritas en el WSDL y los campos de entradas de los parámetros, buscamos ObtenerEstudianteDadoCI y la seleccionamos. Escribimos nuestro CI como se observa en la imagen. Luego le damos al botón Invoke en la parte derecha de la pantalla.

 

Al hacer esto el addon nos mostrará la respuesta del servidor con nuestros datos. Lo más importante es el XML que se muestra en el área de texto abajo, el cual será el mensaje SOAP que enviaremos a nuestro servidor. Para verlo abrimos la pestaña Raw Request Body y de ella copiamos el XML que aparece. Este lo utilizaremos posteriormente. Para ver el formato de los datos que responde el servidor, abrimos la pestaña Raw Response Body, desde aquí podemos ver el nombre de las etiquetas en la respuesta por si queremos obtener algún dato específico en nuestra aplicación.

 

Teniendo estos datos podemos entonces pasar al código.

Usando JQuery
Descargamos la librería JQuery que necesita el tutorial y la ponemos en la carpeta donde vamos a crear nuestro js. Creamos un fichero con nombre UseJQuery.js y otro con nombre Index.html.

Abrimos Index.html y escribimos el siguiente código:

<html>
    <head>
        <title></title>
        <script src="jquery-1.5.2.js" type="text/javascript"></script>
        <script src="UseJQuery.js" type="text/javascript"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <form method="post" action="">
          <div>
          <input type="text" id="CI" />
          <input type="button" value="Jquery" onclick="CallService(); return false;" />
          </div>
       </form>
    </body>
</html>

Hasta ahora en este fichero incluimos la librería Jquery y el fichero UseJQuery que habíamos creado, también creamos un campo de texto para introducir el dato de entrada y un botón que va a llamar a la función CallService(), la cual se encargará de realizar la petición Ajax y consumir el servicio.

El fichero UseJQuery.js debe quedar de esta manera:

function CallService()
{
    //Creamos la variable que contiene la url del webservice
    var webServiceURL = 'https://akademos2.uci.cu/servicios/v4/ws_akademos.php?wsdl';
    //Este es el mensaje SOAP, dentro de las etiquetas <CI>'+ $('#ci').val() +'</CI> hacemos uso de una función JQuery para obtener valor que está en el campo de texto
    var soapMessage = '<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="https://www.w3.org/2001/XMLSchema" xmlns:soap="https://schemas.xmlsoap.org/soap/envelope/"><soap:Body><ObtenerEstudianteDadoCI xmlns="urn:akademos"><CI>'+ $('#ci').val() +'</CI></ObtenerEstudianteDadoCI></soap:Body></soap:Envelope>';

    //Llamamos a la función AJAX de JQuery
    $.ajax({
        url: webServiceURL,
        type: "POST",
        cache: false,
        data: soapMessage,
        contentType: "text/xml",
        success: OnSuccess,
        error: OnError
    });
    return false;
}
//Función que se ejecuta si realizó completa la petición
function OnSuccess(data, status)
{
        //Aquí mostramos el valor que aparece en la etiqueta "PrimerNombre" del cuerpo de respuesta
        alert($(data).find("PrimerNombre").text());
}
function OnError(request, status, error)  //Función que se ejecuta si ocurre algún error
{
    alert(status);
}
$(function() {
    //Evita problemas de cross-domain con JQuery
    jQuery.support.cors = true;
});

Después de esto podemos probar el código en algún addon, en este caso utilizaré internet explorer para que no aparezcan errores cross-domain.

Antes de finalizar  debemos señalar que todavía existen problemas con el consumo de servicios web usando JavaScript. Uno de los problemas es que los servicios sean publicados bajo conexiones seguras (https). Si el navegador no tiene el sitio como un lugar seguro y no reconoce su certificado (algo bastante usual en la UCI), entonces el JS no funcionará.
Para ver ejemplos de extensiones de Firefox y Chrome usando webservices pueden revisar:
https://addons.firefoxmania.uci.cu/cuentafox/
https://addons.firefoxmania.uci.cu/menu-uci/
https://humanos.uci.cu/2012/10/addon-cuenta-permite-monitorear-nuestra-cuenta-de-internet-desde-chrome-y-chromium/

Para más información sobre el uso de soapclient pueden acceder a:
https://www.guru4.net/articoli/javascript-soap-client/demo/en.aspx
https://www.codeproject.com/Articles/12816/JavaScript-SOAP-Client
Esto es todo, espero les sea útil.

Etiquetado en:

19 Comentarios

  1. Estoi no me funcionó y ya probe con todas las librerias de JQUERY QUE TENIA alguien puede ayudarme

  2. AndyT dice:

    Las imágenes no se ven. Están apuntando a blogs.prod.uci.cu. ¿Pueden cambiar los links para poder verlas desde fuera de la UCI?
    Saludos,

  3. Osvaldo dice:

    Creo que este post esta bastante interesante!!!!! y aplicable dentro de la UCI

  4. JM dice:

    Tengo un problema, cuando hago la peticion por segunda vez me devuelve el mismo objeto ajax, como si se estuviera guardando en la cache, aun cuando le puse cache: false. Aclarar que lo que me devuelve es un xml… alguien me puede ayudar??..gracias de antemano.

  5. Felix A. dice:

    Repetido de https://blogs.prod.uci.cu/desarrolloSOA/2012/11/como-consumir-servicios-web-usando-javascript/

    Soporte para Cross-Origin Resource Sharing (cors):

    https://enable-cors.org/client.html
    https://enable-cors.org/server.html

    El response del servidor al que estén haciendo la petición debe contener el header:

    Access-Control-Allow-Origin=*

    Ya lo probé con JQuery y Jersey RI en Apache Tomcat (header a nivel de aplicación, no de servidor).

    Adiós a jsonp.

    Saludos

  6. Carlos dice:

    no se porque pero cuando trato de probar este ejemplo me la alerta que me sale es de error

  7. Arthur dice:

    Me sale este error a poner el wsdl

    An error has occured while parsing.

    • abraham dice:

      Dame más detalle, navegador, Sistema operativo, el servicio , y si es posible el código que escribistes. Es un addon o una app.
      SAludos

  8. jorge olaya dice:

    Aparetnetemente me funciona porque no genera el error, pero no he podido mostrar los datos consultados en pantalla con HTML.

    el data que trae, viene con codigo y datos, no he podido tener control de los datos que trae.

    Alguien le paso lo mismo? o alguien ya logro mostrar datos?

  9. cristian dice:

    Hola,

    Estoy desarrollando una webservice soap con symfony, cuando lo pruebo con el addon de firefox funciona perfectamente y muestra la información programada, pero cuando intento hacerlo con la petición ajax al imprimir data, pareciera que me trajera todo el wsdl sin procesarlo sin llamar al método que yo le especifico con el soapMessage, Sabes a que se pueda deber este comportamiento?, que puedo hacer para que me traiga la información esperada?, gracias.

  10. Carlos dice:

    Yo estoy haciendo algo parecido, es una conexión a un WSDL pero código no funciona, cuando le doy click al botón de enviar no hace nada, alguien que me ayude por favor.

  11. YMC dice:

    Por favor alguien a logrado que este consume por javascript le sirva utilizando la funcion ajax de jquery. Me sale el mensaje de error, estoy probandolo en moxilla firefox. Plis algo de ayuda.

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.