Este documento presenta un taller sobre programación web con Ajax utilizando jQuery. Los objetivos incluyen introducir el acceso y manejo de bases de datos con PHP y MySQL, mostrar cómo conectarse a una base de datos para manipular registros, e implementar tecnología Ajax con JavaScript y jQuery. El documento también define términos como Ajax, jQuery, objeto XMLHttpRequest y describe funciones básicas de PHP para interactuar con bases de datos MySQL.

1. Taller Programación WEB Ajax con JQuery Aplicaciones RIA Rich Internet
Aplication (Aplicaciones de internet enriquecidas o mejoradas)
Objetivos
 Introducir al estudiante con el acceso a base de datos y el manejo con PHP.
 Dar a conocer la sintaxis básica de PHP con MySql.
 Mostrar la forma en que puede conectarse a una base de datos para
manipular registros.
 Implementar tecnología Ajax con JavaScript y jQuery
Presentación
El presente tutorial es un curso de programación PHP – MySQL completo desde
cero para principiante en el que se tratan tanto los fundamentos teóricos de los
dos lenguajes con multitud de ejemplos prácticos comentados y elaborados paso a
paso en los es útil si estas empezando desde cero hasta dominar la creación de
aplicaciones dinámicas en primer paso implementado JavaScript para Ajax y un
segundo tema utilizando el framework jQuery para el mantenimiento de datos.
Introducción
Para agregar, acceder y procesar los datos almacenados en una base datos
computacional, se necesita un sistema administrador de base de datos tal como
MySql. El SQL (Standard Query Language) forma parte del MySql, conocido como
Lenguaje de consultas estructurado, es el lenguaje estandarizado más común
para acceder a base de datos.
Conexión al servidor MySql. Para conectarse al servidor, generalmente se
necesita proveer a MySql un nombre de usuario, y un password. Si el servidor
corre en una máquina distinta a la que se está utilizando se debe especificar el
nombre del host (máquina).

2. Creación de una base de datos. Para crear una base de datos se debe tener
permiso para poder crear base de datos en el servidor MySql, si se tiene el
permiso.
Funciones de PHP que se utilizan para interactuar con bases de datos
MySQL
mysql_connect -- Abre una conexión a un servidor MySQL
int mysql_connect ( [string server [, string usuario [, string password]]])
Devuelve: Un identificador de enlace positivo si tiene éxito, o falso si error.
mysql_connect() establece una conexión a un servidor MySQL. Todos
los argumentos son opcionales, y si no hay, se asumen los valores por defecto
('localhost', usuario propietario del proceso del servidor, password vacía).
El hostname puede incluir también un número de puerto. ej. "hostname:puerto"
o un camino al socket ej. ":/camino/al/socket" para localhost.
En el caso de que se haga una llamada a mysql_connect() con los mismos
argumentos, no se establecerá un nuevo enlace, sino que se devolverá el
enlace ya abierto. El enlace al servidor será cerrado tan pronto como la
ejecución del script finalice, a
menos que se cierre antes explícitamente
mysql_select_db -- Selecciona un base de datos MySQL
int mysql_select_db ( string base_de_datos [, int identificador_de_enlace])
Devuelve: TRUE si éxito, FALSE si error. mysql_select_db() establece la base
activa que estará asociada con el identificador de enlace especificado. Si no
se especifica un identificador de enlace, se asume el último enlace abierto.
mysql_query() devuelve TRUE (no-cero) o FALSE para indicar si la sentencia
se ha ejecutado correctamente o no. Un valor TRUE significa que la sentencia era
correcta y pudo ser ejecutada en el servidor. No indica nada sobre el número
de fila devueltas. Es perfectamente posible que la sentencia se ejecute
correctamente pero que no devuelve ninguna fila.
mysql_fetch_array -- Extrae la fila de resultado como una matriz asociativa
array mysql_fetch_array ( int id_resultado [, int tipo_de_resultado]) Devuelve
una matriz que corresponde a la sentencia extraída, o falso si no quedan
más filas. mysql_fetch_array() es una versión extendida de mysql_fetch_row().
Además de guardar los datos en el índice numérico de la matriz, guarda
también los datos en los índices asociativos, usando el nombre de campo
como clave. Si dos o más columnas del resultado tienen el mismo nombre de
campo, la última columna toma la prioridad. Para acceder a la(s) otra(s)
columna(s) con el mismo nombre, se debe especificar el índice numérico o
definir un alias para la columna.
mysql_free_result -- Libera la memoria del resultado
int mysql_free_result ( int id_resultado) mysql_free_result() solo necesita ser
llamada si te preocupa usar demasiado memoria durante la ejecución de tu script.
Toda la memoria del resultado especificado en el parámetro del identificador
de resultado será automáticamente liberada. Por razones de compatibilidad
puede usarse también mysql_freeresult().
mysql_close -- cierra el enlace con MySQL

