Diferencia entre POST y GET en Ajax. setRequestHeader. encodeURIComponent. Validar formulario (CU01212F)

Resumen: Entrega nº12 del curso "Tutorial básico del programador web: Ajax desde cero".
Codificación aprenderaprogramar.com: CU01212F

 

 

DIFERENCIAS ENTRE POST Y GET CON AJAX

En entregas anteriores del curso hemos visto ejemplos de código con los que recuperábamos información desde el servidor usando el método GET y Ajax. Vamos a explicar cómo podemos utilizar el método POST para recuperar información con Ajax.

logo ajax

 

REPASO RÁPIDO DE GET Y POST

GET y POST son dos métodos del protocolo HTTP que podemos ver como formas de envío de datos a través de internet. Tanto GET como POST son muy conocidos debido a su uso en formularios.

Por ejemplo: <form action="http://www.aprenderaprogramar.com/prog/newuser" method="get"> indica que los datos del formulario serán enviados a la url especificada usando el método get.

Un resultado usando el método GET, a modo de ejemplo, podría ser el siguiente:

http://www.aprenderaprogramar.com/newuser.php?nombre=Pepe&apellido=Flores&email=h52turam%40uco.es&sexo=mujer

El símbolo ? indica dónde empiezan los parámetros que se reciben desde el formulario que ha enviado los datos a la página.

Después del símbolo ? aparecen parejas de datos con su nombre y valor separadas por el símbolo &. Las parejas dato1=valor1, dato2=valor2, dato3=valor3… reflejan el nombre y el valor de los campos enviados por el formulario.

Si en un formulario usamos method="post" los datos se transmiten igualmente, pero no son visibles en la url y sólo pueden ser recuperados a través de código de programación.

 

 

REPASO RÁPIDO DE DIFERENCIAS ENTRE GET Y POST

En la siguiente tabla resumimos diferencias entre el uso de get y post:

Aspecto

Con GET

Con POST

Los datos son visibles en la url

No

Los datos pueden permanecer en el historial del navegador

No

Una url puede ser guardada conteniendo parámetros de un envío de datos

No

Existen restricciones en la longitud de los datos enviados

Sí (no se puede superar la longitud máxima de una url)

No

Se considera preferible para envío de datos sensibles (datos privados como contraseñas, números de tarjeta bancaria, etc.)

No (los datos además de ser visibles pueden quedar almacenados en logs)

Sí (sin que esto signifique que por usar post haya seguridad asegurada)

Codificación en formularios

application/x-www-form-urlencoded

application/x-www-form-urlencoded ó multipart/form-data. Se usa multipart para envío de datos binarios, por ejemplo ficheros.

Restricciones de tipos de datos

Sí (sólo admite caracteres ASC-II)

No (admite tanto texto como datos binarios p.ej. archivos)

Se considera preferible para disparar acciones

No (podría ser accedido por un robot que dispararía la acción)

Sí (sin que esto garantice que no pueda acceder un robot)

Riesgo de cacheado de datos recuperados en los navegadores

No

Posibles ataques e intentos de hackeo

Sí (con más facilidad)

Sí (con menos facilidad)

 

 

Por motivos de seguridad se recomienda usar GET a los efectos de únicamente recuperar información desde el servidor. Por el contrario, si se desea realizar operaciones como actualización, borrado, etc. no se recomienda usar GET.

Hemos de prestar atención a una cuestión en relación al uso de estos métodos con Ajax: los datos recuperados usando GET pueden quedar cacheados en los navegadores. Esto significa que si repetimos una petición para recuperar datos con GET que ha sido realizada anteriormente, podemos obtener los mismos resultados en el navegador incluso si los datos han cambiado en el servidor (debido al cacheado en el navegador).

En relación a Ajax, la cuestión de visibilidad en la url no resulta relevante (ya que en cualquier caso, la invocación de la url se producirá en segundo plano). Sin embargo, los aspectos de seguridad sí siguen siendo relevantes, por eso debemos tener en cuenta:

- Usaremos GET sólo para operaciones que impliquen consulta/recuperación de datos siempre que valoremos que el cacheado en el navegador no causará problemas.

- Usaremos POST para operaciones que impliquen modificación en el servidor (por ejemplo borrado de datos, actualización, etc.). También puede usarse POST para consulta/recuperación de datos.

 

Si se quiere usar get y asegurar evitar posibles problemas de cacheado se puede usar un pequeño truco: añadir un parámetro siempre distinto a la url. La idea podría basarse en un pequeño código similar a este:

var bustCache = '?' + new Date().getTime();

oReq.open('GET', url + bustCache, true);

 

 

