Ajax permite mandar y recibir datos de manera asincrona
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 157
Visitas el mes pasado: 307
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
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.
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:
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:
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:
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:
.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.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com