Desde hace algún tiempo, las páginas web han ido evolucionando de modo que para enviar o recibir datos ya no es necesario que recarguemos todo el contenido, aligerando así el estrés de los servidores y reduciendo la cantidad de datos que se deben enviar al cliente.

Esta característica surge gracias a la tecnología que conocemos como AJAX, que no son más que las siglas de Asynchronous JavaScript And XML (JavaScript asíncrono y XML).

Resumiendo: AJAX nos permite realizar llamadas asíncronas al servidor donde está alojada la web.

En un principio AJAX podía parecer un poco engorroso con el manejo directo del XMLHttpRequest (objeto disponible en los navegadores actuales para realizar llamadas asíncronas), pero gracias a jQuery podemos simplificarlo todo en gran medida.

¡Vamos al lío!

Para enviar un formulario con AJAX y jQuery sin recargar toda la página, necesitaremos:

• Formulario en HTML (formulario.html)
• Gestor del formulario en PHP (sendform.php)
• Gestor de llamadas asíncronas en JavaScript (async_form.js)
• Librería jQuery (incluida en la cabecera de formulario.html)

A continuación os dejo el código comentado y listo para que hagáis vuestras pruebas:

Si abrimos el archivo formulario.html veremos cómo las respuestas enviadas por sendform.php se muestran en la página actual.

Las dudas que os surjan podéis ponerlas en los comentarios de este artículo.