HCL Commerce Infraestructura AJAX

La infraestructura AJAX de HCL Commerce es una extensión de la infraestructura AJAX de jQuery. Proporciona una infraestructura de fácil uso que cumple con la mayoría de los requisitos AJAX para el desarrollo de escaparates, y oculta parte de los códigos repetitivos y complejos que a menudo se encuentra un desarrollador de escaparates.

Hay cuatro escenarios comunes implicados en la infraestructura de HCL Commerce AJAX:

Se realiza una llamada AJAX al Transaction server para actualizar un objeto de negocio. Las secciones de la página se renuevan con contenido nuevo si la actualización es satisfactoria. El nuevo contenido se recupera utilizando llamadas AJAX subsiguientes al Transaction server.
Se realiza una llamada AJAX para renovar una sección de la página a causa de determinadas interacciones del cliente.
Se realiza una llamada AJAX al Transaction server para actualizar un objeto de negocio. Las secciones de la página deben renovarse con contenido nuevo si la actualización es satisfactoria. El nuevo contenido se recupera utilizando llamadas AJAX subsiguientes al Transaction server. El proceso es el mismo que el primer escenario, pero, en lugar de realizar el código modular, se prefiere un método con menos tráfico en el servidor.
En este escenario, se realiza una llamada AJAX al servidor HCL Commerce para actualizar un objeto de negocio. Las secciones de la página se renuevan con contenido nuevo si la actualización es satisfactoria. Toda la información relevante para renovar el contenido de la página se devuelve en forma de objeto JSON. A continuación, el cliente tiene el contenido del objeto JSON. El cliente utiliza la API de manipulación de DOM para modificar todas las áreas de la página que debe cambiar como resultado de la actualización satisfactoria.
Se realiza una llamada AJAX al Transaction server y se solicitan datos JSON. Las secciones de la página se actualizan utilizando la API de manipulación DOM y JavaScript.

La infraestructura AJAX de HCL Commerce no es necesaria para el tercer y el cuarto escenario, ya que estos pueden llevarse a cabo directamente al utilizar la API de AJAX de jQuery.

Importante: Evite hacer llamadas Ajax simultáneas para los mandatos. En concreto, evite las llamadas simultáneas que convierten un usuario genérico en un nuevo usuario invitado con una señal de actividad del usuario. Las llamadas simultáneas generan varias señales de actividad de usuario en la sesión, lo cual produce resultados no deseados.

Puede realizar llamadas Ajax simultáneas para vistas.

Caso de ejemplo 1: Actualizar un objeto de negocio en HCL Commerce mediante AJAX, y luego renovar varias áreas utilizando solicitudes AJAX subsiguientes para obtener los contenidos renovados

Hay dos partes en este escenario:

Se realiza una llamada AJAX a un mandato de controlador de HCL Commerce o a un servicio HCL Commerce para actualizar un objeto de negocio (o varios objetos de negocio).
Se realizan solicitudes get (obtención) de AJAX posteriores a las vistas de HCL Commerce para recuperar los nuevos contenidos de HTML para cada área si la actualización es satisfactoria.

Los dos diagramas siguientes muestran las interacciones que tienen lugar entre el cliente y el servidor HCL Commerce en este escenario:

Diagrama de interacciones al llamar a mandatos de controlador de HCL Commerce:

Diagrama de interacciones al llamar a mandatos del controlador de HCL Commerce

Diagrama de interacciones al llamar a servicios de HCL Commerce :

Diagrama de interacciones al llamar los servicios de HCL Commerce

1. Realizar una llamada AJAX a un servicio o mandato de controlador de HCL Commerce

Antes de que el cliente pueda llamar a un servicio o mandato de controlador de HCL Commerce utilizando AJAX, el Transaction server debe definir que el servicio o el mandato de controlador puedan llamarse utilizando AJAX (en lugar del modelo de programación tradicional donde se realiza una solicitud y supone una nueva redirección del tiempo de ejecución de HCL Commerce).

Para definir que un servicio o un mandato de controlador estén disponibles para solicitudes de tipo AJAX, basta con definir una nueva entrada de acción struts en el archivo XML struts-config que identifique al servicio o comando de controlador como un tipo de acción AJAX. Por ejemplo, para crear una nueva acción struts para el mandato de controlador InterestItemAdd que pueda llamarse utilizando AJAX, debe estar definido en el archivo XML de configuración de struts:

Figura 1. Mandatos:

<action
  parameter="com.ibm.commerce.interestitems.commands.InterestItemAddCmd"
  path="/AjaxInterestItemAdd"
  type="com.ibm.commerce.struts.AjaxAction">
    <set-property property="authenticate" value="0:0"/>
    <set-property property="https" value="0:1"/>
</action>

<action class="com.ibm.commerce.struts.v2.AjaxAction" name="AjaxInterestItemAdd">
<param name="authenticate">0:0</param>
<param name="https">0:1</param>
<param name="parameter">com.ibm.commerce.interestitems.commands.InterestItemAddCmd</param>
</action>