3. int mysql_close ( [int identificador_de_enlace]) Devuelve: verdadero si éxito, falso
si error.
mysql_close() cierra el enlace con la base MySQL que está asociada con el
identificador de enlace especificado. Si no se especifica el identificador de
enlace, se asume por defecto el último enlace.
Nota: Normalmente no es necesario ya que las aperturas no-persistentes son
cerradas automáticamente al final de la ejecución del script.
mysql_affected_rows -- Devuelve el número de filas afectadas de la última
operación MySQL
int mysql_affected_rows ( [int identificador_de_enlace])
mysql_affected_rows() devuelve el número de filas afectadas en la última
sentencia INSERT, UPDATE o DELETE sobre el servidor asociado con
el identificador de enlace especificado. Si el identificador de enlace no ha sido
especificado, se asume por defecto el último enlace. Si la última sentencia fue
un DELETE sin clausula WHERE, todos los registros han sido borrados de la
tabla pero esta función devolverá cero. Este comando no es efectivo para las
sentencias SELECT, sino sólo para las sentencias que modifican registros.
Para conseguir el número de líneas devueltos por un SELECT, usar
mysql_num_rows().
mysql_num_rows -- Devuelve el numero de filas de un resultado
int mysql_num_rows ( int id_resultado) mysql_num_rows() Devuelve el
numero de filas de un identificador de resultado.
Definiciones:
Ajax:
Ajax se refiera a “Asincronía + Javascript + CSS + DOM + XMLHttpRequest”
al momento de conversar con los clientes. Siendo el lenguaje Javascript y el
lenguaje XML por medio de la Asincronía, los que forman el fuerte de AJAX,
los cuales se detallaran a lo largo del texto.
El motor AJAX permite que la interacción del usuario con la aplicación ocurra
asincrónicamente, con esto se refiere a la comunicación independiente con el
servidor; por lo que de esta manera el usuario generalmente no visualizara una
ventana blanca en el navegador, a la espera de respuesta de parte del servidor.
JQuery
jQuery es una librería de Javascript que permite mantener el código de una página
de manera simple y concisa manejando algunas de las complejidades que se dan
con DOM y con la interacción de AJAX. jQuery incluye plugins opcionales que
contienen funciones comunes para DOM, Eventos, Efectos y AJAX.
jQuery es un simple y liviano archivo de Javascript (ronda los 16 Kbytes) que se
agrega a la cabecera de los documentos. Provee una increíble cantidad de
métodos de utilidad para lograr tareas web específicas.

