comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[AJAX] Un breve repaso

  • 1 Respuestas
  • 1269 Vistas

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

Desconectado kid_goth

  • *
  • Underc0der
  • Mensajes: 201
  • Actividad:
    0%
  • Reputación 3
  • Tu conocimiento se limita cuando dices NO PUEDO...
    • Ver Perfil
    • DC Projects
    • Email
« en: Junio 23, 2012, 03:59:32 pm »
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
  1. function nuevoAjax(){
  2.     var xmlhttp=false;
  3.     try
  4.     {
  5.          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  6.     }
  7.     catch (e)
  8.     {
  9.          try
  10.          {
  11.              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  12.          }
  13.         catch (E)
  14.         {
  15.              xmlhttp = false;
  16.         }
  17.     }
  18.     if(!xmlhttp && typeof XMLHttpRequest!='undefined')
  19.     {
  20.          xmlhttp = new XMLHttpRequest();
  21.     }
  22.     return xmlhttp;
  23. }
  24.  

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
  1. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  2. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  3.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Manejo Basico de Ajax</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  4. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  5. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  6. <No tienes permisos para ver links. Registrate o Entra con tu cuenta style="position: relative; width: 600px; left: 50%; margin-left: -300px; text-align: center;">
  7. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Base64 Cipher/Decipher</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  8. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>by Hackxcrack</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  9.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  10.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta action="index.php" method="post">
  11.         <No tienes permisos para ver links. Registrate o Entra con tu cuenta type="text" name="texto"><No tienes permisos para ver links. Registrate o Entra con tu cuenta><No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  12.         <No tienes permisos para ver links. Registrate o Entra con tu cuenta type="submit" name="btn_ope" value="Cipher">&nbsp;&nbsp;<No tienes permisos para ver links. Registrate o Entra con tu cuenta type="submit" name="btn_ope" value="Decipher">
  13.     </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  14. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  15. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  16. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  17.  

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
  1. <?php
  2. if(No tienes permisos para ver links. Registrate o Entra con tu cuenta($_POST['btn_ope']) && $_POST['texto'] != "")
  3. {
  4.     $text_procesado="";
  5.     if($_POST['btn_ope'] == "Cipher")
  6.     {
  7.         $text_procesado = No tienes permisos para ver links. Registrate o Entra con tu cuenta($_POST['texto']);
  8.     }
  9.     else if($_POST['btn_ope'] == "Decipher")
  10.     {
  11.         $text_procesado = No tienes permisos para ver links. Registrate o Entra con tu cuenta($_POST['texto']);
  12.     }
  13. }
  14. ?>
  15.  

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
  1. <?php
  2. if(No tienes permisos para ver links. Registrate o Entra con tu cuenta($_POST['btn_ope']) && $_POST['texto'] != "")
  3. {
  4.     $text_procesado="";
  5.     if($_POST['btn_ope'] == "Cipher")
  6.     {
  7.         $text_procesado = No tienes permisos para ver links. Registrate o Entra con tu cuenta($_POST['texto']);
  8.     }
  9.     else if($_POST['btn_ope'] == "Decipher")
  10.     {
  11.         $text_procesado = No tienes permisos para ver links. Registrate o Entra con tu cuenta($_POST['texto']);
  12.     }
  13. }
  14. ?>
  15. <html>
  16. <head>
  17.     <title>Manejo Basico de Ajax</title>
  18. </head>
  19. <body>
  20. <div style="position: relative; width: 600px; left: 50%; margin-left: -300px; text-align: center;">
  21. <h2>Base64 Cipher/Decipher</h2>
  22. <h1>by Hackxcrack</h1>
  23.     <br>
  24.     <form action="index.php" method="post">
  25.         <input type="text" name="texto"><br><br>
  26.         <input type="submit" name="btn_ope" value="Cipher">&nbsp;&nbsp;<input type="submit" name="btn_ope" value="Decipher">
  27.     </form>
  28.     <br>
  29.     <?php
  30.         if(No tienes permisos para ver links. Registrate o Entra con tu cuenta($text_procesado) && $text_procesado != "")
  31.         {
  32.             echo $text_procesado;
  33.         }
  34.     ?>
  35. </div>
  36. </body>
  37. </html>
  38.  

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
  1.  <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  2.  <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  3.      <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Manejo Basico de Ajax</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  4.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta type="text/javascript" src="ajax.js" language="javascript"></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  5.  </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  6.  <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  7.  <No tienes permisos para ver links. Registrate o Entra con tu cuenta style="position: relative; width: 600px; left: 50%; margin-left: -300px; text-align: center;">
  8.  <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Base64 Cipher/Decipher</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  9.  <No tienes permisos para ver links. Registrate o Entra con tu cuenta>by Hackxcrack</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  10.      <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  11.      <No tienes permisos para ver links. Registrate o Entra con tu cuenta action="#">
  12.          <No tienes permisos para ver links. Registrate o Entra con tu cuenta type="text" name="texto"><No tienes permisos para ver links. Registrate o Entra con tu cuenta><No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  13.          <No tienes permisos para ver links. Registrate o Entra con tu cuenta type="button" name="btn_ope" value="Cipher">&nbsp;&nbsp;<No tienes permisos para ver links. Registrate o Entra con tu cuenta type="button" name="btn_ope" value="Decipher">
  14.      </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  15.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta><No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  16.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="contenedor" style="text-align: center;"></No tienes permisos para ver links. Registrate o Entra con tu cuenta> <!-- Contenedor para el ajax -->
  17.  </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  18.  </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  19.  </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  20.  


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

 
Código: PHP
  1.  <?php
  2. No tienes permisos para ver links. Registrate o Entra con tu cuenta(0); //no queremos alertas
  3.  if(No tienes permisos para ver links. Registrate o Entra con tu cuenta($_POST['btn_ope']) && $_POST['texto'] != "")
  4.  {
  5.      if($_POST['btn_ope'] == "Cipher")
  6.      {
  7.          echo No tienes permisos para ver links. Registrate o Entra con tu cuenta($_POST['texto']);
  8.      }
  9.      else if($_POST['btn_ope'] == "Decipher")
  10.      {
  11.          echo No tienes permisos para ver links. Registrate o Entra con tu cuenta($_POST['texto']);
  12.      }
  13.  }
  14.  ?>
  15.  


