Uso de Ajax con servicios web

Combinar dos tecnologías de punta es más sencillo de lo que usted piensa

Brian Carey
Publicado en 03-08-2011

¿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 elementositemRecuerde 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®.