4. Objeto XMLHttpRequest:
El uso de objetos XMLHttpRequest para la comunicación navegador-servidor.
Una de las restricciones que presenta Javascript, es que carece de un
mecanismo portátil para la comunicación de red en general, pero el objeto
XMLHttpRequest, el cual es soportado por la mayoría de los navegadores que
aceptan Javascript, puede realizar llamadas a su servidor de origen y obtener los
resultados. Lo cual permite realizar minuciosas llamadas al servidor y manejar las
respuestas como se desee, al contrario de los formularios convencionales, que al
ser enviados provocan que la página se actualice completamente.
Las aplicaciones AJAX requieren que los mensajes sean transmitidos en ambos
sentidos (desde el navegador hacia el servidor y viceversa); y además que tanto el
navegador como el servidor tengan acceso al mensaje, esto se refiere a que el
formato pueda ser accesible fácilmente en Javascript así como cualquier otro
lenguaje que se utilice del lado del servidor. El recurso que en este caso ofrece es
el de pasar los mensaje entre navegador y el servidor en formato XML. Es posible
pasar XML en ambas direcciones: del lado del servidor, es una forma común de
describir los datos estructurados como texto; y del lado del navegador, las
aplicaciones pueden descargar el XML con una llamada XMLHttpRequest para
analizarlo de diferentes maneras. En el caso que el navegador necesite subir
algún dato complejo, resulta fácil serializar el dato como un XML y subirlo en el
cuerpo de una llamada XMLHttpRequest.
La forma de crear una instancia de este objeto en cualquier navegador es:
var req = new XMLHttpRequest();
y en Microsoft Internet Explorer depende de ActiveX:
var req = new ActiveXObject("Microsoft.XMLHTTP");
Métodos:
Los métodos de un objeto XMLHttpRequest son los siguientes:
 abort(): Aborta la petición actual.
 getAllResponseHeaders(): Devuelve todas las cabeceras (etiquetas y
valores) como un string.
 getResponseHeader("headerLabel"): Devuelve el valor de la cabecera
etiquetada como headerLabel.
 open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]): Abre
una conexión a una URL, con un método HTTP (get o post), y otros
parámetros opcionales.
 send(content): Envía la petición. Suele ser un String o un objeto DOM
 setRequestHeader("label", "value"): Crea un par etiqueta/valor para ser
enviado en la cabecera de la petición.

5. Los métodos más importantes son open y send.
El método open prepara la conexión con el servidor. Para ello se le pasa la URL -
absoluta o relativa - y el método HTTP, get o post, según si se recibe o se envía
datos.
Por defecto, la conexión es asíncrona, es decir, la petición se realiza al servidor y
el usuario puede seguir interactuando con la página sin que se dé cuenta. Si se
quiere una conexión síncrona, se debe utilizar el parámetro asyncFlag=false, lo
que hará que el navegador quede parado hasta recibir la respuesta del servidor.
Esto es peligroso porque puede dejar colgado al navegador si hay algún tipo de
error, por lo que se aconseja siempre utilizar conexiones asíncronas.
Propiedades
Las propiedades del objeto XMLHttpRequest son las siguientes:
 onreadystatechange: Guarda el nombre de la función Javascript que
manejará los cambios de estado en la petición.
 readyState: Entero que codifica el estado actual de la petición
o 0 = No Inicializado
o 1 = Cargando
o 2 = Cargado
o 3 = Interactuando
o 4 = Completado
 responseText: Versión en forma de String de los datos devueltos por el
servidor.
 responseXML: Objeto DOM compatible de la respuesta del servidor.
 status: Código de estado devuelto por el servidor, como 404 para No
encontrado o 200 para Ok.
 statusText: Mensaje que acompaña al código de estado.
De estas propiedades, las más importantes on onreadystatechange, readyState,
y la respuesta responseText / responseXML.
La primera, onreadystatechange, sirve para asociar el método Javascript que
hayamos escrito para gestionar los cambios de estado de la petición. Es decir,
como es una comunicación asíncrona, se necesita tener un método implementado
por nosotros que gestione los diferentes eventos, como por ejemplo, la llegada de
la respuesta. Esta es la propiedad que sirve para decirle a XMLHttpRequest el
nombre de ese método.
La segunda, readyState, es un número que informa del estado de la petición. El
estado más interesante es el número 4, que recoge el momento en el que llega la
respuesta del servidor para poder procesarla.
La respuesta viene en dos versiones diferentes: Una en un texto normal,
almacenada en la propiedad responseText; y otra en un objeto estándar DOM,
almacenado en la propiedad responseXML. Lógicamente, el medio más poderoso

