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:

  1. Crear la conexión
  2. Asignar la función que usaremos para el readystatechange
  3. 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.
  4. Y para finalizar enviamos todo.

Continuar leyendo «AJAX: Los métodos GET y POST»

Introducción a AJAX 2/2 Codigos de ejemplo

Antes de empezar esta segunda parte de la introducción a AJAX donde nos meteremos de lleno en la programación en sí y dejaremos de lado la teoría, querría prevenir a los lectores que en una primera lectura el código y los ejemplos no sean comprensibles, pero se les anima a releerlos e intentar trazarlos para así llegar a una mayor comprensión del algoritmo utilizado.

Funciones comunes

Primero que nada vamos a revisar las 2 funciones que usaremos siempre en nuestro sistema AJAX.

//Funciones comunes
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;
}

La función addEvent se encarga de ejecutar una ‘funcion’ al suceder un ‘evento’ sobre un ‘elemento’ es decir si tenemos el boton1 y queremos que en la acción ‘onclick’ se ejecute la función ‘comprobar()’, lo llamaremos de la siguiente forma:

addEvent(boton1, 'click', comprobar, false);

La función crearXMLHttpRequest() es la encargada de crear nuestro módulo AJAX para hacer peticiones de fondo. Básicamente se crea una función gracias al «amado» Internet explorer que usa un ActiveX, el resto de navegadores utilizan windows.XMLHttpRequest como marcan los estándares.

Continuar leyendo «Introducción a AJAX 2/2 Codigos de ejemplo»