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:
 

[LIST=1]

• 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.
 

[LIST=1]

• 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(&#39;Content-Type: text/html; charset=ISO-8859-1&#39;);
$idnew= (int)$_POST[&#39;new&#39;];
$autor = (int)$_POST[&#39;autor&#39;];
$comentario = $_POST[&#39;comentario&#39;];
if (! $idnew && $autor && $comentario)
die(&#39;Error&#39;);

define(&#39;WEB&#39;, 1);
include_once(&#39;basic.php&#39;);
include_once(&#39;../settings.php&#39;);
include_once(&#39;../theme/text.php&#39;);

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

$queryy = new_query("SELECT m.real_name as autor, DATE_FORMAT(hora, ".$opciones[&#39;dateformat&#39;].") 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 &#39;<table border=1 width="100%" height="100%"><tr><td> <b>&#39;.$texto[&#39;new_autor&#39;]."</b> ".$coment[&#39;autor&#39;].&#39;</td>
</tr>
<tr>
<td>&#39;.htmlentities($comentario).&#39;</td>
</tr></table>&#39;;
} 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.