¿Cómo 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 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
los navegadores

otros dominios(peticiones cross-domain). Al hacer esto
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:
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 construcción de nuestro código, 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 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.

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 página,
seleccionamos la opción SOA Client -> Acces Web Services.
Services.

3D Add-ons addon
animación canvas

addon-sdk

chromeless como se

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

hace

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

CSS CSS3 demo demos
desarrollo web documentacion
filmes Firefox Firefox OS

imagen. Luego le damos al botón Invoke en la parte derecha de la pantalla.

complemento

Complementos

framework html html5
informacion

javascript
8/15/2016 11:35 AM

cu/servicios/v4/ws_akademos. Este lo utilizaremos posteriormente. Lo más importante es el XML que se muestra en el área de texto abajo.firefoxmania.2. desde aquí podemos ver el nombre de las etiquetas en la respuesta por si queremos obtener algún dato específico en MOZILLA CUBA Firefox no accede al Virtual Host en Linux Mint Let’s Encrypt llegó a Firefoxmanía y a la nuestra aplicación.uci.html. Abrimos Index. Para verlo abrimos la pestaña Raw Request Body y de ella copiamos el XML que aparece.1) en sus versiones <title></title> <script src="jquery-1. pestañas sincronizadas y mucho más <html> Actualizados Firefox(47) y <head> Thunderbird(45. Para ver el formato de los datos que responde el servidor.js" type="text/javascript"></script <meta http-equiv="Content-Type" content="text/html.0) o versión de soporte extendido! Firefox incorpora Widevine. 8/15/2016 11:35 AM .ajax({ url: webServiceURL.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.0b1). Usando JQuery Descargamos la librería JQuery que necesita el tutorial y la ponemos en la carpeta donde vamos a crear nuestro js.5.. Body..0a1)! Conoce los complementos destacados   Teniendo estos datos podemos entonces pasar al código.js" type="text/javascript"></script estables! <script src="UseJQuery.js y otro con nombre Index. 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() CallService().html y escribimos el siguiente código: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 para junio Actualizado Firefox ESR(45.. jquery json manual nodejs Noticias optimización three.¿Cómo consumir servicios web usando JavaScript? | Desarrollo Mozilla. Creamos un fichero con nombre UseJQuery.2. muchas gracias a todos sus <form method="post" action=""> seguidores… <div> <input type="text" id="CI" /> Nuevo diseño para el servicio de Addons <input type="button" value="Jquery" onclick="CallService(). return false. el cual será el mensaje SOAP que enviaremos a nuestro servidor." </div> de Firefoxmanía </form> </body> </html> Hasta ahora en este fichero incluimos la librería Jquery y el fichero UseJQuery que habíamos creado. charset=UTF-8" #ffxmania alcanza su 1200 like en </head> <body> Facebook!.js transition twinsms webrtc ui vídeos movil pdf sms tutorial webcam webgl websockets xul xulrunner   Al hacer esto el addon nos mostrará la respuesta del servidor con nuestros datos..0a2) y Nightly(50.0" encoding="utf-8"?><soap:Envelope xmlns:xs //Llamamos a la función AJAX de JQuery $. UCI Cómo se hace? Utilizar Flash en Firefox a través de Pepper Actualizado Firefox y Firefox para Android en los canales Beta(48.uci.cu/2013/01/21/como-consumir-servici.php?wsdl //Este es el mensaje SOAP. Developer(49.val() +'</CI> var soapMessage = '<?xml version="1. la cual se encargará de realizar la petición Ajax y consumir el servicio. 2 of 6 http://developer. El fichero UseJQuery.1. dentro de las etiquetas <CI>'+ $('#ci').. abrimos la pestaña Raw Response Body.

Etiquetado en: jquery Bárbaro Javier dice: webservice enero 23.firefoxmania. espero les sea útil.uci.uci. Antes de finalizar  debemos señalar que todavía existen problemas con el consumo de servicios web usando JavaScript.. success: OnSuccess.guru4. 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 . 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.cu/2013/01/21/como-consumir-servici.cu/menu-uci/ http://humanos.cu/2012/10/addon-cuenta-permite-monitorear-nuestra-cuenta-de-internetdesde-chrome-y-chromium/ Para más información sobre el uso de soapclient pueden acceder a: http://www.support. Para ver ejemplos de extensiones de Firefox y Chrome usando webservices pueden revisar: http://addons. entonces el JS no funcionará.uci.. Después de esto podemos probar el código en algún addon. } $(function() { //Evita problemas de cross-domain con JQuery jQuery.cors = true.com/Articles/12816/JavaScript-SOAP-Client Esto es todo. status) { //Aquí mostramos el valor que aparece en la etiqueta "PrimerNombre" del cuer alert($(data). error) //Función que se ejecuta si ocurre algún e { alert(status). } //Función que se ejecuta si realizó completa la petición function OnSuccess(data. data: soapMessage.firefoxmania. en este caso utilizaré internet explorer para que no aparezcan errores cross-domain.uci. Uno de los problemas es que los servicios sean publicados bajo conexiones seguras (https).net/articoli/javascript-soap-client/demo/en.¿Cómo consumir servicios web usando JavaScript? | Desarrollo Mozilla. status.. return false. }). } function OnError(request. Si el navegador no tiene el sitio como un lugar seguro y no reconoce su certificado (algo bastante usual en la UCI).text()).firefoxmania.find("PrimerNombre").codeproject. contentType: "text/xml".cu/cuentafox/ http://addons. error: OnError }).aspx http://www.. cache: false. type: "POST".