6. de procesar las respuestas, es mediante el objeto DOM, ya que puede ser
recorrido a través de los métodos estandarizados por la W3C DOM. Date cuenta
que este DOM es un documento en XML, no en HTML.
Código general
Sabiendo todo esto, podemos crear una función genérica para realizar una
petición:
var req;
function loadXMLDoc(url) {
req = false;
// parte para cualquier navegador
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// parte para Internet Explorer / ActiveX
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
if(req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send("");
}
}
Y otra función para procesar las respuestas:
function processReqChange() {
if (req.readyState == 4) {
if (req.status == 200) {
// ...Aquí irían la lógica necesaria
} else {
alert("Error recibiendo datos XML:n" +
req.statusText);
}
}
}

7. Seguridad:
Por motivos de seguridad, no se puede acceder a los ficheros locales a través del
protocolo file:// sin tener que lidiar con configuraciones. Debido a esto no se
pueden hacer test de páginas locales directamente, y lo mejor es instalar un
servidor HTTP como Apache y hacer conexiones http://localhost/.
También, el dominio de la dirección del servidor ha de ser el mismo que el de la
página que contiene el script que realiza la petición.
Figura de un objeto XMLHttpRequest es una instancia de una API que nos
permite la transferencia de datos en formato XML desde los script del navegador (
JavaScript, JScrip, VBScript ... ) a los del servidor ( PHP, Perl, ASp, Java ... ) e
inversamente.
Contenido
El conjunto de procedimientos descritos a continuación representan el
complemento básico para el desarrollo de aplicaciones Web en PHP y sobre el
manejo de una base de datos específica. En esta sesión abordaremos el tema
relacionado al manejo de registros de datos efectuando un mantenimiento clásico
de registros para esto utilizamos una Base de Datos llamada “sofliseoane”
(creada con phpMyAdmin) y dentro de ella hemos diseñado la tabla clientesv con
la siguiente estructura:

8. Script para crear la tabla es el siguiente:
Con esto tendremos lista la base de datos y la tabla a utilizar en la práctica.
Mostraré el esquema de la aplicación, para un mayor entendimiento cuando les
explico.
Tema: PHP y ajax utilizando JavaScript
Ahora haremos la parte PHP que es lo mas rápido tiene un archivo denominado
conexion.php en cada una de las subcarpetas (ALTAS, BAJAS, CAMBIO, FILTAR)
en el cual configuramos la conexión a la base de datos Mysql.

9. A.- Alta de registros con Ajax utilizando JavaScript (Estructura de la subcarpeta
para el modulo de ALTAS)
1.- El archivo “index.php”, es el formulario en el cual se ingresan los datos del
cliente que será dado de alta, este archivo carga al archivo “ajax.js línea 4 del
código” el cual manipula los datos ingresados en el formulario “<form
name="nuevo_cliente">” mediante el método “enviarDatosCliente() línea 7 del
código”.

10. 2.- Código del archivo “ajax.js”

11. El método sleep del archivo “registro.php” hace llamada al
divResultado.innerHTML= '<img src="anim.gif">'; y se activa la animación por
medio de la imagen “="anim.gif"”, línea 21
Asignamos los datos leídos del formulario() a las variables declaradas en el
archivo “ajax.js”:
“ajaxnombre=document.nuevo_cliente.fnombre.value;
ajaxapellido=document.nuevo_cliente.fapellido.value;
ajaxfecha_nac=document.nuevo_cliente.ffecha_nac.value;
ajaxpeso=document.nuevo_cliente.fpeso.value;”
Líneas 24-27
Se envían los datos al archivo “registro.php” para almacenar el registro a la tabla
//archivo que realizará la operacion
//registro.php
ajax.open("POST", "registro.php",true);
Línea 32
Se limpian los campos del formulario con la función declarado en las líneas 49-54
//llamar a funcion para limpiar los inputs
LimpiarCampos();
Línea 40
Asignamos las valores de los cajas de texto a las variables ajax para enviarlos
//enviando los valores
ajax.send("fnombre="+ajaxnombre+"&fapellido="+ajaxapellido+"&ffecha_nac="+aj
axfecha_nac+"&fpeso="+ajaxpeso)
Línea 46
3.-Archivo “registro.php”

