Ejemplo 2 de Ajax con Prototype: implementando las acciones con AJAX (II)

Introducción.

En este capítulo final se va a realizar la implementación de las acciones que permanecen pendientes.

  • Editar a un contacto.
  • Remover a un contacto.

Estas acciones requieren que se haya realizado con anterioridad la implementación de la lista y la carga de contactos para que el usuario tenga la posibilidad de ver los contactos existentes en la base de datos y de seleccionar uno específico sobre el cual se va a ejecutar la acción elegida.

Estas acciones estan basadas en Ajax.Request motivo por el cual su implementación es muy similar a la acción de agregar contactos y carecen de aspectos particulares para destacar.

Editando contactos.

En el lado del cliente.

Se actualiza la implementación de la función JavaScript enEditarRegistro en la cual se realizan las siguientes actividades.

  • Verificar que el contenido del campo oculto que almacena el ID del contacto que se va a editar no se encuentre vacío.
    if($('tId').value.strip().length == 0)
    {
        alert('Para editar un registro primero debe seleccionarlo.');

        return false;
    }
  • Realizar la invocación del llamado asíncrono con las siguientes características.
  • Como parámetros se envían los campos del formulario.
  • Si la invocación asíncrona termina exitosamente se muestra un mensaje y se actualiza el listado de contactos registrados para que se reflejen los cambios.
  • Si la invocación termina de manera fallida se muestra un mensaje indicando el error.
    new Ajax.Request('editar.php',
    {
        method:     'post',

        parameters: $('formulario').serialize(true),

        onSuccess: function(transport)
        {
            ponMensajeBien('<b>' + transport.responseText + '</b>');

            enActualizarBusqueda(null);
        },

        onFailure: function(transport)
        {
            ponMensajeMal('<b>' + transport.responseText + '</b>');
        }
    });

    return true;

En el lado del servidor.

La implementación se realiza en el archivo editar.php que se ubica en el directorio raíz de la aplicación web en el cual se desarrollan las siguientes actividades.

  • Establecer la conexión con la base de datos.
include('config.php');
include_once('basededatos.php');
include_once('contacto.php');

$bd = new BaseDeDatos(BaseDeDatos::crearDSN($bdInfo));
  • Obtener la nueva información del contacto enviada por el cliente.
$tId          = filter_var($_POST['tId'],          FILTER_SANITIZE_STRING);
$tNombres     = filter_var($_POST['tNombres'],     FILTER_SANITIZE_STRING);
$tApellidos   = filter_var($_POST['tApellidos'],   FILTER_SANITIZE_STRING);
$tCorreo      = filter_var($_POST['tCorreo'],      FILTER_SANITIZE_EMAIL);
$tFNacimiento = filter_var($_POST['tFNacimiento'], FILTER_SANITIZE_STRING);
  • Crear una instancia de la clase Contacto con la información recién recibida y realizar la actualización del contacto a través de ella.
$contacto = new Contacto();

$contacto -> ponId($tId);
$contacto -> ponNombres($tNombres);
$contacto -> ponApellidos($tApellidos);
$contacto -> ponCorreo($tCorreo);
$contacto -> ponFechaDeNacimiento($tFNacimiento);

$control = $contacto -> editar($bd);

$bd -> desconectar();
  • Enviar al cliente el mensaje informativo y el código HTTP apropiado según el tipo de terminación del proceso.
if($control > 0)
{
    echo utf8_encode("Registro editado");

    header("Status: 200 OK", false, 200);
}
else
{
    echo utf8_encode("El registro no pudo ser editado, inténtelo nuevamente");

    header("Status: 400 Bad request", false, 400);
}

Removiendo contactos.

Nuevamente el procedimiento es similar al anterior, se utiliza Ajax.Request.

En el lado del cliente.

  • Verificar que el contenido del campo oculto que almacena el ID del contacto que se va a remover no se encuentre vacío.
    if($('tId').value.strip().length == 0)
    {
        alert('Para remover un registro primero debe seleccionarlo.');

        return false;
    }
  • Realizar la invocación asíncrona de la acción consultando al archivo remover.php.
    new Ajax.Request('remover.php',
    {
        method:     'post',

        parameters: $('formulario').serialize(true),

        onSuccess:  function(transport)
        {
            ponMensajeBien('<b>' + transport.responseText + '</b>');

            enActualizarBusqueda(null);
        },

        onFailure:  function(transport)
        {
            ponMensajeMal('<b>' + transport.responseText + '</b>');
        }
    });

    return true;

En el lado del servidor.

  • Establecer la conexión con la base de datos.
include('config.php');
include_once('basededatos.php');
include_once('contacto.php');