cuando hago la peticion por segunda vez me devuelve el mismo objeto ajax.. 2013 a las 10:45 am Se más específico.¿Cómo consumir servicios web usando JavaScript? | Desarrollo Mozilla. aun cuando le puse cache: false. Recuerda que firefox y chrome no permiten peticiones crossdomain.org/server..uci. enero 23. Aclarar que lo que me devuelve es un xml… alguien me puede ayudar??. 2013 a las 12:01 pm Las imágenes no se ven. Saludos Responder Carlos dice: marzo 16. 4 of 6 Abraham dice: http://developer.html http://enable-cors..prod. 2013 a las 7:05 pm En que navegador lo estas probando?? Responder Arthur dice: mayo 9. 2013 a las 1:34 pm Tengo un problema. navegador. 2013 a las 6:46 pm Me sale este error a poner el wsdl An error has occured while parsing. Sistema operativo. Gracias Responder Osvaldo dice: enero 26. Responder Bárbaro Javier dice: enero 23. y si es posible el código que escribistes. 2013 a las 1:13 pm Ya ha sido arreglado. 2013 a las 1:36 pm Dame más detalle.uci. que error te dá. no de servidor).uci. dice: febrero 27.cu.. 2013 a las 1:52 am Creo que este post esta bastante interesante!!!!! y aplicable dentro de la UCI Responder JM dice: enero 28. 2014 a las 3:43 pm 8/15/2016 11:35 AM .org/client. Adiós a jsonp. el servicio . En un addon de firefox o que? Responder Felix A.prod.firefoxmania.cu/2013/01/21/como-consumir-servici. 2013 a las 12:08 am Repetido de http://blogs. 2013 a las 2:29 pm Donde lo estas probando?. Responder abraham dice: enero 28. 2013 a las 2:51 pm Tienes razón el problema es que lo estba ejecutando con chrome Responder AndyT dice: enero 23. SAludos Responder mayo 30.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.gracias de antemano. Responder abraham dice: enero 23.cu/desarrolloSOA/2012/11/como-consumir-servicios-web-usandojavascript/ Soporte para Cross-Origin Resource Sharing (cors): http://enable-cors. 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. Están apuntando a blogs. Es un addon o una app. Responder abraham dice: mayo 10. como si se estuviera guardando en la cache.. ¿Pueden cambiar los links para poder verlas desde fuera de la UCI? Saludos.

Plis algo de ayuda. Responder Nombre (requerido) Mail (no será publicado) (requerido) Sitio Web Enviar Comentario ¿Eres humano? Entonces resuelve esta operación: * siete     seis  =  F M C C F D -T F G -T M -T 900 8/15/2016 11:35 AM . 2014 a las 8:35 pm Carlos dice: SU URL CODIFIQUENLA Y ASÍ FUNCIONARÁ. Responder diciembre 7.. Sabes a que se pueda deber este comportamiento?.¿Cómo consumir servicios web usando JavaScript? | Desarrollo Mozilla.firefoxmania.. que puedo hacer para que me traiga la información esperada?. 2014 a las 8:41 pm cristian dice: Hola. Estoy desarrollando una webservice soap con symfony. 2014 a las 11:39 am yoli dice: A mi me pasa lo mismo. gracias. el data que trae. Alguien le paso lo mismo? o alguien ya logro mostrar datos? Responder julio 2. Me sale el mensaje de error.. pero no he podido mostrar los datos consultados en pantalla con HTML.. LES DEJO UNA PAGINA DONDE PUEDEN HACER ESO… C: http://meyerweb. 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. pareciera que me trajera todo el wsdl sin procesarlo sin llamar al método que yo le especifico con el soapMessage.com/eric/tools/dencoder/ Responder septiembre 27. cuando le doy click al botón de enviar no hace nada. es una conexión a un WSDL pero código no funciona. alguien que me ayude por favor. estoy probandolo en moxilla firefox. pero cuando intento hacerlo con la petición ajax al imprimir data. cuando lo pruebo con el addon de firefox funciona perfectamente y muestra la información programada. no he podido tener control de los datos que trae.uci. Pudiste resolverlo? Responder diciembre 15. 2014 a las 4:03 pm Carlos dice: Yo estoy haciendo algo parecido. jorge olaya dice:Aparetnetemente me funciona porque no genera el error. 5 of 6 http://developer. Responder diciembre 15. viene con codigo y datos.cu/2013/01/21/como-consumir-servici.

6 of 6 http://developer. 2016 8/15/2016 11:35 AM ..cu/2013/01/21/como-consumir-servici.firefoxmania..uci.¿Cómo consumir servicios web usando JavaScript? | Desarrollo Mozilla... Desarrollo Mozilla Cuba © Firefoxmanía.