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: 171

Visitas el mes pasado: 161

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 (XI)

POST en ObjetoAjax

imagen ajax

El ObjetoAjax

A lo largo de las páginas anteriores de este manual hemos ido construyendo un objeto, el ObjetoAjax que nos facilita el trabajo de transferencia de archivos con ajax. Para ello le hemos ido añadiendo diversos métodos con los que enviar o recoger archivos.

Tras ver en la página anterior cómo se envian datos mediante POST, crearemos dos métodos para el ObjetoAjax que nos permitan enviar datos mediante POST y nos devuelvan el contenido de la página PHP.


Envio con POST y respuesta en un ID:

Crearemos aquí un método para ObjetoAjax en el que podamos enviar datos por POST y la respuesta se nos devuleve directamente escrita en un ID de la página.

Para ello creamos una función que indique qué es lo que tiene que hacer el método y lo añadimos al objeto mediante la propiedad prototype. Abrimos por tanto el archivo objetoAjax.js, y lo apliamos, escribiendo al final del mismo el siguiente código:

//Función para enviar datos por POSI y devolver en un id: 
function pedirPorPost(url,id,datos) {
     //variables que utilizamos en la función (locales)
     var nuevoajax=this.objeto; //creamos objeto XMLHttpRequest
     var idajax=id; //lugar de la página para insertar la respuesta
     var datosajax=datos; //datos a enviar por POST
     //Preparar el envio con open()
     nuevoajax.open("POST",url,true);
     //cambiar las cabeceras para el envio por POST
     nuevoajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     nuevoajax.setRequestHeader("Content-length", datosajax.length);
     nuevoajax.setRequestHeader("Connection", "close");
     //evento que activa la respuesta: 
     nuevoajax.onreadystatechange=function () {  
        if (nuevoajax.readyState==4 && nuevoajax.status==200) { //al acabar de cargarse
           var textoAjax=nuevoajax.responseText; //recibir respuesta
           document.getElementById(idajax).innerHTML=textoAjax; //insertarla en la página
           }
        }
     //envio de los datos por send()
     nuevoajax.send(datosajax); 
     } 
//Asociar la función anterior con el método "pedirPost" de ObjetoAjax mediante "prototype";	
ObjetoAjax.prototype.pedirPost=pedirPorPost;	

Creamos con esto el método pedirPost() en el cual pasamos tres parámetros, el primero la url o ruta del archivo PHP de destino. El segundo el "id" de la página HTML dónde recibir la respuesta. y el tercero los datos que queremos enviar puestos ya en el formato de envio.

La función que activa el método sigue los mismos pasos que hemos usado en la página anterior para el envio con POST, por lo que simplemente con llamar al método nos evitamos tener que repetir todos los pasos cada vez que queramos enviar algo al servidor.

Ahora en el javascript de la página simplemente preparamos los datos, instanciamos el objeto y llamamos al método. por ejemplo:

misdatos="nombre1="+valor1+"&nombre2="+valor2+"&nombre3="+valor3;
ajax1=new ObjetoAjax;
ajax1.pedirPost("archivo.php","contenedor",misdatos);

Donde valor1, valor2, valor3 son las variables donde anteriormente hemos recogido los datos que queremos enviar; "archivo.php" es la url del archivo php al que enviamos los datos; y "contenedor" es el valor del atributo "id" de la etiqueta donde se verá la respuesta del servidor.

En la página PHP del servidor se recogerán los datos por medio del array $_POST; En el caso anterior sera mediante $_POST["nombre1"]; $_POST["nombre2"]; $_POST["nombre3"];


Envio con POST y respuesta en una función

El método anterior envia los datos y nos devuleve una respuesta que vemos inmediatamente en la página en un "id" usando la propiedad "innerHTML". Esto puede servirnos para algunas ocasiones, sin embargo en otras querremos obtener la respuesta y modificarla, o usarla de manera diferente. Para ello crearemos otro método, similar al metodo cargaTexto creado en la página VIII de este manual, que nos devuelve la respuesta como parámetro de una función.

Abrimos el archivo objetoAjax.js con el editor, y le añadimos el siguiente código:

//envia datos por post y recoge el resultado en el parámetro de una función:
//devuelve el texto del archivo en el parámetro.
function cargarPost(url,funcion,datos) {
     var nuevoajax=this.objeto; 
     var funcionTexto=funcion 
     var datosajax=datos;
     nuevoajax.open("POST",url,true);
     nuevoajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     nuevoajax.setRequestHeader("Content-length", datosajax.length);
     nuevoajax.setRequestHeader("Connection", "close");
     nuevoajax.onreadystatechange=function() { 
        if (nuevoajax.readyState==4 && nuevoajax.status==200) {
           var nuevoTexto=nuevoajax.responseText; 
           funcionTexto(nuevoTexto);
           }
        }	
     nuevoajax.send(datosajax);
     }
ObjetoAjax.prototype.cargaPost=cargarPost;

Si nos fijamos el código es casi idéntico al del método anterior, salvo que en vez de pasarle un "id" como segundo parámetro le pasamos el nombre de una función, y que la respuesta se devuelve como parámetro de esa función.

Hemos creado el método cargaPost del ObjetoAjax. en el pasaremos como parámetros: 1º La url o ruta del archivo; 2º El nombre de una función que crearemos después donde recogeremos la respuesta, 3º Los datos a enviar.

Por lo tanto los pasos a seguir en el código javascript de la página seran: preparar los datos, instanciar el objeto, llamar al método (con sus parámetros), y crear la función de respuesta. El código será similar al siguiente:

misdatos="nombre1="+valor1+"&nombre2="+valor2+"&nombre3="+valor3;
ajax1=new ObjetoAjax;
ajax1.cargaPost("archivo.php",respuestaAjax,misdatos);
function respuestaAjax(archivophp) { ... }

Las tres primeras líneas de código son similares a las empleadas con el método pedirPost salvo que el segundo parámetro del método (en la tercera línea) es el nombre de la función que vemos en la cuarta línea.

En la cuarta linea (y siguientes) creamos una función. La función debe llevar un parámetro, en el cual se recoge la respuesta del archivo. El contenido de la función lo hemos dejado aquí sin poner, ya que éste variará dependiendo de lo que queramos hacer con la respuesta (parametro) recibida.

El código del archivo objetoAjax.js después de las últimas modificaciones quedará tal como lo podemos ver en el siguiente enlace:

Código objetoAjax.js (5)






En la siguiente página continuaremos con el envio de datos por POST. Veremos un ejemplo de envio de datos por POST utilizando el ObjetoAjax.

Ejemplo de envio por POST



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