Figura 2. Servicios:

<action 
  parameter="order.addOrderItem" 
  path="/AjaxOrderChangeServiceItemAdd" type="com.ibm.commerce.struts.AjaxComponentServiceAction">
    <set-property property="authenticate" value="0:0"/>
    <set-property property="https" value="0:1"/>
</action>

<action class="com.ibm.commerce.struts.v2.AjaxComponentServiceAction" name="AjaxOrderChangeServiceItemAdd">
<param name="authenticate">0:0</param>
<param name="https">0:1</param>
<param name="parameter">order.addOrderItem</param>
</action>

La característica de un URL de tipo AjaxAction radica en que después de la ejecución del mandato o servicio, el tiempo de ejecución de HCL Commerce dirige automáticamente una solicitud a una entre dos vistas conocidas para componer un objeto JSON que contenga todas las entradas de la respuesta y remitirlas al cliente. Las dos vistas conocidas se correlacionan con estos archivos JSP

WC_eardir/Stores.war/AjaxActionResponse.jsp(caso de éxito)
WC_eardir/Stores.war/AjaxActionErrorResponse.jsp (caso de fallo)
workspace_dir/Stores/WebContent/AjaxActionResponse.jsp
workspace_dir/Stores/WebContent/AjaxActionErrorResponse.jsp

Ahora que ya ha definido las acciones struts de AJAX, la API wcService.declare se utiliza en el código JavaScript para definir un servicio en cada uno de los URL requeridos que se llaman en la página. La API wcService.declare declara un objeto de servicio JavaScript que puede llamar a acciones struts de tipo AJAX de HCL Commerce. De esta forma el cliente tiene el control sobre cuándo ejecutar la llamada AJAX. Por ejemplo, el siguiente código JavaScript en el cliente define un objeto de servicio para llamar a InterestItemAdd utilizando AJAX:

wcService.declare({
  id: "AjaxInterestItemAdd",
  actionId: " AjaxInterestItemAdd",
  url: " AjaxInterestItemAdd",
  formId: "",
successHandler: function(serviceResponse) {
      alert("success");	
    },
failureHandler: function(serviceResponse) {
    if (serviceResponse.errorMessage) {
      alert(serviceResponse.errorMessage);
    }
  } 
});

La definición simplemente define un objeto, pero no desencadena la llamada AJAX al servidor HCL Commerce. Para invocar la llamada AJAX, se utiliza la API siguiente:


  wcService.invoke("AjaxInterestItemAdd");

La función successHandler que se define en la declaración del servicio se ejecuta y si la solicitud se completa satisfactoriamente, se publicará un evento con el actionId del servicio. Para obtener más información sobre los oyentes de suscripción y publicación, consulte los detalles en wcTopic.

2. Realizar llamadas AJAX a vistas de HCL Commerce para obtener contenidos renovados

La infraestructura AJAX de HCL Commerce proporciona un objeto JavaScript denominado WCRefreshController. Cualquier elemento HTML de una página puede designarse como un área de renovación. El contenido del código HTML se sustituye por contenido nuevo desde el servidor HCL Commerce siempre que el controlador de renovación asociado con el área de renovación desencadene una solicitud de renovación. Este código de ejemplo define un área de renovación en la página:


<div wcType="RefreshArea"
   id="WishlistSelect_Widget" 
   declareFunction="declareRefreshArea()"
   refreshurl="<c:out value="${WishListSelectAreaView}"/>">
</div>

En el HTML donde se define el área de renovación, debe especificar un atributo wcType con el valor "RefreshArea". También hay un segundo atributo obligatorio denominado declareFunction que especifica dónde se define el controlador de renovación en el atributo declareFunction. Es importante reconocer el URL que define el URL del servidor refreshurl para llamar y obtener los nuevos contenidos HTML del área de renovación a la que el controlador de renovación está asociado. Los controladores de renovación se registran automáticamente para escuchar los sucesos modelChanged y renderContextChanged. Por lo tanto, se les notifica cuando se producen estos sucesos. A continuación evalúan los cambios de modelo y/o los cambios de contexto de representación y deciden si las áreas de renovación que gestiona deben renovarse o no. El código de ejemplo siguiente muestra cómo definir un controlador de renovación:


function declareRefreshArea () {
   var myWidgetObj = $("#WishlistSelect_Widget")
   var myRCProperties = wcRenderContext.getRenderContextProperties("WishlistSelect_Context");
   
   var renderContextChangedHandler = function() {
   };

   // model change
   wcTopic.subscribe(order_updated, function() {
   myWidgetObj.refreshWidget("refresh", myRCProperties);
   });

   // post refresh handler
   var postRefreshHandler = function() {
   };

   // initialize widget with properties
   $("#"+divId).refreshWidget({
      renderContextChangedHandler: renderContextChangedHandler,
      postRefreshHandler: postRefreshHandler
   });

}

