AJAX: Los métodos GET y POST

Como continuación de Introducción a AJAX 2/2 Codigos de ejemplo vamos a hablar sobre la forma de trabajar con los métodos GET y POST.

¿Qué diferencias hay entre ambos métodos?

Básicamente podríamos decir que el método GET envía los datos a través de nuestra url mientras que el método POST los envía a través de las cabeceras.

¿Qué método debería usar?

Todo depende siempre de cómo vamos a recibir los datos en el script php/asp y de la cantidad de datos a enviar.
Por norma general nosotros vamos a usar casi siempre el método GET pero de vez en cuando necesitaremos, o se hará más fácil, el método POST, por lo tanto será necesario el conocimiento de ambos métodos.

El método GET

No es otro que el que usamos en el ejemplo básico de un código AJAX:


function conectar(con) {
if (con != 1) {con = 0}

conexion = crearXMLHttpRequest();
conexion.onreadystatechange = procesarEventos;
conexion.open('GET', 'index.php?bt=' + con, true);
conexion.send(null);
}

Como ya explicamos lo que hacemos es:

Crear la conexión
Asignar la función que usaremos para el readystatechange
Abrir la conexión: en este apartado designamos el método (GET) y declaramos a que archivo y con que variables lo vamos a hacer.
Y para finalizar enviamos todo.

El método POST

Es muy (pero muy) parecido al método GET, solo agregamos una línea y realizamos un par de cambios, siguiendo el mismo ejemplo quedaría así:


