Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Enviar Datos Con POST en Ajax

    Загружено:

    bash nitter
    57 просмотров4 страницы
    Enviar Datos Con POST en Ajax

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Enviar Datos Con POST en Ajax

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    57 просмотров4 страницы

    Enviar Datos Con POST en Ajax

    Загружено:

    bash nitter
    Enviar Datos Con POST en Ajax

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 4

    Este sitio utiliza cookies para analizar la navegacin. Si contina navegando se entiende que acepta su uso.

    Ver ms
    detalles.";

    Entendido.

    Aprende
    Web
    Crea y disea 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++

    HRIS, Payroll &


    Time

    Fully Integrated Solution


    HRplus Software Ltd

    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 mtodo GET
    para transferir datos al servidor. Si bien este mtodo es el ms 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 pgina.
    Adems el mtodo GET es ms lento. Esto en archivos de pequeo
    tamao, como los que estamos usando, no se nota, pero si hay que transferir una gran
    cantidad de datos deberemos usar el mtodo POST.
    Si queremos hacer un trabajo profesional, donde se guarde la privacidad de los datos, y
    la carga de archivos se haga de forma rpida deberemos elegir el mtodo POST.

    Forma de enviar con POST


    Archivo HTML
    Vamos a tomar el ejemplo de la pgina anterior (ejemplo9.html) para ver cmo 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 headque 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. Tambin hemos cambiado la primera lnea del body, para indicar que
    utilizamos el mtodo 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 pgina anterior (ejemplo9.html), puedes copiar el
    archivo modificado (ejemplo9_1.html) en el siguiente enlace:
    Cdigo de ejemplo9_1.html

    archivo javascript
    A continuacin creamos el archivo ejemplo9_1.js En el que haremos la transferencia de
    datos en ajax con el mtodo POST.
    Como la forma de usar el mtodo POST es distinta, no utilizaremos el ObjetoAjax creado
    en pginas anteriores, sino que crearemos el cdigo desde el principio. En pginas
    posteriores veremos cmo insertar la forma de trabajar con POST en el ObjetoAjax.
    Empezamos por crear la funcin que nos devuleve el objeto XMLHttpRequest:
    //funcin creacin del objeto XMLHttpRequest.
    function creaObjetoAjax () { //Mayora 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 continuacin la funcin


    se activa al pulsar el botn de envio del formulario.

    enviar()la cual

    function enviar() {
    //Recoger datos del formulario:
    reemail=document.datos.miemail.value; //Email escrito por el usuario
    recontra1=document.datos.micontra1.value; //Contrasea primera
    recontra2=document.datos.micontra2.value; //Contrasea segunda
    //datos para el envio por POST:
    misdatos="envioEmail="+reemail+"&envioContra1="+recontra1+"&envioContra2="+recontra2;
    //Objeto XMLHttpRequest creado por la funcin.
    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 parmetro
    }

    En color ms oscuro y negrita hemos resaltado el cdigo 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 parmetro del mtodo
    send().
    Cambiar las cabeceras : Para que el mtodo POST sea admitido debemos cambiar las
    cabeceras, enviando nuevas cabeceras mediante el mtodo setRequestHeader(). El
    cdigo para cambiar las cabeceras es siempre el mismo, lo pondremos despus del mtodo
    open()y antes del mtodo send()y enviamos tres cabeceras:

    objetoAjax.setRequestHeader("Content-type",
    "application/x-www-form-urlencoded"); : Esta cabecera indica el
    1.-

    tipo de contenido: los datos enviados deben tratarse como los extraidos de un
    formulario. Es la ms importante ya que de no ponerla el archivo PHP ignorar los datos.
    2.objetoAjax.setRequestHeader("Content-length",
    misdatos.length);: Indica el nmero de datos que vamos a transmitir. De ahi
    en el segundo parmetro misdatosdebe 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 parmetro del metodo "send":

    send(misdatos). En el mtodo open() indicaremos como primer parmetro


    "POST"y como segundo la ruta del archivo sin aadirle nada ms.
    Por ltimo nos queda crear la funcin recogeDatosque indicamos en el evento
    onreadystatechangey 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 cmo debe quedar
    este archivo puedes ver el cdigo del mismo en el siguiente enlace:
    Cdigo 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 tambin
    debemos modificarlo.
    En el archivo PHP original los datos se reciban mediante "GET". ahora al modificar la
    forma de envo debemos modificar el archivo PHP para que los datos se reciban mediante
    POST. Esta es la nica modificacin que hacemos en este archivo y consiste en cambiar las
    lneas 4, 5 y 6 del archivo que son las siguientes:
    $email=$_GET["envioEmail"]; //recoger datos de email
    $contra1=$_GET["envioContra1"]; //recoger datos de contrasea 1
    $contra2=$_GET["envioContra2"]; //recoger datos de contrasea 2

    Por estas otras lneas:

    $email=$_POST["envioEmail"]; //recoger datos de email


    $contra1=$_POST["envioContra1"]; //recoger datos de contrasea 1
    $contra2=$_POST["envioContra2"]; //recoger datos de contrasea 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 tambin un enlace en el que podemos ver el
    cdigo completo del archivo ejemplo9_1.php:
    Cdigo de ejemplo9_1.php

    Comprobar el ejemplo
    Por ltimo comprobamos que el ejemplo anterior funciona correctamente. si todo ha ido
    bien la pgina (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
    mtodo GET, sin embargo al enviarlo mediante POST podemos guardar la privacidad de los
    datos, adems de poder enviar mayor cantidad de datos en menos tiempo.

    En pginas anteriores hemos ido construyendo un objeto ObjetoAjax que nos facilita la
    tarea de utilizar ajax. En la prxima pgiina aadiremos a este objeto unos mtodos para
    poder enviar datos mediante POST.
    POST en ObjetoAjax

    Вам также может понравиться