[AJAX] Un breve repaso

Iniciado por kid_goth, Junio 23, 2012, 03:59:32 PM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario
Junio 23, 2012, 03:59:32 PM Ultima modificación: Mayo 06, 2014, 03:26:46 PM por Destructor.cs
Requrimientos para seguir la Guia tener conocimientos basicos de Javascript y php (y obviamente manejar HTML xD).

Dedicado para Qfa xD, bueno me pongo a hacer esta miniguia de como se usa la libreria AJAX de Javascript, como solo es el manejo no explicare que es, ya que en Wikipedia lo encuentra ufff... eso si, les dire que es bastante sencillo el uso xD...

Bueno antes que nada debemos tener la funcion que cumplira nuestra labor yo uso una que modificamos con mi profe hace ya un tiempillo y me parece que esta buena... hay otras mas directas y sencillas podes usar la que quieras xD.... la funcion es esta:

Código: javascript

function nuevoAjax(){
    var xmlhttp=false;
    try
    {
         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
         try
         {
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
        catch (E)
        {
             xmlhttp = false;
        }
    }
    if(!xmlhttp && typeof XMLHttpRequest!='undefined')
    {
         xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}


y paso a explicar:

Para el correcto funcionamiento del mismo en cualquier navegado se crearon los objetos de XML, como todos sabemos Try y Catch son manejadores de excepcion es, y sirven para que en moendo de error no se detenga el proceso (o como mal decimos senos trabe la pc xD en este caso el navegador), y de paso para el programador manejar esos errores y saber en donde esta el problema si asi lo requiere.

Los navegadores de Microsoft, o sea el IE necesita de un Objeto ActiveX para crear el objeto XML, y dependiendo la version que se trabaje estos trabajan una u otra version de ActiveX es por eso que primero se intenta con Msxml2.XMLHTTP y luego Microsoft.XMLHTTP ambas cumplen la misma funcion pero en caso de que falte alguna como pr ejemplo en IE6 sin actualizar no existe Msxml2.XMLHTTP asiq eu se prueba con su version anterior (que si trae de forma nativa) Microsoft.XMLHTTP.

Y por ultimo en caso de que no sea un IE queno pudo cargar un objeto ActiveX (la causa puede ser otro navegador aunqeu en estos tiempos la mayoria tienen todo xD) se intenta cargar de la forma XMLHttpRequest(); que ya esta un poco mas generalizada.

Bien una vez que se crea un objeto XML se procede a hacersele llamado y disfrutar de sus ventajas entre la que destaco web dinamicas sin recarga de la misma y para mayor entendimiento haremos un ejemplo:

Ejemplo: crear un miniaplicativo web que te cifre y descifre texto en base64 con Ajax y php, debe funcionar con 2 botones (Cifrar y Descifrar) y un textbox para incluir el texto a procesar.

Bien pues antes que nada preparar la interfaz grafica y primero que todo lo haremos de la forma normal como se haria sin ajax para que comprendan un poco lo que hace este xD y noten la diferencia, esto lo haremos con HTML y PHP no mas:

Código: html5

<html>
<head>
    <title>Manejo Basico de Ajax</title>
</head>
<body>
<div style="position: relative; width: 600px; left: 50%; margin-left: -300px; text-align: center;">
<h2>Base64 Cipher/Decipher</h2>
<h1>by Hackxcrack</h1>
    <br>
    <form action="index.php" method="post">
        <input type="text" name="texto"><br><br>
        <input type="submit" name="btn_ope" value="Cipher">&nbsp;&nbsp;<input type="submit" name="btn_ope" value="Decipher">
    </form>
</div>
</body>
</html>


Bien con esto ya tenemos una pagina (muy sencilla) que tiene el textbox y los 2 botones dentro de un formulario que se envia los datos hacia la misma index.php (o sea ella misma) por el metodo post xD... se puede deci que de momento no hace nada y para que haga algo pos debemos crear el php que procesara esos datos :D

entonces creamos el php arriba o donde quieras operamos lo que se escribio en el textbox (Ciframos o Desciframos segun se haya dado la orden) y por ultimo imprimimos el resultado (este si lo imprimimos debajo del form xD, para darle "orden" claro esta que lo pueden imprimir donde sea siempre y cuando este dentro del body :D).

bueno la funcion php que uso es esta:

Código: php

<?php
if(isset($_POST['btn_ope']) && $_POST['texto'] != "")
{
    $text_procesado="";
    if($_POST['btn_ope'] == "Cipher")
    {
        $text_procesado = base64_encode($_POST['texto']);
    }
    else if($_POST['btn_ope'] == "Decipher")
    {
        $text_procesado = base64_decode($_POST['texto']);
    }
}
?>


Explicacion: Valido con el if que se haya apretado algun boton (btn_ope) y de paso que el textbox <texto> no este en blanco o vacio, luego verifico cual de los dos botones precionaron y dependiendo del que hayan presionado le asigno el valor de encode o decode a la variable $text_procesado...

ahora ya con el html que hicimos anteriormente imprimimos lo que se requiera jejejej y nos quedaria asi:

Código: php

<?php
if(isset($_POST['btn_ope']) && $_POST['texto'] != "")
{
    $text_procesado="";
    if($_POST['btn_ope'] == "Cipher")
    {
        $text_procesado = base64_encode($_POST['texto']);
    }
    else if($_POST['btn_ope'] == "Decipher")
    {
        $text_procesado = base64_decode($_POST['texto']);
    }
}
?>
<html>
<head>
    <title>Manejo Basico de Ajax</title>
</head>
<body>
<div style="position: relative; width: 600px; left: 50%; margin-left: -300px; text-align: center;">
<h2>Base64 Cipher/Decipher</h2>
<h1>by Hackxcrack</h1>
    <br>
    <form action="index.php" method="post">
        <input type="text" name="texto"><br><br>
        <input type="submit" name="btn_ope" value="Cipher">&nbsp;&nbsp;<input type="submit" name="btn_ope" value="Decipher">
    </form>
    <br>
    <?php
        if(isset($text_procesado) && $text_procesado != "")
        {
            echo $text_procesado;
        }
    ?>
</div>
</body>
</html>


Bien si lo probamos en un servidor ya deberia funcionar pero como ven al presionar un boton se alcanza a ver la carga aunque demora muy poco (tal vez ni se note -.-)...

Ahora vamos a usar el ajax para que vean que en ningun momento la pagina se recarga. (Nota: Cabe aclarar que cuando son datos demasiado grandes se va notar mejor jejejeje...)

Bien pos vamos a separar ese php del index.php a un archivo aparte, asi que nos quedarian los siguientes archivos:

index.html -> podemos cambiar ahora la extencion a html ya que no se requiere de php en ese archivo y agregamos un enlace hacia el script de ajax, luego cambiamos los parametros del form quitandole el method y cambiando el action a #, luego cambiaremos los botones que ya no seran submit sino button (asi no enviaran el form al darles clic) y por ultimo para que el JS puede agregar el dato que recibe del php vamos a crear un contenedor que sera el que se cargara dinamicamente :D...


Código: html5

 <html>
 <head>
     <title>Manejo Basico de Ajax</title>
    <script type="text/javascript" src="ajax.js" language="javascript"></script>
 </head>
 <body>
 <div style="position: relative; width: 600px; left: 50%; margin-left: -300px; text-align: center;">
 <h2>Base64 Cipher/Decipher</h2>
 <h1>by Hackxcrack</h1>
     <br>
     <form action="#">
         <input type="text" name="texto"><br><br>
         <input type="button" name="btn_ope" value="Cipher">&nbsp;&nbsp;<input type="button" name="btn_ope" value="Decipher">
     </form>
    <br><br>
    <div id="contenedor" style="text-align: center;"></div> <!-- Contenedor para el ajax -->
 </div>
 </body>
 </html>



funcion.php -> alli alojaremos el php el cual modificaremos un poco para efectos de automatizacion xD...


Código: php

 <?php
error_reporting(0); //no queremos alertas
 if(isset($_POST['btn_ope']) && $_POST['texto'] != "")
 {
     if($_POST['btn_ope'] == "Cipher")
     {
         echo base64_encode($_POST['texto']);
     }
     else if($_POST['btn_ope'] == "Decipher")
     {
         echo base64_decode($_POST['texto']);
     }
 }
 ?>



el unico cambio que se hace es que imprima directamente.

y por ultimo el ajax.js

Código: javascript

function nuevoAjax(){
    var xmlhttp=false;
     try 
    {
         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
     }
    catch (e) 
    {
         try 
        {
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         } 
        catch (E) 
        {
             xmlhttp = false;
         }
      }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') 
    {
         xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function operar(btn)
{
    var contenedor = document.getElementById('contenedor');
    var pag = 'funcion.php';
    var texto = "texto="+document.getElementById('texto').value+"&btn_ope="+btn.value;    
    var ajax = nuevoAjax();
    
    ajax.open("POST", pag, true);
    contenedor.innerHTML='Cargando...';
    
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.setRequestHeader("Content-length", texto.length);
    ajax.setRequestHeader("Connection", "close");
    
    ajax.onreadystatechange=function()
    {
        if (ajax.readyState==4) 
        {
            contenedor.innerHTML = ajax.responseText; 
        }
    }
    ajax.send(texto);
}


paso a explicar:

Creamos la funcion nuevoAjax que ya la explique, y luego nuesrta funcion operar que trae las siguientes pautas:

Declaracion de variables

var contenedor = document.getElementById('contenedor');     -->  el contenedor de nuestro HTML, donde se pondra el resultado del ajax :D

var pag = 'funcion.php';  -->  La pagina a la que se direccionaran los datos que escribamos en nuestro texto y el valor del boton que se envie.

var texto = "texto="+document.getElementById('texto').value+"&btn_ope="+btn.value;    -->  las variables que se enviaran en este caso texto y el valor del boton xD..

var ajax = nuevoAjax(); -->  Esta sera la instancia de buevoAjax(); :D

Operaciones:

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta("POST", pag, true);  -->  Abre la coneccion hacia la pagina que hemos declarado (en este caso funcion.php)

contenedor.innerHTML='Cargando...';  -->  pone en el contenedor "cargando..." aqui pueden dejar volar su imaginacion, por ejemplo poner una imagen de un gif cargando o lo que quieran, pueden poner cualquier tipo de etiqeuta html...

ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  -->  Como nosotros estamos usando el metodo post para el envio de los datos, debemos indicar que estos datos son de un formulario y que van en formato url.

ajax.setRequestHeader("Content-length", texto.length);  -->  luego le decimos la cantidad de caracteres que se envian.

ajax.setRequestHeader("Connection", "close"); -->  y por ultimo cerramos conexion.

Ultimas operaciones:

ajax.onreadystatechange=function() -->  se verifica el estado del envio de datos
{                                                                 
    if (ajax.readyState==4) -->  Se valida el estado del envio de datos, el 4 es el ultimo paso asi que cuando se llega a este quiere decir que fue satisfactorio :D
    {
        contenedor.innerHTML = ajax.responseText;   -->  y se muestra en el contenedor lo que resulto de la pagina
    }
}
ajax.send(texto);  --> Se envian las variables (cuando es GET se pone null)...

Bueno yo he creado esta explcacion con el metodo post ya que GET es lo mas normal y fail asi que este lo pueden aprender en otros sitios :D...

Por ultimo queda decir que para que funcione debemos poner el operar en un evento de los botos, para el caso lo pondre en onclick, de aqui en adelante seria de su imaginacion modificar hasta crear algo mas bonito, pro ejemplo que en vez de que debas darle click a botones, solo elijas (en un radio button o en un select) el metodo que quieres y que a medida que vayas escribiendo en el texbox te vaya mostrando la operacion :P...

Bueno ya es de su imaginacion, por ultimo dejo los 3 scrips finales aqui:

Index.html

Código: html5

<html>
<head>
    <title>Manejo Basico de Ajax</title>
    <script type="text/javascript" src="ajax.js" language="javascript"></script>
</head>
<body>
<div style="position: relative; width: 600px; left: 50%; margin-left: -300px; text-align: center;">
<h2>Base64 Cipher/Decipher</h2>
<h1>by Hackxcrack</h1>
    <br>
    <form action="#">
        <input type="text" name="texto" id="texto"><br><br>
        <input type="button" value="Cipher" onclick="operar(this);">&nbsp;&nbsp;
        <input type="button" value="Decipher" onclick="operar(this);">
    </form>
    <br><br>
    <div id="contenedor" style="text-align: center;"></div> <!-- Contenedor para el ajax -->
</div>
</body>
</html>


ajax.js

Código: javascript

function nuevoAjax(){
    var xmlhttp=false;
     try 
    {
         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
     }
    catch (e) 
    {
         try 
        {
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         } 
        catch (E) 
        {
             xmlhttp = false;
         }
      }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') 
    {
         xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function operar(btn)
{
    var contenedor = document.getElementById('contenedor');
    var pag = 'funcion.php';
    var texto = "texto="+document.getElementById('texto').value+"&btn_ope="+btn.value;    
    var ajax = nuevoAjax();
    
    ajax.open("POST", pag, true);
    contenedor.innerHTML='Cargando...';
    
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.setRequestHeader("Content-length", texto.length);
    ajax.setRequestHeader("Connection", "close");
    
    ajax.onreadystatechange=function()
    {
        if (ajax.readyState==4) 
        {
            contenedor.innerHTML = ajax.responseText; 
        }
    }
    ajax.send(texto);
}



y funcion.php

Código: php

<?php
error_reporting(0); //no queremos alertas
if(isset($_POST['btn_ope']) && $_POST['texto'] != "")
{
    if($_POST['btn_ope'] == "Cipher")
    {
        echo base64_encode($_POST['texto']);
    }
    else if($_POST['btn_ope'] == "Decipher")
    {
        echo base64_decode($_POST['texto']);
    }
}
else
{
    echo "Error";
}
?>



les dejo el proyecto para descargar de aqui:     No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

y por si lo quieren ver online:   Con Ajax -> No tienes permitido ver los links. Registrarse o Entrar a mi cuenta  sin ajax No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Por ultimo recordarles cualquier pregunta, sugerencia, correccion decirmela y veremos que entre todos nos ayudamos...

Saludos Kid_Goth

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Acepta con humildad y aprecio que en la vida la muerte es inevitable y amarás ésta, adorando la muerte
Junio 23, 2012, 04:16:53 PM #1
Ahora lo leo, gracias por el aporte bro ;)
Twitter: @The_Pr0ph3t
[email protected]
Imprimir
Ir Arriba Páginas1
Acciones del Usuario