Contenido
Uso de Ajax con servicios web
Combinar dos tecnologías de punta es más sencillo de lo que usted piensa
¿Qué es un servicio web?
Un servicio web es una manera de exponer funciones de aplicaciones usando la red mundial. Esto se logra utilizando protocolos abiertos, de manera que cualquier aplicación con acceso a la Web que los consuma también pueda acceder a un servicio web.
La típica interacción de servicios web consiste en un consumidor (la aplicación remota que utiliza el servicio web) que envía un mensaje en XML al servicio. Entonces, el servicio analiza el mensaje y devuelve una respuesta, también en formato XML. Luego, el consumidor analiza la respuesta y, en cierta manera, usa la información recuperada del servicio.
Con frecuencia, el lenguaje XML que se usa en los servicios web es SOAP. Originalmente, SOAP era la sigla de Simple Object Access Protocol (Protocolo de acceso a objetos simples), pero por algún motive esto ya no es así. El protocolo consta de tres partes: el sobre, las reglas de tipos de datos, y un medio para definir las solicitudes y las respuestas de la operación.
Los servicios web se definen con otro documento XML, conocido como web Services Description Language (WSDL). WSDL especifica las operaciones que quedan expuestas al usar el servicio web, las definiciones de tipos de datos usadas por las operaciones, el protocolo utilizado para la comunicación con el servicio web, y la ubicación del propio servicio web.
La ventaja de los servicios web es que permiten que aplicaciones escritas en diferentes lenguajes de programación e implantadas en diferentes plataformas se comuniquen entre sí en el amplio radio de acción de Internet.
¿Qué es Ajax?
Ajax es una de las más recientes tecnologías de vanguardia que usan los desarrolladores Web para permitir presentaciones de clientes ricos. Lo logra al permitir la invocación de una nueva solicitud sin interrumpir la vista actual. Se devuelve un documento XML que luego se muestra al usuario, con frecuencia como una página secundaria dentro de la presentación actual. En suma, Ajax le brinda el beneficio de contar con contenidos dinámicos del lado del servidor que se ven como contenidos dinámicos del lado del cliente.
Ajax por lo general satisface sus obligaciones mediante el uso de una API DOM de
XMLHttpRequest que, hasta el advenimiento of Ajax, rara vez era utilizada por los
desarrolladores Web. La propia solicitud puede ser una de las dos variedades GET
o POST
.
Al igual que con cualquier otra solicitud, se devuelve una respuesta, que puede ser de error. Si la respuesta no es un error, el texto real de la respuesta se usa para actualizar la vista actual.
Recordando una famosa frase de Voltaire (a saber, "el sacro imperio romano no era ni sacro, ni romano, ni imperio"), si se investigan en profundidad diversas implementaciones de Ajax se descubrirá que Ajax no requiere código JavaScript, ni XML, y no necesita ser asincrónica. Luego de quitar todos estos elementos, la única parte que queda de la sigla es la conjunción (and [y]). Pero como la sigla suena bien, la industria ha decidido conservarla.
De qué manera encajan Ajax y los servicios web
Piénselo de esta manera: una experiencia de un cliente rico combinada con servicios que son accesibles desde cualquier lugar en Internet. Y si…es muy bueno.
Como usted ha visto, Ajax ejecuta una solicitud de manera oculta, y por lo general escupe la respuesta (o parte de ella) nuevamente a la página Web sin requerir la actualización de toda la página. Ahora, si bien esta solicitud puede ser una simple solicitud HTTP, también puede ser un mensaje SOA enviado a un servicio web expuesto. El lado JavaScript de la rutina Ajax puede entonces analizar la respuesta (también en formato SOAP) y extraer los datos necesarios que se devuelven a la aplicación y se presentan al usuario.
Es así de sencillo.
Requerimientos de negocios para fishinhole.com
El directorio de fishinhole.com desea que usted haga que el inventario de la empresa sea más accesible a otras aplicaciones Web. Creen que si otros sitios Web, incluyendo los foros y blogs de pesca deportiva, e incluso los minoristas en competencia, pueden acceder fácilmente a la lista del inventario de fishinhole.com, aumentarán las ventas en un 23,7%.
Usted se resiste a la tentación de ponderar cómo es que llegaron a la cifra de 23,7%,
y en cambio, se centra en cómo hacer para exponer el inventario a otras aplicaciones
Web. No le lleva mucho tiempo llegar a la conclusión de que debe crear un servicio
web. El servicio web permite que los consumidores que llaman envíen un pedido del
inventario de señuelos en base al tipo de señuelos. Los tipos de señuelos
disponibles actualmente son Casting (Pesca con
anzuelo)
,Trolling (Pesca con redes)
y Other (Otros)
. Su servicio web devuelve una lista de
señuelos en base al tipo de señuelos que proporciona el consumidor.
Además, usted se da cuenta de que, por ahora, su empresa no tiene el tipo de señuelo
Other
. Deberá manejar este tema con elegancia en su
servicio web.
Cómo implantar un servicio web simple
Use PHP para crear el servicio web simple. PHP, junto con NuSOAP, constituye uno de los medios más sencillos que he visto para crear con rapidez un servicio web.
En primer lugar, asegúrese de capturar NuSOAP (ver Recursos), y coloque todos los archivos PHP en el mismo directorio donde se implantará su servicio web PHP.
Luego de haber instalado NuSOAP, es el momento de comenzar a escribir el propio servicio web. El Listado 1 incluye todo.
Listado 1. webservice.php
<?php require_once('nusoap.php'); $server = new soap_server; $server->register('hello'); $server->register('retrieveByType'); function hello($name) { return 'Hello, ' . $name; } function retrieveByType($type) { if ($type == 'trolling') { $arr[0] = 'Donzai Deep Swimmer 5 1/4 inch'; $arr[1] = 'Yosubi Squid-like 4 inch'; $arr[2] = 'Fortunata Imperial High Action'; } else if ($type == 'casting') { $arr[0] = 'Silver Spring Mirrors Size 00'; $arr[1] = 'Gold Spring Mirrors Size 0'; $arr[2] = 'Mini Minnow Blue'; } else { $arr[0] = 'None found!'; } return $arr; } $HTTP_RAW_POST_DATA = isset($HTTP_RAW_POST_DATA) ? $HTTP_RAW_POST_DATA : ''; $server->service($HTTP_RAW_POST_DATA); ?>
En primer lugar, observe la línea require_once('nusoap.php')
. Esta línea permite que la página Web PHP use
las clases definidas dentro de nusoap.php. Quizás se pregunte por qué son necesarios
todos los demás archivos PHP asociados con NuSOAP. Bien, el hecho es que nusoap.php
se basa en estos archivos de un modo muy similar al modo en que la página se basa en
nusoap.php.
La siguiente línea produce un objeto soap_server
. No es
sorpresa que esto le permite crear un servicio web que usa el protocolo SOAP.
La siguiente línea registra la función retrieveByType
de
manera tal que quede expuesta como una operación de servicio web. Si analiza el
código en profundidad, verá que existe una función definida denominada retrieveByType
. Por lo tanto, ¿por qué es necesario este
paso? Porque si usted no registra la función, es una simple función PHP disponible
sólo para esta página PHP o para otras páginas PHP que incluyan a la primera. De
modo que esta línea informa al objeto soap_server
que
usted expone esta función como una operación disponible a los consumidores del
servicio web.
El siguiente bloque de código es el que en realidad implementa el método retrieveByType
. Es una simple función PHP que acepta un
parámetro: type (tipo)
, que puede ser trolling
,casting
u other
. Como usted sabe, estos son los tres tipos de señuelos disponibles
para los clientes en fishinhole.com.
El método retrieveByType
devuelve un array, que consiste
en una lista de señuelos específicos para el tipo solicitado. En este momento,
existen tres tipos de señuelos disponibles para trolling
y tres tipos diferentes de señuelos disponibles para casting
. Observe que hay un "catch-all" que incluye Other
y cualquier otro tipo no reconocido. Para ellos, el servicio web
simplemente devuelve None Found!(No se ha encontrado
ninguno)
como único elemento del array.
Las últimas dos líneas se ejecutan cuando se accede al servicio web. La primera línea
verifica si existe algún datoPOST
. Si no es así, fija el
dato POST
en una cadena vacía. La segunda línea ejecuta
el servicio web con los datos de POST
. Los datos POST
contienen el mensaje SOAP. Podrá ver más acerca de
ello cuando examine al consumidor.
Guarde esta página como s webservice.php y colóquelo en el mismo directorio donde instaló NuSOAP. Es obvio que deberá colocar esta página en algún lugar que pueda procesar archivos PHP. La mayoría de las soluciones de hosting actualmente son compatibles con PHP, de manera que seguramente no tendrá inconveniente en encontrar uno si no tiene a mano un procesador de PHP.
Ahora, verifique rápidamente el servicio web accediendo a la siguiente URL:
http://yourhost/yourdirectory/webservice.php. Obviamente deberá sustituir el host
actual y el directorio donde usted colocó el archivo por yourhost
y yourdirectory
,
respectivamente.
La respuesta que obtenga deberá ser una respuesta SOAP (ver Listado 2). De lo contrario, su servicio web no estará funcionando adecuadamente.
Listado 2. Respuesta SOAP
<?xml version="1.0" encoding="ISO-8859-1" ?> <SOAP-ENV:Envelope SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/"> <SOAP-ENV:Body> <SOAP-ENV:Fault> <faultcode xsi:type="xsd:string">SOAP-ENV:Client</faultcode> <faultactor xsi:type="xsd:string" /> <faultstring xsi:type="xsd:string">method '' not defined in service</faultstring> <detail xsi:type="xsd:string" /> </SOAP-ENV:Fault> </SOAP-ENV:Body> </SOAP-ENV:Envelope>
Cómo escribir la página para accede al servicio web
Start Comience con el código JavaScript con el que se accede actualmente al servicio web, que se muestra en el Listado 3.
Listado 3.
Función JavaScriptinvokeService()
function invokeService(type) { soapMessage = '<?xml version="1.0" encoding="ISO-8859-1"?>'; soapMessage+='<SOAP-ENV:Envelope SOAP-ENV:encodingStyle=""'; soapMessage+=' xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"'; soapMessage+=' xmlns:xsd="http://www.w3.org/2001/XMLSchema"'; soapMessage+=' xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/">'; soapMessage+=' <SOAP-ENV:Body> <ns1:retrieveByType xmlns:ns1="http://fishinhole.com">'; soapMessage+=' <type xsi:type="xsd:string">' + type + '</type>'; soapMessage+=' </ns1:retrieveByType> </SOAP-ENV:Body> </SOAP-ENV:Envelope>'; if(window.XMLHttpRequest) { httpRequest=new XMLHttpRequest(); } else if (window.ActiveXObject) { httpRequest=new ActiveXObject("Microsoft.XMLHTTP"); } httpRequest.open("POST",url,true); if (httpRequest.overrideMimeType) { httpRequest.overrideMimeType("text/xml"); } httpRequest.onreadystatechange=populateDiv; httpRequest.setRequestHeader("Man", url + " HTTP/1.1") httpRequest.setRequestHeader("MessageType", "CALL"); httpRequest.setRequestHeader("Content-Type", "text/xml"); httpRequest.send(soapMessage); valTimeout=setTimeout("timeout(httpRequest);",120000); }
La función se denomina invokeService
y acepta un
parámetro: type
. No es necesario aclarar que corresponde
al parámetro type
aceptado por la operación del servicio
web (retrieveByType
). En otras palabras, el
parámetrotype
es una cadena que consiste en casting
, trolling
, u other
.
Las primeras líneas de la función ensamblan el mensaje SOAP. La descripción detallada
de las generalidades de SOAP se encuentra fuera del alcance de este. Sin embargo,
algunas partes del documento XML son bastante intuitivas. Observe que uno de los
elementos XML corresponde directamente al nombre de la operación (retrieveByType
). El elemento secundario de dicho elemento
se denomina según el nombre del parámetro especificado en el archivo webservice.php
(type
). Y el valor de dicho elemento es el parámetro
de la cadena que pasa a esta función JavaScript, también denominada type
.
Las siguientes líneas crean objetos de la solicitud compatibles con diversos navegadores. Este es el objeto que se usa para acceder al servicio web.
Una vez establecido el objeto de la solicitud, la función fija la función de
devolución de llamada, que es en este ejemplo, la función populateDiv()
Esta función es la que muestra la lista de inventario que
se devuelve en la página Web.
Luego la función establece el encabezado. En este punto, tiene especial interés el
hecho de que usted está estableciendo un tipo de contenido compatible con SOAP:
text/xml
. Además, observe el uso de la variable url
Cuando usted crea su propia página Web, debe configurar
esa variable en función de la URL usada por su servicio web. Se obtendrá algo
similar a: http://www.myhost/myservicedir/webservice.php.
Por último, usted deberá usar el objeto de la solicitud para enviar el mensaje SOAP y establecer un tiempo de espera en caso que el servicio no responda.
A continuación, observe el código JavaScript que responde a la invocación de Ajax y muestra el inventario, como se muestra en el Listado 4.
Listado 4.
Función JavaScript populateDiv()
function populateDiv(){ try { if(httpRequest.readyState==4) { if(httpRequest.status==200) { clearTimeout(valTimeout); var text = httpRequest.responseText; if (window.DOMParser) { parser=new DOMParser(); xmlDoc=parser.parseFromString(text,"text/xml"); } else { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(text); } var html = ""; for (i=0;i<xmlDoc.getElementsByTagName("item").length;i++) { html += "<br/>" + xmlDoc.getElementsByTagName("item")[i].childNodes[0].nodeValue; } var resultDiv=document.getElementById("resultDiv"); resultDiv.innerHTML = html; } } } catch(e) { alert("Error!"+e.description); } }
Las primeras dos líneas deberán ser conocidas para todas las personas que han usado Ajax. Recuerde que esta función se invoca cada vez que el objeto de la solicitud experimenta un cambio de estado. Aquí, vale la pena destacar cuando la solicitud devuelve una respuesta válida (código 200).
Cuando se devuelve la respuesta válida, usted limpia el tiempo de espera y toma el texto de la respuesta. Recuerde que el texto de la respuesta es en realidad una respuesta de SOAP, por lo cual está en formato XML. Esto significa que usted debe utilizar el lenguaje de programación JavaScript para analizar el XML para la información saliente.
Esto nos lleva a las siguientes líneas. Estas líneas ejemplifican un objeto del documento XML compatible con múltiples navegadores que puede será analizado en el lenguaje de programación JavaScript. Debido a que la respuesta de SOAP es un documento XML, la misma puede analizarse de la misma manera que cualquier otro documento XML.
A continuación, usted creará varios HTML. Comience con una cadena HTML vacía. Luego,
analice la respuesta de SOAP para buscar elementositem
Recuerde que el servicio web devuelve un array. Por lo tanto, es
probable que haya más de un elemento item
El bucle for
dice en esencia "para cada elemento item
, haga lo siguiente".
Lo "siguiente" es como se muestra a continuación: El código JavaScript toma el primer
elemento secundario del elemento item
En este caso, hay
solo un elemento secundario, que es una cadena simple. Luego, extrae el valor de
dicho elemento secundario, que es un artículo del inventario. Por motivos estéticos,
agrego al inicio una etiqueta <br/>
al
artículo del inventario. De esta manera, cada artículo de la lista se visualiza en
su propia línea. Por último, la línea completa se concatena con el HTML existente,
de manera que usted tendrá una lista completa cuando el bucle for
se haya completado.
Una vez que el HTML está completo, es el momento de colocarlo en la página. En este
caso, los contenidos del elemento div
denominado resultDiv
se encuentran sobrescritos con el HTML que usted
ha creado. El resultado es una lista de artículos de inventario que aparece en la
pantalla cuando el usuario seleccionar un Nuevo tipo en el casillero desplegable de
la página.
Hablando de HTML, observemos el HTML necesario para la verdadera página Web, que se muestra en el Listado 5.
Listado 5. HTML para el cliente
<body> <div style="position:relative;left:0px;background-color:blue;margin:0px;"> <h2 align="center"><font color="#ffffff">FishinHole.com Web Service</font></h2></div> <table align="center" cellpadding="6px" cellspacing="6px" width="400" border="0"> <tr> <td width="80" valign="center"><font color="black"> Lure Type:</font></td> <td> <select name="lureType" id="lureType" onchange="changeTypes()"> <option value="">-SELECT-</option> <option value="trolling">Trolling</option> <option value="casting">Casting</option> <option value="other">Other</option> </select> </td> <td width="150"> </td> <tr> <td colspan="3"> <div id="resultDiv"></div> </td> </tr> </table> </body>
Aquí no se observa nada que sea particularmente complicado. Usted tiene un simple
casillero desplegable con los tres tipos de señuelo: trolling, casting, y other. Yo
uso el atributo onchange
para que cuando el usuario
seleccione un nuevo tipo de señuelo, se ejecute automáticamente el código JavaScript
que invoca la solicitud Ajax.
Observe además que el elemento div resultDiv
está
presente. Aquí es donde aparece la lista del inventario.
Pruebas
Coloque la página HTML que usted acaba de crear en cualquier plataforma que interprete HTML y el código JavaScript. Si posee el sistema operativo Microsoft® Windows®, puede colocarla en el disco duro.
Luego, simplemente accede a la página Web. Usted deberá ver un menú desplegable en el centro de la pantalla. En este momento, el artículo seleccionado deberá ser -SELECT-. Simplemente, cámbielo a Trolling. Espere unos segundos y verá una lista de inventario de tres artículos en pantalla. ¡Felicitaciones! Su prueba ha sido un éxito
Si experimenta cualquier tipo de problemas, verifique la correcta configuración de la
variable url
. Además, es posible que el código JavaScript
informe una excepción en una ventana emergente. Esto le dará una pista sobre qué es
lo que no funciona correctamente.
Conclusión
Los servicios web constituyen un medio poderoso para exponer operaciones a personas con acceso a Internet. Ajax es un medio para brindar a los usuarios de aplicaciones Web una rica experiencia ya que permite cambiar la visualización sin actualizar la página. Usted podrá usar servicios web y Ajax de manera conjunta para crear una ponderosa aplicación Web que emula una aplicación de objetos distribuidos y presenta una interfaz profesional.
Recursos para Descargar
- PDF de este contenido
- The client-side HTML file used in this article (client.html_download.zip | 2KB)
- The Web service PHP file used in this article (webservice.php_download.zip | 1KB)
Temas relacionados
- Lea "Automate data entry with Web services and Ajax " [Automatice el ingreso de datos con servicios web y Ajax] (developerWorks, febrero de 2008) y descubra de qué manera un servicio web y Ajax pueden mejorar una aplicación.
- Visite el Centro de recursos Ajax de IBM developerWorks para conocer más sobre Ajax.
- Lea Introduction to NuSOAP [Introducción a NuSOAP] para conocer más acerca de NuSOAP.
- Conozca más sobre Análisis de XML en JavaScript.
- What are Web Services [Qué son los servicios web] ofrece una introducción a los servicios web.
- Obtenga NuSOAP - SOAP Toolkit for PHP [NuSOAP: kit de herramientas SOAP para PHP] en SourceForge.
- Descargue las versiones de evaluación de los productos IBM o explore las versiones de prueba online en la IBM SOA Sandbox y haga un uso práctico de las herramientas de desarrollo de aplicaciones y los productos de middleware de DB2®, Lotus®, Rational®, Tivoli® y WebSphere®.