La infraestructura AJAX de HCL Commerce ejecuta la función wcTopic.subscribe tan pronto haya un evento de publicación que se desencadene por las acciones de wcService.invoke(). La función wcTopic.subscribe escucha los cambios de un actionId específico que es de interés para el área de actualización. El widget de actualización ("refresh") es el código que hace una llamada AJAX a la Transaction server para la URL especificada en el controlador de actualización. Una vez que el nuevo fragmento de HTML vuelve del servidor, la infraestructura destruye todo lo que existe en el área de renovación actual y sustituye el contenido por el nuevo fragmento de HTML que devuelve la vista.

Otra función útil es la función postRefreshHandler del controlador de renovación, puesto que es la última función a la que llama la infraestructura después de que se renueva satisfactoriamente un área de renovación con contenido nuevo. Puede utilizarse para desbloquear la interfaz de usuario si se había bloqueado durante las llamadas AJAX.

Nota: Si no se utiliza el contexto de representación, no es necesario definirlo.

Caso de ejemplo 2: Actualizar un área de la página con una petición AJAX para obtener los contenidos de actualización

Las áreas de la página deben renovarse con contenido nuevo cuando los usuarios interactúan con la interfaz de usuario. Este escenario utiliza la API de contexto de representación, área de renovación y controladores de renovación desde la infraestructura AJAX de HCL Commerce.

Un objeto de contexto de representación hace un seguimiento de la información contextual del cliente y puede desencadenar sucesos renderContextChanged cuando se producen actualizaciones en cualquiera de las propiedades del objeto de contexto de representación. Los controles de renovación se registran automáticamente para escuchar a todos los sucesos renderContextChanged. La lógica del controlador de renovación determina si el cambio de contexto puede desencadenar una actualización de un widget de área de renovación. Por consiguiente, en el renderContextChangedHandler del controlador de renovación, la API se utiliza para comparar las propiedades de contexto testForChangedRC para determinar si la propiedad de contexto ha cambiado y desencadenar la renovación del área de renovación.

Caso de ejemplo 3: Actualizar un objeto de negocio en HCL Commerce utilizando AJAX y devolviendo toda la información de actualización relevante mediante JSON

Este escenario puede alcanzarse al utilizar directamente la API jQuery. Por lo tanto, no hay necesidad de utilizar la infraestructura AJAX de HCL Commerce si este escenario tiene un interés relevante. La dojo.xhrPost API se utiliza juntamente con el modelo de programación convencional de tiempo de ejecución de HCL Commerce donde se realiza una solicitud a un mandato de controlador o a un servicio, y después de la ejecución, el tiempo de ejecución de HCL Commerce redirige una solicitud a lo que se haya especificado en el URL o en los parámetros errorViewName de una solicitud original. Por ejemplo,

var parameters = {};
  parameters.storeId = storeId;
  parameters.langId=langId;
  parameters.catalogId=catalogId;
  parameters.catentryId=productId;	
  parameters.URL="MiniCartContentsJSON";
parameters.errorViewName="MiniCartContentsJSON";
  $.ajax({
    url: "OrderChangeServiceItemAdd",
    method: "post",				
    dataType: "json",
    data: parameters,
    success: refreshMiniCart,
    error: function(jqXHR,textStatus, err) {
    }
  });

Este fragmento de código realiza una solicitud AJAX al servicio OrderChangeServiceItemAdd y luego la redirige a la vista MiniCartContentsJSON, que se correlaciona con un archivo JSP que crea un objeto JSON con su contenido. En este escenario, se presupone que el mismo archivo JSP maneja el escenario del error mientras se define errorViewName en la misma vista MiniCartContentsJSON. El cliente recupera entonces el control y se llama a la función de carga o de error dependiendo del éxito o del fracaso que se haya producido respectivamente.

Nota: Solo se llama al escenario del error cuando existen dificultades a la hora de comunicarse con el Transaction server. De lo contrario, una acción exitosa o una excepción del código de HCL Commerce ejecuta la función de carga. La función de carga determina, desde el objeto JSON, si una solicitud ha sido satisfactoria o ha fallado.

La función de carga utiliza el objeto JSON y la API de manipulación DOM para sustituir todos los elementos de la página que deben actualizarse con nuevos datos, resultado de la actualización del servidor. No es necesario que los URL estén registrados como AjaxAction, puesto que este escenario no utiliza ninguna infraestructura AJAX nueva de HCL Commerce.

Caso de ejemplo 4: Llamar a Transaction server utilizando AJAX para recopilar datos nuevos en forma de objeto JSON y actualizando el contenido de la página

Este escenario puede alcanzarse al utilizar directamente la API jQuery. Por lo tanto, no hay necesidad de utilizar la infraestructura AJAX de HCL Commerce si este escenario tiene un interés relevante. La API de jQuery se utiliza con el modelo de programación convencional de tiempo de ejecución de HCL Commerce donde se realiza una solicitud a una vista que se correlaciona a un archivo JSP que crea un objeto JSON. En la función de carga de la API xhrPost, se utiliza la API de manipulación de DOM para colocar el contenido de JSON en los elementos de la página web.