jQuery ajax para Realizar consultas con php y mysql

Cuando inicie la estapa de aprendizaje como desarrollador web, en un curso aprendí javascript por encimita y en una ocasión hicimos un ejemplo de operaciones aritméticas donde para mi sorpresa no funcionaba bien, ja ja ja, lo odié por un tiempo y hoy en día de la mano de jquery desarrollo mis aplicaciones, simplemente es lo mejor.

Jquery ajax $.ajax() sin duda alguna es una de las funciones que mas uso en el desarrollo de aplicaciones Web, no dudo que gran parte de mis colegas también hechen mano de esta. Para aplicaciones web es muy útil y nos ahorra mucho tiempo además de permitirnos hacer cosas muy interesantes y atractivas para el usuario final.

¿ Definición de AJAX ?

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), en si no es un lenguaje de programación sino una técnica que engloba 4 tecnologías existentes:

  1. XHTML, HTML y CSS
  2. Document Objet Model (DOM)
  3. El objeto XMLHttpRequest
  4. XML, HTML, JSON.

La definición detallada de AJAX la pueden encontrar en wikipedia.

En esta serie jQuery AJAX con PHP y MySQL aprenderemos a realizar consultas a una base de datos MySQL utilizando javascript y PHP. Dividiré esta entrada en varios ejemplos de manera que quede entendible el proceso para crear aplicaciones que realicen llamadas asincronas a nuestro servidor web, inclusive ya he utilizado jQuery AJAX en post anteriores.

La función jQuery AJAX $.ajax()

En el sitio oficial de jquery definen la función jquery ajax $.ajax() de la siguiente manera:

La biblioteca jQuery tiene un conjunto completo de capacidades de AJAX. Las funciones y los métodos de la misma nos permite cargar datos desde el servidor sin necesidad de una actualización de la página del navegador.

Una de las principales ventajas de usar jquery ajax es que no tenemos que armar el objeto XMLHttpRequest a manita, jquery ajax se encarga por nosotros, de tal manera que por medio de sencillas funciones podemos lograr todo el proceso de la llamada asincrona.

Es importante destacar que no siempre debemos usar jquery ajax en nuestros desarrollos y/o sitios web estáticos, en lo personal creo que aplica más para el desarrollo de sistemas web que realizan interacción con bases de datos, XML, JSON, documentos de texto plano, etc.

Ejemplo para la implementación de jQuery AJAX $.ajax()

En este tutorial crearemos una lista de usuarios de forma que podamos insertar y editar registros en una base de datos, todo dentro de la misma página sin necesidad de estar recargando por cada registro insertado o editado. Además cada que realicemos una inserción o edición vamos a actualizar el listado de registros.

Para tener un ejemplo lo mas completo posible implementaremos la validación de campos por medio de el plugin jquery validate e inclusive validaremos los campos del lado del servidor.

También usaremos bootstrap y jquery ui para dar estilo y presentación a nuestro ejemplo.

Dividiremos el tutorial en 12 videos que a continuación enumero:

  • Video 1 Descarga y recopilación de herramientas y frameworks necesarios como bootstrap, jquery ui y jquery
  • Video 2 Creación de árbol de directorios
  • Video 3 Diseño de mockup
  • Video 4 Creación de base de datos y tabla mysql
  • Video 5 Maquetación de la interfaz de usuario
  • Video 6 Aplicación de estilos con bootstrap y jquery ui
  • Video 7 Validación de formulario con jquery validator
  • Video 8 Creación de consulta y presentación de listado de registros.
  • Video 9 Configuración jQuery $.ajax()
  • Video 10 Creación de interacción para insertar nuevos registros a la base de datos
  • Video 11 Creación de interacción para edición de registros y actualización de lista de usuarios
  • Video 12 Eliminando registros de la tabla usuarios (Nuevo)

Al final de este tutorial podrás implementar todo un sistema de acceso e interacción con tus bases de datos por medio de jquery ajax, php y mysql.