el unico cambio que se hace es que imprima directamente.

y por ultimo el ajax.js

Código: Javascript
  1. function nuevoAjax(){
  2.     var xmlhttp=false;
  3.      try
  4.     {
  5.          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  6.      }
  7.     catch (e)
  8.     {
  9.          try
  10.         {
  11.              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  12.          }
  13.         catch (E)
  14.         {
  15.              xmlhttp = false;
  16.          }
  17.       }
  18.     if (!xmlhttp && typeof XMLHttpRequest!='undefined')
  19.     {
  20.          xmlhttp = new XMLHttpRequest();
  21.     }
  22.     return xmlhttp;
  23. }
  24.  
  25. function operar(btn)
  26. {
  27.     var contenedor = document.getElementById('contenedor');
  28.     var pag = 'funcion.php';
  29.     var texto = "texto="+document.getElementById('texto').value+"&btn_ope="+btn.value;    
  30.     var ajax = nuevoAjax();
  31.    
  32.     ajax.open("POST", pag, true);
  33.     contenedor.innerHTML='Cargando...';
  34.    
  35.     ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  36.     ajax.setRequestHeader("Content-length", texto.length);
  37.     ajax.setRequestHeader("Connection", "close");
  38.    
  39.     ajax.onreadystatechange=function()
  40.     {
  41.         if (ajax.readyState==4)
  42.         {
  43.             contenedor.innerHTML = ajax.responseText;
  44.         }
  45.     }
  46.     ajax.send(texto);
  47. }
  48.  

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:

