La secuencia de llamados es la siguiente.
[1] Un botón en una página HTML ejecuta a una función JavaScript según la especificación del manejo de su evento OnClick.
[2] La función (Manejador de Acción en el diagrama) especifica el URL del PHP a ejecutarse, el método de envío de parámetros (POST o GET), prepara los parámetros necesarios (mensaje en formato GET) y determina cuales funciones JavaScript deberán ejecutarse en el caso en que la ejecución del programa PHP envíe la señal de que ha terminado exitosamente o que ha fracasado.
[3] El programa PHP (Implementación) es ejecutado previo envío de los parámetros con la información necesaria para su ejecución. La aplicación ejecutada puede tomar ventaja de todas las facilidades que el lenguaje nativo ofrece, incluyendo el acceso a bases de datos.
El programa PHP envía a la salida estándar la información que requiere enviar como respuesta al procedimiento AJAX que inicio su ejecución. Además puede indicar su estado de éxito o de fracaso manipulando los códigos HTTP de respuesta (2xx es éxito, cualquier otro es fracaso). En PHP esto se realiza utilizando la función header con la información apropiada. Su llamado debe ser previo a cualquier envío de información (echo, printf, etc.) por parte de código PHP. Si nose especifica ninguna respuesta, se asume la 200 (éxito).
[4] Según la respuesta obtenida por la aplicación PHP se ejecuta la función JavaScript Manejador de Éxito o Manejador de Fracaso según se especificó en la definición del Manejador de Acción.
Estas funciones tienen acceso a la información producida por la aplicación PHP y por el código de respuesta de la misma a través de las siguientes funciones.
- xmlHttpRequest.responseText: Información suministrada por la aplicación PHP.
- xmlHttpRequest.responseXML: Igual que responseText representando la respuesta en una estructura XML.
- xmlHttpRequest.statusText: Código de respuesta de la aplicación PHP.
- xmlHttpRequest.statusText: Información del código de respuesta de la aplicación PHP.
La ejecución de las funciones mencionadas determina la actualización de la interfaz de usuario (HTML) según la respuesta obtenida.
A continuación se describen los procedimientos y código fuente requerido para realizar las funciones de búsqueda, inserción y listado de registros.
* Búsqueda de registros.
[1] El botón b_buscar del formulario myForm ejecuta la función buscar cuando su evento OnClick es lanzado. La función mencionada recibe como parámetro el documento del registro a buscar.
[2] La función JavaScript buscar(doc) procesa la solicitud de la siguiente manera.
Crea una cadena con los datos requeridos para procesar correctamente la información (params).
Establece la ubicación (url) de la aplicación PHP a ejecutarse.
Establece el método (method) para transmitir esta información.
var params = "doc=" + doc;
var url = "buscar.php";
var method = "get";
Ejecuta el llamado a la aplicación utilizando los valores definidos anteriormente y definiendo las funciones doExitoBusqueda y doFracasoBusqueda para procesar los casos de éxito y fracaso respectivamente.
var ajax = new Ajax.Request (url,
{
method: method,
parameters: params,
onSuccess: doExitoBusqueda,
onFailure: doFracasoBusqueda
}
);
[3] En este momento la aplicación PHP, que será discutida posteriormente, es ejecutada.
En caso de que suceda algún tipo de error es enviado el mensaje 500 junto con un texto alusivo al error. En caso de éxito es enviado un mensaje 200, de igual manera se envía la información respuesta imprimiendo a esta a partir de echo.
[4] En caso de error se ejecuta la función doFracasoBusqueda que obtiene el mensaje asociado al error (xmlHttpRequest.statusText) y lo muestra en el campo dispuesto para tal fin, valiéndose de la función mostrarMensajeError.
Como el registro no pudo ser encontrado, la función limpia el valor de los campos nombres, apellidos e email el puede contener en ese momento valores imprecisos.
function doFracasoBusqueda(xmlHttpRequest, responseHeader)
{
mensaje = xmlHttpRequest.statusText;
mostrarMensajeError(mensaje, "error");
document.getElementById("t_nombres").value = "";
document.getElementById("t_apellidos").value = "";
document.getElementById("t_email").value = "";
}
En caso de éxito se ejecuta la función doExitoBusqueda que muestra un mensaje de estado informando al usuario del éxito de la búsqueda, convierte la información recibida de la ejecución de la aplicación PHP (xmlHttpRequest.responseText) que viene en formato JSON y la convierte utilizando el parser de Prototype (evalJSON) para convertirlo en una clase cuyos campos son ubicados en sus atributos. Esta información recibida es transmitida a los campos de texto correspondientes para ser presentados al usuario.
function doExitoBusqueda(xmlHttpRequest, responseHeader)
{
var response = xmlHttpRequest.responseText;
var mensaje = xmlHttpRequest.statusText;
mostrarMensajeError(mensaje, "exito");
var data = response.evalJSON();
document.getElementById("t_documento").value = data.documento;
document.getElementById("t_nombres").value = data.nombres;
document.getElementById("t_apellidos").value = data.apellidos;
document.getElementById("t_email").value = data.email;
}
* Inserción de registros.
[1] El botón b_agregar del formulario myForm ejecuta la función agregar cuando su evento OnClick es lanzado. La función mencionada recibe como parámetro la forma donde se encuentran ubicados los campos que contienen la información relativa al registro a insertar.
[2] La función JavaScript agregar(forma) procesa la solicitud de la siguiente manera.
Crea una cadena con los datos requeridos para procesar correctamente la información (params).
Establece la ubicación (url) de la aplicación PHP a ejecutarse.
Establece el método (method) para transmitir esta información.
var params = "doc=" + forma.t_documento.value +
"&nom=" + forma.t_nombres.value +
"&apl=" + forma.t_apellidos.value +
"&ema=" + forma.t_email.value;
var url = "agregar.php";
var method = "post";
Ejecuta el llamado a la aplicación utilizando los valores definidos anteriormente y definiendo las funciones doExitoAgregar y doFracasoAgregar para procesar los casos de éxito y fracaso respectivamente.
var ajax = new Ajax.Request (url,
{
method: method,
postBody: params,
onSuccess: doExitoAgregar,
onFailure: doFracasoAgregar
}
);
[3] En este momento la aplicación PHP, que será discutida posteriormente, es ejecutada.
[4] En caso de error se ejecuta la función doFracasoAgregar que obtiene el mensaje asociado al error y lo muestra en el campo dispuesto para tal fin, valiéndose de la función mostrarMensajeError.
function doFracasoAgregar(xmlHttpRequest, responseHeader)
{
mensaje = xmlHttpRequest.statusText;
mostrarMensajeError(mensaje, "error");
}
En caso de éxito se ejecuta la función doExitoAgregar que muestra un mensaje de estado informando al usuario del éxito del proceso de inserción.
function doExitoAgregar(xmlHttpRequest, responseHeader)
{
mensaje = xmlHttpRequest.statusText;
mostrarMensajeError(mensaje, "exito");
}
* Generar un listado de registros.
[1] El botón b_listar del formulario myForm ejecuta la función listar cuando su evento OnClick es lanzado.
[2] La función JavaScript listar() procesa la solicitud de la siguiente manera.
Determina a partir del estado de la variable global (mostrandoListado) si el listado se encuentra actualmente en pantalla (true) y en cuyo caso debe ocultarse o si por el contrario, el listado se encuentra oculto (false) y deberá presentarse al usuario.
En caso de requerirse que se oculte, el contenido del DIV con el identificador listado_registros es vaciado.
if (mostrandoListado)
{
mostrandoListado = false;
document.getElementById("listado_registros").innerHTML = "";
return;
}
En el caso contrario, cuando es necesario desplegar la lista de registro en la página, se realizan los siguientes pasos.
Establece la ubicación (url) de la aplicación PHP a ejecutarse.
Establece el método (method) para transmitir esta información.
mostrandoListado = true;
var url = "listar.php";
var method = "get";
Ejecuta el llamado a la aplicación especificando el DIV donde se mostrará la tabla (listado_registros), los valores definidos anteriormente y definiendo las funciones doExitoListar y doFracasoListar para procesar los casos de éxito y fracaso respectivamente.
var ajax = new Ajax.Updater ("listado_registros",
url,
{
method: method,
onSuccess: doExitoListar,
onFailure: doFracasoListar
}
);
En ambos casos se modifica el valor de la variable mostrandoListado a su negación para mantener sincronizado el sistema.
Nótese por favor que en este último caso se utilizo Ajax.Request en lugar de Ajax.Updater. La diferencia entre los dos radica en que el primero permite especificar que funciones JavaScript se deberán ejecutar según el éxito o el fracaso de la aplicación ejecutada, mientras que el segundo permite además especificar el id de un DIV al cual se redireccionará automáticamente la información recibida de parte de la aplicación PHP.
[3] En este momento la aplicación PHP, que será discutida posteriormente, es ejecutada.
[4] En caso de error se ejecuta la función doFracasoListar que obtiene el mensaje asociado al error y lo muestra en el campo dispuesto para tal fin, valiéndose de la función mostrarMensajeError.
function doFracasoListar(xmlHttpRequest, responseHeader)
{
mensaje = xmlHttpRequest.statusText;
mostrarMensajeError(mensaje, "error");
}
En caso de éxito se ejecuta la función doExitoListar que muestra un mensaje de estado informando al usuario del éxito de la presentación de la información.
function doExitoListar(xmlHttpRequest, responseHeader)
{
mensaje = xmlHttpRequest.statusText;
mostrarMensajeError(mensaje, "exito");
}
Como última etapa del desarrollo de la aplicación, se deberá continuar con la especificación de las aplicaciones PHP (buscar.php, agregar.php y listar.php) las cuales son las responsables realmente de procesar la información por solicitud del usuario y de recuperarla o en la base de datos según se requiera.
Tags: AJAX, PHP, Prototype, Sqlite
Loading ...
