Consumir Web Service SOAP Con JavaScript.

Consumir Web Service SOAP Con JavaScript.

Como vimos en el post Anterior consumimos un web service REST, en este vamos a consumir un web service SOAP, Esto lo realice durante el mismo proyecto en donde revisamos diferentes tecnologías para consumir los webs services en la parte Front End.

Es una función muy práctica y básica, pero por lo menos a mí me ayudo a entender cómo funciona por eso quiero mostrárselo.

Lo que inicialmente siempre hago para tener una referencia de la estructura del web service es cargar el archivo WDSL en un SOAP UI, de esta forma podemos ver que funciona, la estructura de datos que nos devuelve. Para los que no lo conocen es una herramienta muy práctica para consumir web service y no solo SOAP, si no también REST, les dejo el link por si les interesa.

https://www.soapui.org/ “Es gratis!”.

Iniciemos, para esto debemos tener un web service SOAP publicado en algún servidor y accesible.

Tenemos nuestro documento HTML y vamos a incrustar una porción de código JavaScript.

Para esto utilizamos: la etiqueta <script> dentro de nuestro HTML, de esta forma:

Luego de esto vamos a construir la función que va a consumir el web service SOAP.

En la función que llamamos soap creamos un objeto XMLHttpRequest por el abriremos la conexión con nuestro servicio.

Este objeto que llamamos xmlhttp usando uno de sus métodos “open”, le daremos el método, la dirección y indicaremos si es asíncrono.

open(method, url, async)

xmlhttp.open('POST', 'http://10.92.48.177:8081/StreamFyApp/SongWS?wsdl', true);

Aquí pusimos método = POST, la dirección de nuestro web service, y true para Async.

Luego de eso crearemos una variable para construir nuestro Request o petición para el Servicio SOAP, esto debe ser con la estructura que ya probamos en SOAP UI.

Posterior a esto vamos a utilizar la función “onreadystatechange”, la cual se ejecutara cuando haya un cambio en el estado.

El evento onreadystatechange, tiene la propiedad readyState la cual mantiene el estado del XMLHttpRequest.

El evento onreadystatechange se dispara cada vez que cambia el readyState.

Durante una solicitud del servidor, el readyState cambia de 0 a 4:

0: solicitud no inicializada.

1: conexión del servidor estableció.

2: solicitud recibida.

3: Solicitud de procesamiento.

4: solicitar acabado y la respuesta está listo.

En el código vemos que si el estado es 4 pasa a la validar el Status.

Estatus tiene dos estados 200  y 400.

200 = ok

400 = Page no found ( Muy conocido en la web)

 

Ya casi terminamos, solo nos falta enviar el POST Request para esto hacemos lo siguiente:

Aquí básicamente seteamos lo header para el request y enviamos el string Request que cargamos anteriormente en la variable “sr”.

Ya tenemos nuestra función ahora debemos llamarla, en este caso lo vamos hacer con un botón, pero se puede poner en el load de la página o en cualquier evento.

Aquí ya estamos consumiendo el web service, y tenemos lista la información para trabajar con ella.

Nos vemos.

Jhonny