ajax.open("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
  1. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  2. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  3.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Manejo Basico de Ajax</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  4.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta type="text/javascript" src="ajax.js" language="javascript"></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  5. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  6. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  7. <No tienes permisos para ver links. Registrate o Entra con tu cuenta style="position: relative; width: 600px; left: 50%; margin-left: -300px; text-align: center;">
  8. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Base64 Cipher/Decipher</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  9. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>by Hackxcrack</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  10.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  11.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta action="#">
  12.         <No tienes permisos para ver links. Registrate o Entra con tu cuenta type="text" name="texto" id="texto"><No tienes permisos para ver links. Registrate o Entra con tu cuenta><No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  13.         <No tienes permisos para ver links. Registrate o Entra con tu cuenta type="button" value="Cipher" onclick="operar(this);">&nbsp;&nbsp;
  14.         <No tienes permisos para ver links. Registrate o Entra con tu cuenta type="button" value="Decipher" onclick="operar(this);">
  15.     </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  16.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta><No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  17.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="contenedor" style="text-align: center;"></No tienes permisos para ver links. Registrate o Entra con tu cuenta> <!-- Contenedor para el ajax -->
  18. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  19. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  20. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  21.  

ajax.js

Código: Javascript
  1. function nuevoAjax(){
  2.     var xmlhttp=false;
  3.      try
  4.     {
  5.          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  6.      }
  7.     catch (e)
  8.     {
  9.          try
  10.         {
  11.              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  12.          }
  13.         catch (E)
  14.         {
  15.              xmlhttp = false;
  16.          }
  17.       }
  18.     if (!xmlhttp && typeof XMLHttpRequest!='undefined')
  19.     {
  20.          xmlhttp = new XMLHttpRequest();
  21.     }
  22.     return xmlhttp;
  23. }
  24.  
  25. function operar(btn)
  26. {
  27.     var contenedor = document.getElementById('contenedor');
  28.     var pag = 'funcion.php';
  29.     var texto = "texto="+document.getElementById('texto').value+"&btn_ope="+btn.value;    
  30.     var ajax = nuevoAjax();
  31.    
  32.     ajax.open("POST", pag, true);
  33.     contenedor.innerHTML='Cargando...';
  34.    
  35.     ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  36.     ajax.setRequestHeader("Content-length", texto.length);
  37.     ajax.setRequestHeader("Connection", "close");
  38.    
  39.     ajax.onreadystatechange=function()
  40.     {
  41.         if (ajax.readyState==4)
  42.         {
  43.             contenedor.innerHTML = ajax.responseText;
  44.         }
  45.     }
  46.     ajax.send(texto);
  47. }
  48.  


y funcion.php

Código: PHP
  1. <?php
  2. No tienes permisos para ver links. Registrate o Entra con tu cuenta(0); //no queremos alertas
  3. if(No tienes permisos para ver links. Registrate o Entra con tu cuenta($_POST['btn_ope']) && $_POST['texto'] != "")
  4. {
  5.     if($_POST['btn_ope'] == "Cipher")
  6.     {
  7.         echo No tienes permisos para ver links. Registrate o Entra con tu cuenta($_POST['texto']);
  8.     }
  9.     else if($_POST['btn_ope'] == "Decipher")
  10.     {
  11.         echo No tienes permisos para ver links. Registrate o Entra con tu cuenta($_POST['texto']);
  12.     }
  13. }
  14. else
  15. {
  16.     echo "Error";
  17. }
  18. ?>
  19.  


les dejo el proyecto para descargar de aqui:     No tienes permisos para ver links. Registrate o Entra con tu cuenta

y por si lo quieren ver online:   Con Ajax -> No tienes permisos para ver links. Registrate o Entra con tu cuenta  sin ajax No tienes permisos para ver links. Registrate o Entra con tu cuenta

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

Saludos Kid_Goth
« Última modificación: Mayo 06, 2014, 03:26:46 pm por Destructor.cs »
No tienes permisos para ver links. Registrate o Entra con tu cuenta

Acepta con humildad y aprecio que en la vida la muerte es inevitable y amarás ésta, adorando la muerte

Desconectado Pr0ph3t

  • *
  • Underc0der
  • Mensajes: 443
  • Actividad:
    0%
  • Reputación 0
  • © Underc0de Team
    • Ver Perfil
  • Skype: thebrowfc
« Respuesta #1 en: Junio 23, 2012, 04:16:53 pm »
Ahora lo leo, gracias por el aporte bro ;)
Twitter: @The_Pr0ph3t
pr0ph3t@hotmail.es

 

¿Te gustó el post? COMPARTILO!