Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Ajax

Ajax permite mandar y recibir datos de manera asincrona


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 1032

Visitas el mes pasado: 1272

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Curso de ajax
ProgramacionWeb.net
Ajax Tutorial
w3schools.com
Manual de Ajax, Juan Mariano Fuentes (en PDF)
elrincondeajax.com
Taller Ajax
Desarrollo Web
Turorial de Ajax
cristalab.com
Introduccción a Ajax - Javier Eguíluz Pérez
librosweb.es
mini tutorial de Ajax
Bog de Ale Muñoz en Sofa Naranja.
Using POST method in XMLHTTPRequest
Artículo de openjs.com
Tip Para Solucionar Problema con Acentos al Utilizar AJAX
webadictos.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




AJAX (X)

Enviar datos con POST

imagen ajax

GET o POST

GET y POST son las dos formas que tenemos de enviar datos al servidor.

Hasta ahora hemos usado casi exclusivamente el método GET para transferir datos al servidor. Si bien este método es el más sencillo de usar, tiene un inconveniente: al pasar los datos con la URL éstos pueden mostrarse en la barra del navegador al ser transferidos y quedan reflejados en el historial del navegador, por lo que pueden ser vistos por cualquiera que abra la página.

Además el método GET es más lento. Esto en archivos de pequeño tamaño, como los que estamos usando, no se nota, pero si hay que transferir una gran cantidad de datos deberemos usar el método POST.

Si queremos hacer un trabajo profesional, donde se guarde la privacidad de los datos, y la carga de archivos se haga de forma rápida deberemos elegir el método POST.


Forma de enviar con POST


Archivo HTML

Vamos a tomar el ejemplo de la página anterior (ejemplo9.html) para ver cómo enviar archivos mediante POST. Como crearemos un archivo Javascript nuevo modificaremos la cabecera del documento, cambiando los links a los archivos javascript. Abrimos el documento ejemplo9.html y cambiamos la etiqueta head que quedará así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ejemplo 9_1</title>
<script type="text/javascript" src="ejemplo9_1.js"></script>
</head>
<body>
<h1>Envio de datos por POST</h1>
......

Hemos cambiado los links a archivos javascript, ya que utilizaremos un único archivo que iremos creando. También hemos cambiado la primera línea del body, para indicar que utilizamos el método POST. El resto del archivo lo dejamos igual.

Una vez realizados los cambios pulsamos en "guardar como" y guardamos con el nombre de ejemplo9_1.html. Así podemos conservar el original.

Si no habias guardado el archivo de la página anterior (ejemplo9.html), puedes copiar el archivo modificado (ejemplo9_1.html) en el siguiente enlace:

Código de ejemplo9_1.html



archivo javascript

A continuación creamos el archivo ejemplo9_1.js En el que haremos la transferencia de datos en ajax con el método POST.

Como la forma de usar el método POST es distinta, no utilizaremos el ObjetoAjax creado en páginas anteriores, sino que crearemos el código desde el principio. En páginas posteriores veremos cómo insertar la forma de trabajar con POST en el ObjetoAjax.

Empezamos por crear la función que nos devuleve el objeto XMLHttpRequest:

//función creación del objeto XMLHttpRequest. 
function creaObjetoAjax () { //Mayoría de navegadores
     var obj;
     if (window.XMLHttpRequest) {
        obj=new XMLHttpRequest();
        }
     else { //para IE 5 y IE 6
        obj=new ActiveXObject(Microsoft.XMLHTTP);
        }
     return obj;
     }

Seguimos el archivo javascript. Creamos a continuación la función enviar() la cual se activa al pulsar el botón de envio del formulario.

function enviar() {
   //Recoger datos del formulario:
   reemail=document.datos.miemail.value; //Email escrito por el usuario
   recontra1=document.datos.micontra1.value; //Contraseña primera
   recontra2=document.datos.micontra2.value; //Contraseña segunda
   //datos para el envio por POST:
   misdatos="envioEmail="+reemail+"&envioContra1="+recontra1+"&envioContra2="+recontra2;
   //Objeto XMLHttpRequest creado por la función.
   objetoAjax=creaObjetoAjax();
   //Preparar el envio  con Open
   objetoAjax.open("POST","ejemplo9_1.php",true);
   //Enviar cabeceras para que acepte POST:
   objetoAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   objetoAjax.setRequestHeader("Content-length", misdatos.length);
   objetoAjax.setRequestHeader("Connection", "close");
   objetoAjax.onreadystatechange=recogeDatos;
   objetoAjax.send(misdatos); //pasar datos como parámetro
   }