REALIZAR PETICIONES AJAX CON POST

En una entrega anterior del curso hemos estudiado que cuando se producen peticiones y respuestas entre servidor y cliente los mensajes llevan cabeceras con cierta información.

Para realizar una petición GET con Ajax no hemos de establecer ninguna cabecera específicamente. En cambio con POST sí hemos de hacerlo. Los parámetros a enviar mediante POST con Ajax se construyen como una cadena de texto dato1=valor1&dato2=valor2& … &daton=valorN

El esquema para usar post con Ajax sería el siguiente:

// Creamos el objeto XmlHttpRequest

// Creamos la cadena de parámetros a pasar: cadenaParams = "dato1=valor1&dato2=valor2& …"

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.send(cadenaParams);

 

 

Para que el servidor procese la petición mediante POST es obligatorio escribir el setRequestHeader tal  y como hemos indicado.

Además hemos de construir la cadena con los parámetros a enviar, y enviar dicha cadena como argumento del método send del objeto XmlHttpRequest.

Recordar que cuando usábamos el método GET la invocación Ajax era simplemente xmlhttp.send(); que es como si escribiéramos send(null);

Sin embargo ahora si usamos POST la invocación Ajax será xmlhttp.send(parametros);

 

 

MÉTODO ENCODEURICOMPONENT

Para evitar problemas con espacios o caracteres especiales se recomienda construir la cadena de parámetros aplicando previamente el método JavaScript encodeURIComponent. El uso de este método se basa en la sintaxis: encodeURIComponent(str);

Donde str es el parámetro a pasar.

Ejemplo de uso:

str = "name=" + encodeURIComponent(name.value) + "&email=" + encodeURIComponent(email.value);

 

 

EJEMPLO RECUPERACIÓN DATOS POR POST CON AJAX

Crea un archivo denominado datosCU01212F.php y súbelo al servidor con este contenido:

<meta charset = "utf-8"/>
<?php // Datos
$pais[0]="spain"; $pais[1]="mexico"; $pais[2]="argentina"; $pais[3]="colombia";
$ciudad[0][0]="Madrid"; $ciudad[0][1]="Barcelona"; $ciudad[0][2]="Valencia"; $ciudad[0][3]="Sevilla";
$ciudad[0][4]="Zaragoza"; $ciudad[0][5]="Málaga"; $ciudad[0][6]="Murcia";
$ciudad[1][0]="México D.F."; $ciudad[1][1]="Ecatepec"; $ciudad[1][2]="Guadalajara"; $ciudad[1][3]="Puebla";
$ciudad[1][4]="Juárez"; $ciudad[1][5]="Tijuana"; $ciudad[1][6]="León"; $ciudad[1][7]="Zapopan";
$ciudad[2][0]="Buenos Aires"; $ciudad[2][1]="Córdoba"; $ciudad[2][2]="Rosario"; $ciudad[2][3]="La Plata";
$ciudad[2][4]="Mar del Plata"; $ciudad[2][5]="San Miguel de Tucumán"; $ciudad[2][6]="Ciudad de Salta";
$ciudad[3][0]="Bogotá"; $ciudad[3][1]="Medellín"; $ciudad[3][2]="Cali"; $ciudad[3][3]="Barranquilla";
$ciudad[3][4]="Cartagena"; $ciudad[3][5]="Cúcuta"; $ciudad[3][6]="Soledad"; $ciudad[3][7]="Ibagué";
 
// Rescatamos el parámetro pais que nos llega mediante post
$paisRecibido=$_POST["pais"]; $ciudadesDevueltas="";
$existePais = false;
for ($i = 0; $i<count($pais) ; $i++) {     if ($paisRecibido == $pais[$i]) {$indicePais = $i; $existePais=true;} }

$msg = 'El pais recibido por post en segundo plano es '.$paisRecibido ;
if ($existePais) {$msg = $msg. ' y tiene indice '.$indicePais;}
$ciudadesRespuesta = "";

//  Creamos el array a devolver
for ($i = $indicePais; $i<count($ciudad[$indicePais]) ; $i++) {
    $ciudadesRespuesta .= ",".$ciudad[$indicePais][$i];
}

echo $msg.$ciudadesRespuesta;
?>

 

Crea un archivo denominado cursoAjaxCU01212F.html con el contenido que indicamos a continuación y súbelo al servidor:

