Cmo consumir servicios web usando JavaScript? | Desarrollo Mozilla...

1 of 6

http://developer.firefoxmania.uci.cu/2013/01/21/como-consumir-servici...

Mozilla

Search

19

21
Ene

Escrito por

en

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 cmo consumir un servicio web usando
JavaScript a travs de peticiones AJAX. Primero debo aclarar que por
motivos de seguridad, los navegadores no permiten que las peticiones
AJAX se hagan a
los navegadores

otros dominios(peticiones cross-domain). Al hacer esto

como Firefox y Chrome mostrarn algn 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:
http://www.funcion13.com/2012/04/12/como-realizar-peticiones-ajax-cross-domain-jsonpjquery/
http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resourcesharing/
http://www.ribosomatic.com/articulos/ajax-cross-domain-obten-informacion-de-dominioexterno-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 construccin de nuestro cdigo, aqu mostrar una
JQuery.. El servicio web que utilizaremos de ejemplo, es el
forma de consumir el servicio usando JQuery
de Akademos en la UCI, aqu que podemos ver su descripcin. Utilizaremos la operacin
ObtenerEstudianteDadoCI que permite obtener los datos de un estudiante dado su carnet de
identidad. Los que estn fuera de la universidad pueden utilizar algn otro webservice y seguir el
mismo procedimiento.

Dona a Mozilla y ayuda a mantener la

Web abierta y libre

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.
SOAClient.
Para usar el addon abrimos el Firefox y hacemos click derecho en cualquier pgina,
seleccionamos la opcin SOA Client -> Acces Web Services.
Services.

3D Add-ons addon
animacin canvas

addon-sdk

chromeless como se

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

hace

Hacemos click en el botn Parse WSDL. El addon nos mostrar una lista con todas las
operaciones descritas en el WSDL y los campos de entradas de los parmetros, buscamos
ObtenerEstudianteDadoCI y la seleccionamos. Escribimos nuestro CI como se observa en la

CSS CSS3 demo demos

desarrollo web documentacion
filmes Firefox Firefox OS

imagen. Luego le damos al botn Invoke en la parte derecha de la pantalla.

complemento

Complementos

framework html html5

informacion

javascript
8/15/2016 11:35 AM

Cmo consumir servicios web usando JavaScript? | Desarrollo Mozilla...

2 of 6

http://developer.firefoxmania.uci.cu/2013/01/21/como-consumir-servici...

jquery json manual

nodejs Noticias optimizacin
three.js transition

twinsms

webrtc

ui vdeos

movil

pdf sms

tutorial
webcam webgl

websockets xul

xulrunner

Al hacer esto el addon nos mostrar la respuesta del servidor con nuestros datos. Lo ms
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 pestaa 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 pestaa Raw Response Body,
Body, desde aqu podemos ver
el nombre de las etiquetas en la respuesta por si queremos obtener algn dato especfico en

MOZILLA CUBA
Firefox no accede al Virtual Host en
Linux Mint
Lets Encrypt lleg a Firefoxmana y a la

nuestra aplicacin.
UCI
Cmo se hace? Utilizar Flash en Firefox a
travs de Pepper
Actualizado Firefox y Firefox para
Android en los canales Beta(48.0b1),
Developer(49.0a2) y Nightly(50.0a1)!
Conoce los complementos destacados

Teniendo estos datos podemos entonces pasar al cdigo.

Usando JQuery
Descargamos la librera 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 cdigo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

para junio
Actualizado Firefox ESR(45.2.0) o versin
de soporte extendido!
Firefox incorpora Widevine, pestaas
sincronizadas y mucho ms

<html>
Actualizados Firefox(47) y
<head>
Thunderbird(45.1.1) en sus versiones
<title></title>
<script src="jquery-1.5.2.js" type="text/javascript"></script
estables!
<script src="UseJQuery.js" type="text/javascript"></script
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
#ffxmania alcanza su 1200 like en
</head>
<body>
Facebook!, muchas gracias a todos sus
<form method="post" action="">
seguidores
<div>
<input type="text" id="CI" />
Nuevo diseo
para el servicio de Addons
<input type="button" value="Jquery" onclick="CallService(); return
false;"
</div>
de Firefoxmana
</form>
</body>
</html>

Hasta ahora en este fichero incluimos la librera Jquery y el fichero UseJQuery que habamos
creado, tambin creamos un campo de texto para introducir el dato de entrada y un botn que
va a llamar a la funcin CallService()
CallService(),, la cual se encargar de realizar la peticin Ajax y
consumir el servicio.
El fichero UseJQuery.js debe quedar de esta manera:

1
2
3
4
5
6
7
8
9
10

function CallService()
{
//Creamos la variable que contiene la url del webservice
var webServiceURL = 'http://akademos2.uci.cu/servicios/v4/ws_akademos.php?wsdl
//Este es el mensaje SOAP, dentro de las etiquetas <CI>'+ $('#ci').val() +'</CI>
var soapMessage = '<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:xs
//Llamamos a la funcin AJAX de JQuery
$.ajax({
url: webServiceURL,

8/15/2016 11:35 AM

Cmo consumir servicios web usando JavaScript? | Desarrollo Mozilla...

3 of 6

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

http://developer.firefoxmania.uci.cu/2013/01/21/como-consumir-servici...

type: "POST",
cache: false,
data: soapMessage,
contentType: "text/xml",
success: OnSuccess,
error: OnError
});
return false;
}
//Funcin que se ejecuta si realiz completa la peticin
function OnSuccess(data, status)
{
//Aqu mostramos el valor que aparece en la etiqueta "PrimerNombre" del cuer
alert($(data).find("PrimerNombre").text());
}
function OnError(request, status, error) //Funcin que se ejecuta si ocurre algn e
{
alert(status);
}
$(function() {
//Evita problemas de cross-domain con JQuery
jQuery.support.cors = true;
});