function conectar(con) {
if (con != 1) {con = 0}

conexion = crearXMLHttpRequest();
conexion.onreadystatechange = procesarEventos;
conexion.open('POST', 'index.php, true);
conexion.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
conexion.send('bt=' + con);
}

Cómo es apreciable realizamos 3 cambios.

Cambiamos GET por POST y quitamos la cadena del segundo parámetro dejando solo la página a donde enviaremos los datos
Agregamos un setRequestHeader para declarar el tipo de contenido que se va a enviar
En el send dejamos de enviar un NULL para enviar la cadena de parámetros, en otros ejemplos realizaremos una función por motivos que ya explicaremos.

Un ejemplo con el método POST

Para dejar un poco más claro el método y dar una aplicación práctica voy a dejar y explicar un ejemplo que tuve que codear hace unas semanas, se trata de un formulario de comentarios algo (bastante feo) que publica y nos muestra, sin recargar la página (AJAX), el comentario publicado.

El formulario de envío de la página es este:
(Es una parte de todo el script pero son como 200 lineas y tampoco hace falta …)


<tr><td>
<form action="funciones/updatecoment.php" method="post" id="sendcomment">
<input name="autor" type="hidden" id="autor" value="'.$context['user']['id'].'" />
<input name="new" type="hidden" id="new" value="'.$idnew.'" />
<textarea id="comentario" name="comentario" cols="35" rows="5"></textarea>
<input name="enviar" id="enviar" type="submit" value="'.$texto['new_send'].'" /> <div id="state">&nbsp;</div>
</form>
</td></tr>'

Como se puede apreciar el formulario se envía a ‘funciones/updatecoment.php’ con los siguientes datos:

autor
idnew (id de la noticia)
comentario

El script php (updatecoment.php):


<?php
header('Content-Type: text/html; charset=ISO-8859-1');
$idnew= (int)$_POST['new'];
$autor = (int)$_POST['autor'];
$comentario = $_POST['comentario'];
if (! $idnew && $autor && $comentario)
die('Error');

define('WEB', 1);
include_once('basic.php');
include_once('../settings.php');
include_once('../theme/text.php');

$query = new_query("INSERT INTO web_news_comments (id_com, id_new, autor, comentario, hora, id_mod)
VALUES(NULL, $idnew, $autor, '$comentario', CURRENT_TIMESTAMP, NULL)");

$queryy = new_query("SELECT m.real_name as autor, DATE_FORMAT(hora, ".$opciones['dateformat'].") AS hora
FROM smf_members m, web_news_comments c
WHERE c.comentario = "".$comentario.""
AND c.id_new = ".$idnew."
AND c.autor = ".$autor."
AND c.autor = m.id_member");

if (mysql_num_rows($queryy)) {
$coment = mysql_fetch_array($queryy);
echo '<table border=1 width="100%" height="100%"><tr><td> <b>'.$texto['new_autor']."</b> ".$coment['autor'].'</td>
</tr>
<tr>
<td>'.htmlentities($comentario).'</td>
</tr></table>';
} else {
echo "<b>Error al recuperar o enviar comentario</b>";
}
?>

Lo que hace es recoger (de un POST) los datos para luego hacer una query de update y un select (para comprobar que se agregó la información correctamente.
Luego genera un mensaje a mostrar, puede ser un error o el comentario enviado que queremos mostrar.

Ahora vamos a revisar lo que realmente nos interesa, el AJAX.

El ajax en el ejemplo no se ve como se agrega porque se realiza desde otro módulo… simplemente no olviden meterlo entre el head.


//Agregar comentarios
addEvent(window,'load',cargar,false);

function cargar() {
var form = document.getElementById('sendcomment');
addEvent(form, 'submit', enviarcomentario,false);
}

function enviarcomentario(e) {

if(window.event)
window.event.returnValue = false;
else
if (e)
e.preventDefault();
enviarFormulario();
}

var conexion;
function enviarFormulario() {

conexion=crearXMLHttpRequest();
conexion.onreadystatechange = procesarEventos;
conexion.open('POST','funciones/updatecoment.php', true);
conexion.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
conexion.send(datos());

}

function datos() {
var cad="";
var autor= document.getElementById('autor');
var comentario= document.getElementById('comentario');
var id_new= document.getElementById('new');
cad = "autor=" + encodeURIComponent(autor.value) + "&comentario=" + escape(encodeURIComponent(comentario.value)) + "&new=" + encodeURIComponent(id_new.value);
return cad;
}

function procesarEventos() {
var state = document.getElementById('state');
var coment = document.getElementById('comentsend');
if (conexion.readyState == 4) {
state.innerHTML = 'Enviado';
coment.innerHTML =conexion.responseText;
} else{
state.innerHTML = "wait";
}

}

//Funciones comunes de ajax
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}

function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}

Vamos a destripar el code, que es muy simple…

Al cargar la web llamamos la función cargar() que lo único que hace es que, al enviar el formulario llame la función enviarcomentario()

Enviarcomentario() solo se encarga de generar bien el window.event (maldito ie) y luego llama a la función «estándar» que en este caso se llama enviarformulario()

En enviarformulario() creamos la conexion, asignamos la función para el readystatechange.
Abrimos la conexión en POST y llamando al script updatecoment.php que se encuentra en la carpeta funciones.
Asignamos el HEADER cómo: «Content-Type»,»application/x-www-form-urlencoded; charset=UTF-8

Y enviamos todo, pero en vez de pasar un null o una cadena estamos pasando una función, así que vamos a analizarla.

La función datos() crea una variable llamada cad (de cadena) y recoge los elementos que necesitaremos enviar (autor, comentario, noticia)
Luego genera en la variable cad la estructura de la cadena que vamos a enviar.
Para evitar ciertos errores usamos la función encodeURIComponent para cada elemento, y esa es la razón principal para usar una función externa, organización ante todo, para el elemento ‘comentario’ usamos también escape, la razón está que en comentario puede haber muchos elementos no escapados y podría generar problemas.

Hecho esto solo nos hace falta revisar procesarEventos().
En este caso usamos dos elementos (state y comentsend)
En el primero mostramos un mensaje de espera o completado (según la necesidad) y en el segundo, una vez terminado el proceso, mostramos el mensaje que enviamos

¿Porqué no usamos GET en el ejemplo anterior?

Bueno, quizá es la pregunta que algunos se están planteando.
El método GET tiene una limitación en cuanto a la cantidad de datos que se puede enviar, esta limitación es la misma que la cantidad de caracteres que podemos poner en una url (no recuerdo el numero ahora mismo)
sin embargo con el método POST podemos saltarnos dicha limitación.

La regla de los programadores suele ser:
– Para cosas simples y cortas GET y para acciones más elaboradas y de más peso POST

Aunque cada uno es libre de programar como mejor crea.

Introducción a AJAX 1/2
Introducción a AJAX 2/2
AJAX: Los métodos GET y POST