Oracle APEX siempre ha sido una herramienta amigable que nos permite crear aplicaciones a una gran velocidad, comparado al tiempo que duramos desarrollando en los lenguajes tradicionales, sin embargo, en algunas ocasiones podemos ver tiempos de respuesta largos o que no suceden al instante, es por ello que hoy hablaremos de AJAX una forma de realizar solicitudes instantáneamente al servidor sin que el cliente perciba tiempos de carga.
AJAX nos permite ejecutar solicitudes y procesos asincrónicos, de manera que podemos realizar muchas tareas a la vez sin la necesidad de refrescar la página.
AJAX Callback
Lo primero que debemos aprender para implementar AJAX en Oracle APEX, es cómo crear un proceso AJAX Callback, estos procesos pueden ser globales para ser llamados por cualquier página en Oracle APEX o bien se pueden crear individualmente por cada página:
Cuando creamos un proceso AJAX Callback, debemos colocar nuestro código PL/SQL como cuando hacemos un proceso normal de CRUD en base de datos, con algunas diferencias:
Documentación del API JS: https://apex.oracle.com/jsapi
Envío de parámetros:
Cuando hacemos un select, update, insert o delete en la base de datos, debemos enviar los parámetros correspondientes dependiendo el proceso, AJAX nos permite enviar parámetros de 3 diferentes formas:
1. pageItems: Enviamos el identificador de un ítem de la página – Ej: #P2_ID_PRODUCTO
Este tipo de envío se utiliza por lo general en procesos AJAX Callback creados en una página específica y no globalmente, ya que el nombre del ID que se recibe debe ser el mismo al que se ejecuta en al consulta, en este caso :P2_ID_PRODUCTO
2. x01 a x20: El api nos permite enviar un máximo de 20 variables que serán leídas utilizando la siguiente palabra reservada: apex_application.g_x01
3. f01 to f20: Si 20 variables x01 a x20 no son suficientes para el envío de parámetros, las variables f01 a f20, nos permite enviar arreglos.
Código en proceso AJAX Callback
Crearemos un proceso llamado llamaProductos, cuando creamos un proceso AJAX Callback, la respuesta al frontend la realizaremos utilizando un objeto de tipo json para facilitar la lectura y el procesamiento de los datos:
declare
nombre VARCHAR(45);
descrip VARCHAR(100);
begin
SELECT NOMBRE, DESCRIPCION INTO nombre,descrip
FROM PRODUCTO
WHERE ID_PRODUCTO = apex_application.g_x01; --Definimos la variable que leeremos ya sea un item o x01-x20
apex_json.open_object; --Abrimos el objeto -- {
apex_json.write(
p_name => 'Estado',
p_value => 1
);
apex_json.write(
p_name => 'nombre',
p_value => nombre
);
apex_json.write(
p_name => 'descripcion',
p_value => descrip
);
apex_json.close_object; --Cerramos el objeto -- }
exception when no_data_found then
apex_json.open_object; --Abrimos el objeto -- {
apex_json.write(
p_name => 'Estado',
p_value => 0
);
apex_json.write(
p_name => 'Mensaje',
p_value => 'Dato no encontrado'
);
apex_json.close_object; --Cerramos el objeto -- }
end;El json envía un campo de tipo Estado para verificar cuando la respuesta es correcta o se presentó un error, devolviendo 1 si es correcta o 0 si no se encontró el dato.
Leeremos un json con el siguiente formato:
{
"Estado":1,
"nombre":"Pollo",
"descripcion": "Asado"
}Llamada de un proceso AJAX Callback desde el frontend
Ahora, en nuestro frontend crearemos un botón para llamar el proceso AJAX Callback, con una acción dinámica que ejecute código javascript:
Para llamar el proceso AJAX Callback utilizaremos apex.server.process con la siguiente sintaxis:
apex.server.process( "llamaProductos", {
x01: $v("P2_ID_PRODUCTO"), //Envío de parámetro con x01
pageItems: "#P2_ID_PRODUCTO" //Envío de parámetro con pageItems
}, {
success: function( data ) {
// Lógica para procesar el jso entrante
},
error: function( jqXHR, textStatus, errorThrown ) {
// Lógica para procesar errores
}
} );Nota: Para saber más sobre apex.server.process, podemos visitar la documentación en https://apex.oracle.com/jsapi
Para este ejemplo hice el siguiente procesamiento:
//Debemos ser cuidadosos y colocar el nombre del proceso AJAX Callback exactamente igual al nombre que creamos
apex.server.process("llamaProductos",
{
x01: $v("P2_ID_PRODUCTO")
},
{
success: function (datos) {
if(datos.Estado == 1){
$s("P2_NOMBRE",datos.nombre);
$s("P2_DESCRIPCION",datos.descripcion);
apex.message.showPageSuccess("Datos cargados!");
apex.message.clearErrors();
}else{
apex.message.clearErrors();
apex.message.showErrors({
type: "errors",
location: "page",
message: "Dato no existe",
unsafe: false
});
}
}
}
);Guardo la pantalla y ejecuto la consulta:
Tengo un select list con la lista de los productos cargados en mi tabla, al presionar el botón se deberá ejecutar el procesamiento y traerme los datos del nombre y la descripción del producto, además de mostrarme un mensaje diciendo Datos cargados!, según la lógica del frontend:
Si envío el dato nulo al no seleccionar ningún producto, me devolverá el mensaje de error:
De esta manera podemos implementar AJAX en nuestras solicitudes en Oracle APEX, esto se puede implementar para realizar todo el CRUD o cualquier otro procesamiento que requiera ejecutar código del lado del servidor utilizando los AJAX Callback.