12. A cada caja de texto del formulario le asignamos a una variable php líneas 4-7, y
la función sleep manipula la imagen que se visualiza al cargar los datos.
Los datos son enviados (a la clase “cClientes.php” ) y validados mediante la línea
11 “if ($objcliente-
>crear($varnombre,$varapellido,$varfecha_nac,$varpeso)==true){“
3.- El archivo “cClientes.php”, es un archivo de clase con los atributos de la
clase cliente:
La función crear líneas 22-32, recibe los datos del nuevo objeto cliente y los
inserta a la tabla “clientesv” de acuerdo a los variables php
($varnombre,$varapellido,$varfecha_nac,$varpeso) recibidas en el archivo del
archivo “registro.php”
Pruebas:
Imagen de captura de datos y animación de la imagen al pulsar click sobre el
botón Grabar

13. Imagen de visualización del resultado de la inserción del registro
B.- Eliminar registro con Ajax utilizando JavaScript (Estructura de la subcarpeta
para el modulo de BAJAS)

14. 1.- El archivo “index.php”, carga al archivo “ajax.js línea 4 del código” el cual
manipula el registro a eliminar.
El formulario que visualiza los registros existentes en la tabla “clientes” haciendo
una llamada al archivo “consulta.php” líneas 12-14,
2.- El archivo “consulta.php”, mediante el evento onclick llama la función
eliminarDato(), que tiene como parámetro de entrada el ID del cliente y se envía
al archivo “ajax.js” línea 30 donde captura el id y se asigna a la variable
“ajaxidclie” y ejecuta el archivo “eliminacion.php”

15. 3.- Archivo “cClientes.php” el cual es la clase Cliente con los atributos, y una
función para consultar un cliente por su id y otra función para eliminar un cliente de
acuerdo al id seleccionado de la tabla.

16. Pruebas:
Pulsar click sobre el ID del registro que desea eliminar
C.- El proceso de modificación es similar en el sentido que se debe pulsar click
sobre el Id del registro a Modificar y este Id es enviado al archivo “ajax.js”,
mediante el evento onclick de la funcion PedirDatos(), del archivo
”consulta.php“, que tiene como parámetro el ID y rellena el formulario con los
datos del cliente a Editar invocando al archivo “consulta_por_id.php” y
enviando los datos actualizados con la función enviarDatosCliente() del archivo
“ajax.js”

17. D.- El filtrado se realiza pulsado click sobre el nombre del campo a filtrar y los
filtros son en orden ascendente o descendente

18. Tema: PHP y ajax con jQuery
Estructura general del proyecto:
El archivo clase.php contiene la lógica de conexión a la base de datos y los
métodos para realizar inserciones a la tabla clientesv por medio de una clase PHP
que manipula la lógica de negocio a través de las variables:

19. Se declaran los atributos de la clase, donde cada atributo corresponde a un
nombre de los campos de la tabla clientes. Y estas variables se llaman var
$var_nombre_campo; para identificarlos que son variables de clase.
Con los métodos siguientes obtenemos los valores en la tabla “clientes” para
manipularlos:
Con los métodos siguientes insertamos ó modificamos los valores en la tabla
“clientes” para manipularlos:
Para el mantenimiento de datos utilizamos métodos concretos que realizan un
query a la base de datos y ejecutan la acción correspondiente dentro del método

20. 1.- El método getClientes() realiza una consulta general de todos los
registros existentes en la tabal clientesv
2.- El método updateCliente() actualiza el cliente cargado en los atributos
Comentarios:
Observar en línea de la imagen anterior de código la instrucción:
“nombre='$this->varnombre'”, es un apuntador de la variable nombre que
tiene como referencia el campo nombre de la tabla cleintesv, lo mismo
sucede para cado uno de los campos de la tabla.
3.- El método insertCliente(), inserta el cliente cargado en los atributos a la
tabla “clientes”
Comentarios:
Observar en línea de la imagen anterior de código la instrucción:

21. “$this->varnombre”, es un apuntador de la variable nombre que apunta al
campo nombre de la tabla cleintesv, lo mismo sucede para cado uno de los
campos de la tabla.
4.-El método delete() es el encargado de eliminar un registro dentro de la
tabla clienetsv
El archivo index.php contiene la vista que se muestra l usuario y valida las
acciones a tomar de acuerdo a un case:
Para cada acción carga un archivo diferente ubicado en la carpeta de templates,
por ejemplo si la acción seleccionada es : case 'refreshGrid': busca en la carpeta
templates su código correspondiente y esto en la línea: $view-
>contentTemplate="templates/clientesGrid.php";
El archivo “clientForm.php”, es el diseño del formulario para inserción o
modificación de los campos de la tabla clientes y cada caja de texto la

22. identificamos con una f para identificarlos que son los valores contenidos en el
formulario, para este caso los nombres son: id="fnombre", id="fapellido",
id="ffecha", y id="fpeso"
La instrucción value = "<?php print $view->client->getNombre() ?>", imprime el
valor obtenido por el método getNombre(), este método es del archivo “clase.php
“.

23. En la ruta “C:wampwwwTallerRIAresources”, están los archivos de la hoja de
estilo del díselo web y lo librería JQuery “jquery-1.7.1.min.js”
El script “functions.js” el cual se encarga de manipular los datos del formulario
con las etiquetas params.id=$('#fid').val(); esto para cada objeto del formulario y le
proporciona el método asíncrono a través de JQuery y se hacen validaciones para
cada campo :

24. Si nuestro campo en el formulario es otro debe cambiarse en este script por el
nuevo nombre.
Ejemplo si cambiamos los datos del formulario
Cambiar los campos en el script “functions.js”
El archivo “layout.php” es el encargado de cargar las librerías necesarias y las
hojas de estilos

25. El archivo “clientesGrid.php”, imprime la consulta general de los registros
contenidos en la base de datos

26. Pruebas:
Módulo principal de la pagina inicial
Módulo de altas de clientes
Módulo de edición y eliminar datos
Código fuente y base de datos:
http://www.mediafire.com/?ypdutvruuwa2oi4
Referencias bibliográficas:
http://aprendeweb.16mb.com/avanzados/ajax/ajax_1.php

27. Página con conceptos bien detallados y ejemplo
Manual Ajax
http://es.scribd.com/doc/56560687/23/Constructor-del-objeto-XMLHttpRequest
http://es.scribd.com/doc/16425657/Tutorial-AJAX-espanol-parte-1
http://es.scribd.com/doc/86539/Ajax-Manual-Spanish
http://es.scribd.com/doc/44612279/Ajax-un-juego-de-ninos
http://es.scribd.com/doc/39270394/Manual-Ajax
Libro completo de Ajax en formato PDF
http://www.librosweb.es/ajax/pdf/
Ajax web 2.0 para profesionales Código Fuente del Libro
http://www.libroajax.com/codigo.html
Validaciones con JQuery
http://www.jmocana.eu/2009/02/09/validaciones-con-jquery/
http://www.actualidadjquery.es/2010/10/25/formulario-con-validacion-de-campos-
en-jquery/
http://web.tursos.com/tutoriales/javascript/como-hacer-un-formulario-de-contacto-ii-
validar-con-jquery
http://www.masquewordpress.com/7-codigos-jquery-que-todos-deberian-tener/#
Entrevista a Maximiliano Firtman
http://www.maestrosdelweb.com/editorial/maximiliano-firtman/