Creacion de un CRUD utilizando POO (Parte 3)

Bienvenidos (as) a una nueva entrada de este su Blog.
Primero que todo agradecer a todos ustedes por los comentarios que dejan en cada uno de los artículos publicados, es gratificante para mi que pueda ayudar con mi corta experiencia a personas con el mismo interés de aprendizaje y superación, y saber que a través de estos sencillos ejemplos prácticos pueda lograrlo.



Ahora si, empecemos con lo que nos interesa y es seguir adelante con nuestro pequeño sistema CRUD. En la entrada anterior terminamos con la creacion de nuevos estudiantes, en el orden de nuestro menú la siguiente opción con la que vamos a trabajar es con la consulta de los estudiantes.

Aca vamos a utilizar algo nuevo e interesante que es el uso de AJAX (acrónimo de Asynchronous JavaScript And XML) que según wikipedia es:

una técnica de desarrollo web para crear aplicaciones interactivas o RIA. Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano

Es decir no vamos a tener necesidad de refrescar nuestra pagina para el envío de  los datos Post o Get.
Les dejo la Url para que consulten mucho mas sobre el tema http://es.wikipedia.org/wiki/AJAX

Lo primero es crear nuestro archivo read_estudiante.php donde vamos a realizar nuestra búsqueda, el cual contendrá el siguiente HTML:

Y el cual dará el siguientes aspecto:

 Si lo revisamos bien tenemos referencia a nuestro archivo funciones.js y en el botón llamamos a la función consulta_estudiante, la cual procederemos a crear a continuación.
Nos dirigimos al archivo .js y vamos a pegar lo siguiente:

Esto es lo que nos va a permitir interactuar con Ajax y debe ir antes de las funciones que ya contiene nuestro .js. Como dice el código está función es genérica y se puede copiar tal cual como aparece en la imagen.

Y luego mas abajo pegamos la nueva función

Vamos a ir explicando parte por parte, para que se entienda un poco que es lo que nos muestra este código.

1. ajax1=nuevoAjax(); Creamos el ajax de esta forma.
2. var filtro = document.getElementById("filtro").value  Guardamos en la variable el criterio de busqueda.
3. var aleatorio=parseInt(Math.random()*99999999); Esto lo uso yo para que la pagina no quede guardada en caché, no es obligatorio.
4. ajax1.open("GET","ajax/consulta_estudiante.php?filtro="+filtro+"&rnd="+aleatorio,true); Acá con el objeto ajax1 usamos el método open al cual le pasamos primero de que forma van a viajar los datos, para el ejemplo van a ir via GET, lo siguiente es la url del archivo donde vamos a ejecutar la consulta para traer los datos y por ultimo un valor booleano que define si usaremos o no el modo asíncrono.
5. ajax1.onreadystatechange=function() Almacena el nombre de la función que se ejecutará cuando el objeto XMLHttpRequest cambie de estado.

Luego coloco dos estados, el 1 que es cuando esta cargando, por eso dentro de ese estado al objeto res le paso una imagen .gif que me muestra esto mientras espera respuesta :



y Luego el estado 4 que es cuando se completó la solicitud y nos trae el resultado de nuestra operacion. Hasta aqui llega nuestro ajax. Fijense que tanto la espera como la respuesta se van a mostrar en nuestro div que tiene como id res.
Observaciones: he notado que el estado 1 (espera) no se refleja en todos los navegadores, principalmente en chrome, por lo que es posible que no logren observar el .gif o lo que sea que coloquen a modo de espera.

Ahora nos concentraremos en el archivo consulta_estudiante.php el cual va ir contenido dentro de la carpeta ajax que debemos crear asi:

Por ahora y para verificar que todo anda bien nuestro archivo solo va a contener lo siguiente, nos debe mostrar lo que le pasemos como crtiterio de busqueda:

Asi que el resultado debe ser lo siguiente:

Interesante verdad, con esto comprobamos que nuestro ajax funciona y que esta encontrado a nuestro archivo php interno.

En la próxima entrada seguiremos con nuestro ejemplo.