Despus de esto podemos probar el cdigo en algn addon, en este caso utilizar internet
explorer para que no aparezcan errores cross-domain.

Antes de finalizar debemos sealar que todava 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:
http://addons.firefoxmania.uci.cu/cuentafox/
http://addons.firefoxmania.uci.cu/menu-uci/
http://humanos.uci.cu/2012/10/addon-cuenta-permite-monitorear-nuestra-cuenta-de-internetdesde-chrome-y-chromium/
Para ms informacin sobre el uso de soapclient pueden acceder a:
http://www.guru4.net/articoli/javascript-soap-client/demo/en.aspx
http://www.codeproject.com/Articles/12816/JavaScript-SOAP-Client
Esto es todo, espero les sea til.
Etiquetado en:

jquery

Brbaro Javier dice:

webservice

enero 23, 2013 a las 9:58 am

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

8/15/2016 11:35 AM

Cmo consumir servicios web usando JavaScript? | Desarrollo Mozilla...

4 of 6

Abraham dice:

http://developer.firefoxmania.uci.cu/2013/01/21/como-consumir-servici...

enero 23, 2013 a las 10:45 am

Se ms especfico, que error te d. Recuerda que firefox y chrome no permiten peticiones crossdomain.
Responder

Brbaro Javier dice:

enero 23, 2013 a las 2:51 pm

Tienes razn el problema es que lo estba ejecutando con chrome

Responder

AndyT dice:

enero 23, 2013 a las 12:01 pm

Las imgenes no se ven. Estn apuntando a blogs.prod.uci.cu. Pueden cambiar los links para poder
verlas desde fuera de la UCI?
Saludos,
Responder

abraham dice:

enero 23, 2013 a las 1:13 pm

Ya ha sido arreglado. Gracias

Responder

Osvaldo dice:

enero 26, 2013 a las 1:52 am

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

JM dice:

enero 28, 2013 a las 1:34 pm

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.
Responder

abraham dice:

enero 28, 2013 a las 2:29 pm

Donde lo estas probando?. En un addon de firefox o que?

Responder

Felix A. dice:

febrero 27, 2013 a las 12:08 am

Repetido de http://blogs.prod.uci.cu/desarrolloSOA/2012/11/como-consumir-servicios-web-usandojavascript/
Soporte para Cross-Origin Resource Sharing (cors):
http://enable-cors.org/client.html
http://enable-cors.org/server.html
El response del servidor al que estn haciendo la peticin debe contener el header:
Access-Control-Allow-Origin=*
Ya lo prob con JQuery y Jersey RI en Apache Tomcat (header a nivel de aplicacin, no de servidor).
Adis a jsonp.
Saludos
Responder

Carlos dice:

marzo 16, 2013 a las 10:54 pm

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

abraham dice:

marzo 17, 2013 a las 7:05 pm

En que navegador lo estas probando??

Responder

Arthur dice:

mayo 9, 2013 a las 6:46 pm

Me sale este error a poner el wsdl

An error has occured while parsing.
Responder

abraham dice:

mayo 10, 2013 a las 1:36 pm

Dame ms detalle, navegador, Sistema operativo, el servicio , y si es posible el cdigo que

escribistes. Es un addon o una app.
SAludos
Responder

mayo 30, 2014 a las 3:43 pm

8/15/2016 11:35 AM

Cmo consumir servicios web usando JavaScript? | Desarrollo Mozilla...

5 of 6

http://developer.firefoxmania.uci.cu/2013/01/21/como-consumir-servici...

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?
Responder
julio 2, 2014 a las 11:39 am

yoli dice:
A mi me pasa lo mismo. Pudiste resolverlo?

Responder
diciembre 15, 2014 a las 8:35 pm

Carlos dice:

SU URL CODIFIQUENLA Y AS FUNCIONAR, LES DEJO UNA PAGINA DONDE PUEDEN HACER
ESO C:
http://meyerweb.com/eric/tools/dencoder/
Responder

septiembre 27, 2014 a las 8:41 pm

cristian dice:

Hola,
Estoy desarrollando una webservice soap con symfony, cuando lo pruebo con el addon de firefox
funciona perfectamente y muestra la informacin programada, pero cuando intento hacerlo con la
peticin ajax al imprimir data, pareciera que me trajera todo el wsdl sin procesarlo sin llamar al
mtodo que yo le especifico con el soapMessage, Sabes a que se pueda deber este comportamiento?,
que puedo hacer para que me traiga la informacin esperada?, gracias.
Responder
diciembre 15, 2014 a las 4:03 pm

Carlos dice:

Yo estoy haciendo algo parecido, es una conexin a un WSDL pero cdigo no funciona, cuando le doy
click al botn de enviar no hace nada, alguien que me ayude por favor.
Responder
diciembre 7, 2015 a las 6:59 pm

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.
Responder

Nombre (requerido)
Mail (no ser publicado) (requerido)
Sitio Web

Enviar Comentario

Eres humano? Entonces resuelve esta operacin: *

siete seis =

F
M

C
C

D
-T

G
-T

-T
900

8/15/2016 11:35 AM

Cmo consumir servicios web usando JavaScript? | Desarrollo Mozilla...

6 of 6

http://developer.firefoxmania.uci.cu/2013/01/21/como-consumir-servici...

Desarrollo Mozilla Cuba Firefoxmana. 2016

8/15/2016 11:35 AM