14

2

Envía formularios con AJAX

Tras ver que es y como usar AJAX, que es la forma más fácil de hacer webs dinámicas, ahora el siguiente paso es enviar formularios que pueden contener mucha información a través de AJAX.
Esta función nos puede servir de gran ayuda para crear editores de texto que guarden automáticamente el contenido o simplemente para autentificarnos en una web, por ejemplo.

Partimos de un uso básico de AJAX, del ejemplo del artículo anterior.
Para poder enviar información por el método POST, el usado para enviar formularios, en primer lugar debemos de establecer que el método usado por ajax.open() sea POST.

1. // Petición con el método POST
2. ajax.open("POST","prueba.php",true)

Enviar la información

Para enviar datos por este método debemos de establecer que tipo de contenido enviaremos, mediante una cabecera, que se añade con la propiedad setRequestHeader de nuestro objeto ajax.
Esta propiedad nos pide dos argumentos, primero el del parámetro que vamos a establecer y posteriormente el contenido, que es tan sencillo como usar el siguiente código:

1. // Petición con el método POST
2. ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

Ahora solo queda pasar las variables, que se pasan con ajax.send() (que anteriormente enviábamos vacio para el método GET), y en su interior añadiremos una cadena de texto con las variables precedidas de "&", el signo de igual y el contenido de la variable (por ejemplo: "&var=contenido").
Se pueden mandar todas las variables que queramos, de la misma forma, precedidas por el símbolo "&".

1. // Petición con el método POST
2. ajax.send("&nombre=" + nombre + "&apellido=" + apellido)

Poner en funcionamiento

Para ver un ejemplo del funcionamiento usaremos el ejemplo del artículo anterior pero cambiando los pasos anteriores que son necesarios para enviar la información por POST y además la función de prueba tendrá como argumentos la variable nombre y apellido.

1. function enviar(nombre,apellido){

// Comprobamos que está disponible AJAX

if(window.XMLHttpRequest) {

ajax = new XMLHttpRequest()

}

// La respuesta aparecerá en una alerta

ajax.onreadystatechange=function(){

if(ajax.readyState == 4) {

if(ajax.status == 200) {

alert(ajax.responseText)

}

}

}

// Pedimos el archivo "prueba.php"

ajax.open("POST","prueba.php",true)

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

ajax.send("&nombre=" + nombre + "&apellido=" + apellido)

2. }

En el servidor, para hacer el ejemplo habrá un archivo PHP que nos devuelva el nombre y el apellido y tendrá el siguiente código.

1. <?php

echo "Nombre: ".$_POST["nombre"]." // Apellido: ".$_POST["apellido"];

2. ?>

Para probar este ejemplo haré un formulario simple con un campo para el nombre y otro para el apellido, podéis probarlo.

Resumen

Para enviar formularios por el método POST con AJAX no es necesario nada más y le podemos sacar muchísimas utilidades, por poner algún ejemplo más podría usarse para comprobar si un usuario existe en un servicio, actualizar datos en un formulario o enviar un mensaje (como si de un tweet se tratara).