$bd = new BaseDeDatos(BaseDeDatos::crearDSN($bdInfo));
  • Obtener la información del contacto enviada por el cliente, es de particular interés la información del campo tId.
$tId = filter_var($_POST['tId'], FILTER_SANITIZE_STRING);
  • Crear una instancia de la clase Contacto con la información recién recibida y realizar la remoción del contacto a través de ella.
$contacto = new Contacto();

$contacto -> ponId($tId);

$control = $contacto -> remover($bd);

$bd -> desconectar();
  • Enviar al cliente el mensaje informativo y el código HTTP apropiado según el tipo de terminación del proceso.
if($control > 0)
{
    echo utf8_encode("Registro removido");

    header("Status: 200 OK", false, 200);
}
else
{
    echo utf8_encode("El registro no pudo ser removido, inténtelo nuevamente");

    header("Status: 400 Bad request", false, 400);
}

Conclusiones.

En los últimos dos capítulos se realiza la implementación de los llamados asíncronos desde la interfaz del usuario (navegador web) utilizando JavaScript que son respondidos por las acciones implementadas en PHP.

Las implementaciones de Ajax hace uso de sus tres presentaciones:

  1. Ajax.Request: útil para realizar el llamado asíncrono, recibir la información de respuesta y realizar cierto grado de procesamiento sobre ella.  Utilizado para agregar, editar y remover contactos.
  2. Ajax.Updater: es una facilidad basada en el tipo anterior.  Su utilidad radica en que el mismo framework se encarga de desplegar la información recibida como respuesta del servidor en el componente especificado de manera automática.  Utilizado para mostrar el listado de los contactos registrados en el sistema.
  3. Ajax.Request con JSON: el involucrar JSON como formato para la respuesta recibida del servidor le permite al cliente realizar fácilmente cualquier procesamiento o transformación de esta información ya que es inmediatamente convertida a un objeto JavaScript con todas las ventajas que esto proporciona.  Utilizado para mostrar la información (cargar) del contacto seleccionado por el usuario.

Enlaces.

8 thoughts on “Ejemplo 2 de Ajax con Prototype: implementando las acciones con AJAX (II)”

  1. Muy buenas tardes senio Jorge Ivan Meza me parece un muy buen aporte este articulo me gusto mucho y me ayudo bastante espero poder ver mas buenos articulos como este aca en su pagina web cuidese mucho y siga asi….. saludos dese lima – peru

  2. @Jaime, recibe un cordial saludo.

    Te agradezco el comentario y me alegro mucho que el artículo te haya sido de utilidad. Tengo en mente varios artículos y cursos para publicar próxmamente. Te invito a que visites mi blog en un futuro cercano para mas información.

  3. Muy interesante estoy entrando en el mundo de ajax especificamente con el framework Prototype…me gustaria saber si seguiras publicando este tipo de aportes que personalmente lo encontre fantastico sobretodo la orientacion a objetos de php en la clase de la base de datos…quizas una recomendacion explicar con mas detalles seria ideal …
    Desde ya muchas gracias, y espero nuevos aportes.

  4. Saludos Merlinda. Es extraño porque el ejemplo es muy simple y no debería molestar. Has revisado que está transmitiendo del servidor al cliente ? Esto se puede hacer muy fácilmente con la consola de Firebug.

    También sería útil verificar los registros (logs) de acceso y error del Apache.

  5. Excelente artículo de Ajax, Prototype, JSON y PHP. El mejor con diferencia que encontrado buscando por Internet.

    Tengo en mente hacer una aplicación con estas tecnologías. Se trata de un horario semanal que muestre las citas. Ya lo tengo realizado en Delphi y me resulta muy útil. El problema es no haber usado software libre desde el inicio y ahora me resulta más engorroso hacerlo ejecutar desde Linux.
    Si me queda bien quizás haga un tutorial.

    1. Saludos @Kokaska. Me alegro que te haya servido el artículo. Para eso es mi blog, para compartir el conocimiento 🙂

      Me imagino que podrás ejecutar con bastante éxito tu aplicación Delphi en Linux utilizando Wine pero quedará mucho mejor cuando la implementes web. Inclusive podrías publicarla como un proyecto ya que este tipo de aplicaciones es muy útil. Entre mis cosas por hacer [algún día] tengo pensado en implementar algo así para los turnos de las salas de la Universidad ya que utilizan exitosamente MRBS (http://mrbs.sourceforge.net/) pero quisiera hacer algo un poco mas elaborado.

      Mucha suerte con tu proyecto.

Leave a Reply

Your email address will not be published. Required fields are marked *