<!DOCTYPE html>
<html>
<head><title>Cursos aprende a programar</title><meta charset="utf-8">

 <style type="text/css">
 *{font-family:sans-serif;} a:link {text-decoration:none;} select{font-size:18px;}
 div div {color: blue; background-color:#F1FEC6; font-size: 20px; float:left; border: solid; margin: 20px; padding:15px;}
 </style>

 <script>

function mostrarSugerencia(str) {
var xmlhttp;
var contenidosRecibidos = new Array();
var nodoMostrarResultados = document.getElementById('listaCiudades');
var contenidosAMostrar = '';

if (str.length==0) { document.getElementById("txtInformacion").innerHTML=""; nodoMostrarResultados.innerHTML = ''; return; }

xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    contenidosRecibidos = xmlhttp.responseText.split(",");
    document.getElementById("txtInformacion").innerHTML=contenidosRecibidos[0];
    for (var i=1; i<contenidosRecibidos.length;i++) {
    contenidosAMostrar = contenidosAMostrar+'<div id="ciudades'+i+'"> <a href="http://aprenderaprogramar.com">' + contenidosRecibidos[i]+ '</a></div>';
    }
    nodoMostrarResultados.innerHTML = contenidosAMostrar;
    }
}
var cadenaParametros = 'pais='+encodeURIComponent(str);
xmlhttp.open('POST', 'datosCU01212F.php'); // Método post y url invocada
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // Establecer cabeceras de petición
xmlhttp.send(cadenaParametros); // Envio de parámetros usando POST
}

</script>
</head>

<body style="margin:20px;">
<h2>Elige un país:</h2>
<form action="">
 <select onchange="mostrarSugerencia(this.value)">
  <option value="none">Elige</option>
  <option value="spain">España</option>
  <option value="mexico">México</option>
  <option value="argentina">Argentina</option>
  <option value="colombia">Colombia</option>
</select>
</form>
<br/>
<p>Informacion sobre operacion en segundo plano con POST y Ajax: <span style="color:brown;" id="txtInformacion"></span></p>
<div id="listaCiudades"> </div>
</body>
</html>

 

 

Este código es muy similar a uno que utilizamos en entregas anteriores del curso como ejemplo de uso de Ajax con GET. Fíjate que las diferencias son pocas:

- Invocamos una url con método POST y la url carece de parámetros.

- Establecemos la cabecera con setRequestHeader

- Creamos la cadena de paso de parámetros post que añadimos como parámetro en send.

- En la url invocada los datos enviados se recuperan por POST.

 

Recuerda siempre que uses POST no olvidar incluir el establecimiento de cabecera de petición, ya que en caso de no hacerlo no obtendrás resultado alguno al ignorar el servidor la petición.

 

 

RESULTADOS

Al invocar la ruta donde se encuentre el fichero html, que será del tipo http://aprenderaprogramar.com/cursoAjaxCU01212F.html, debes ser capaz de elegir opciones del combobox desplegable y visualizar resultados por pantalla. Por ejemplo, si eliges la opción “Argentina”, el resultado esperado será que por pantalla se visualice:

Informacion sobre operacion en segundo plano con Ajax: El pais recibido por post en segundo plano es argentina y tiene indice 2

Rosario                La Plata                Mar del Plata                    San Miguel de Tucumán              Ciudad de Salta

 

 

Visualmente lo que obtenemos es análogo a lo que obteníamos usando get:

ajax ejemplo basico

 

 

Si cambias la selección del país por otro país, debes observar un refresco “casi instantáneo” de modo que se modifica el texto y las ciudades que se muestran, viéndose en cada caso las correspondientes al país seleccionado.

Si eres capaz de visualizar esto, todo ha ido correctamente.

 

 

EJERCICIO

Muchas validaciones se realizan del lado del cliente usando JavaScript, pero otras se realizan del lado del servidor (por ejemplo comprobar si un nombre de usuario está libre para dar de alta a un usuario, o comprobar si un correo electrónico está libre para registrar a un usuario en un foro).

Crea un documento HTML que conste de:

a) Un título H1 con el texto “Alta de usuarios”

b) Un formulario con un campo Nombre, otro Apellidos y otro Nombre de Usuario.

c) Una utilidad Ajax que informe si el nombre de usuario ya existe cada vez que el campo correspondiente a nombre del usuario pierda el foco. En ese momento deberá mostrarse un mensaje “Nombre de usuario libre” ó si no está libre, “Nombre de usuario no disponible”.

Para comprobar si ya existe el nombre de usuario debes realizar una invocación al archivo comprobarUsuarios.php donde deberás definir la lista de nombres de usuario existentes como un array php (por ejemplo puedes usar el array nombreExistente[0]='juan'; nombreExistente[1]='pedro'; nombreExistente[2]='alfredo'; nombreExistente[3]='luis';) y añadir el código necesario para obtener la funcionalidad deseada.

 

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

MAYO - JUNIO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación