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++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 157
Visitas el mes pasado: 307
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
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:
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:
- 1ª.- objetoAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); : Esta cabecera indica el tipo de contenido: los datos enviados deben tratarse como los extraidos de un formulario. Es la más importante ya que de no ponerla el archivo PHP ignorará los datos.
- 2ª.- objetoAjax.setRequestHeader("Content-length", misdatos.length); : Indica el número de datos que vamos a transmitir. De ahi en el segundo parámetro misdatos debe ser la variable donde se guardan los datos para enviar.
- 3ª.- objetoAjax.setRequestHeader("Connection", "close"); : Cierra la conexion del envio de 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:
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:
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:
.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.
imprimir esta página
Página creada por ANYELGUTI.
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