En color más oscuro y negrita hemos resaltado el código necesario para enviar los datos por POST. Estas son las siguientes instrucciones:

Recoger los datos en una cadena : Al igual que con GET recogemos los datos en una cadena. Cada dato consta de un nombre y un valor separados por el signo igual. Cada dato va separado del anterior por el signo ampersand (&). La diferencia con GET es que la cadena con los datos no la pasamos por la URL sino que la enviaremos como parámetro del método send().

Cambiar las cabeceras : Para que el método POST sea admitido debemos cambiar las cabeceras, enviando nuevas cabeceras mediante el método setRequestHeader(). El código para cambiar las cabeceras es siempre el mismo, lo pondremos después del método open() y antes del método send() y enviamos tres cabeceras:

Forma de envio : los datos se envian como el primer parámetro del metodo "send": send(misdatos). En el método open() indicaremos como primer parámetro "POST" y como segundo la ruta del archivo sin añadirle nada más.

Por último nos queda crear la función recogeDatos que indicamos en el evento onreadystatechange y que será la siguiente:

function recogeDatos() {
    if (objetoAjax.readyState==4 && objetoAjax.status==200) {
        miTexto=objetoAjax.responseText;
        document.getElementById("comp").innerHTML=miTexto;
        }
    }

Con esto completamos el archivo javascript ejemplo9_1.js. Aquí hemos hecho el archivo en varias partes, pero éste tiene que ir todo seguido. si no tienes claro cómo debe quedar este archivo puedes ver el código del mismo en el siguiente enlace:

Código de ejemplo9_1.js



Archivo PHP

Si te fijas, el archivo PHP original era ejemplo9.php sin embargo nosotros hemos mandado los datos al archivo ejemplo9_1.php. Esto quiere decir que el archivo PHP también debemos modificarlo.

En el archivo PHP original los datos se recibían mediante "GET". ahora al modificar la forma de envío debemos modificar el archivo PHP para que los datos se reciban mediante POST. Esta es la única modificación que hacemos en este archivo y consiste en cambiar las líneas 4, 5 y 6 del archivo que son las siguientes:

$email=$_GET["envioEmail"]; //recoger datos de email
$contra1=$_GET["envioContra1"]; //recoger datos de contraseña 1ª
$contra2=$_GET["envioContra2"]; //recoger datos de contraseña 2ª

Por estas otras líneas:

$email=$_POST["envioEmail"]; //recoger datos de email
$contra1=$_POST["envioContra1"]; //recoger datos de contraseña 1ª
$contra2=$_POST["envioContra2"]; //recoger datos de contraseña 2ª

Es decir, cambiamos la forma de recoger los datos de GET a POST. Una vez realizado el cambio pulsamos en "Guardar como" y guardamos el archivo con el nombre de ejemplo9_1.php.

Para que quede la cosa clara dejamos también un enlace en el que podemos ver el código completo del archivo ejemplo9_1.php:

Código de ejemplo9_1.php



Comprobar el ejemplo

Por último comprobamos que el ejemplo anterior funciona correctamente. si todo ha ido bien la página (ejemplo9_1.html) debe funcionar como la del siguiente enlace:

Ejemplo 9_1.php

.

Aparentemente el envio de datos funciona igual que cuando lo hemos mandado por el método GET, sin embargo al enviarlo mediante POST podemos guardar la privacidad de los datos, además de poder enviar mayor cantidad de datos en menos tiempo.






En páginas anteriores hemos ido construyendo un objeto ObjetoAjax que nos facilita la tarea de utilizar ajax. En la próxima págiina añadiremos a este objeto unos métodos para poder enviar datos mediante POST.

POST en ObjetoAjax



Manual de Ajax

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com