Hack x Crack - Comunidad de Seguridad informática

Programación => Programación Web => Mensaje iniciado por: kid_goth en Junio 23, 2012, 08:57:19 pm

Título: AJAX un breve repaso
Publicado por: kid_goth en Junio 23, 2012, 08:57:19 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: [Seleccionar]
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: [Seleccionar]
<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: [Seleccionar]
<?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: [Seleccionar]
<?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: [Seleccionar]
<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: [Seleccionar]
<?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: [Seleccionar]
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:

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: [Seleccionar]
<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: [Seleccionar]
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: [Seleccionar]
<?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:     http://www.mediafire.com/?m51d0gfb4qtimde

y por si lo quieren ver online:   Con Ajax -> http://www.dcprojects.net/ajax  sin ajax http://www.dcprojects.net/ajax/sin

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

Saludos Kid_Goth
Título: Re:AJAX un breve repaso
Publicado por: The_GanGsTar en Junio 23, 2012, 09:09:01 pm
Simplemente magnifico Gracias!!!
Título: Re:AJAX un breve repaso
Publicado por: ACK en Junio 23, 2012, 11:33:32 pm
Gracias kid! Excelente! :D
Título: Re:AJAX un breve repaso
Publicado por: 3V1L en Junio 30, 2012, 08:48:12 am
Bro magnifica explicacion y aparte lo implementaste para poder verlo, muy buen trabajo bro!

Gracias por compartirlo
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 06, 2012, 08:05:24 pm
O.o Gracias!! xdd Ahora por la noche empiezo a ensayarlo...
Gracias! xd
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 07, 2012, 04:05:48 pm
Una pregunta...
Para enviar las cosas por el metodo POST que es asi
Código: [Seleccionar]
var texto = "texto="+document.getElementById('texto').value+"&btn_ope="+btn.value; 
Código: [Seleccionar]
"texto="+document.getElementById('texto').value+document.getElementById('text').value+"&btn_ope="+btn.value;
Oh se crea otra linea?? Es que lo intente y no me funciono... xd
Título: Re:AJAX un breve repaso
Publicado por: kid_goth en Julio 07, 2012, 05:26:48 pm
mi no entender tu pregunta Qfa :D  quieres enviar mas cosas? (o sea poner mas opciones) o que querer hacer recuerda que para enviar por post debes obligado poner las cabeceras en el orden que las puse :D


Código: [Seleccionar]
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.setRequestHeader("Content-length", texto.length);
ajax.setRequestHeader("Connection", "close");


despues de abrir el ajax :D


pero por si acaso esa segunda linea tiene 2 referencias y una parece no existir :D

a lo que me refiero es -> document.getElementById('texto').value+document.getElementById('text')

esas van seguidas y son de distinto objeto :D asi que pos ese puede ser el error aunque no se si estas haciendo un ensayo por tu cuenta y puedes tener esos 2 campos...

Código: [Seleccionar]
"texto="+document.getElementById('texto').value+document.getElementById('text').value+"&btn_ope="+btn.value;
deberia ir asi :

Código: [Seleccionar]
var texto = "texto="+document.getElementById('texto').value+document.getElementById('text').value+"&btn_ope="+btn.value;
y recuerda en la segunda linea de los headers llamar a esa variable segun corresponda, me refiero a esta:

ajax.setRequestHeader("Content-length", texto.length);  ese texto debes reemplazarlo por el nombre de la variable y por si acaso si usas firefox para pruebas ten a mano la consola de errores y mira si da algun error que asi es mas facil solucionarlo...

Saludos

Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 07, 2012, 07:17:08 pm

Por poner el codigo borre mi pregunta! xdd Y si, es eso estaba probando poner 2 TextBox el que ya existe en el ensayo y otro que lo llame Text...
 A ver si entendi entonces seria Algo asi?
Código: [Seleccionar]
var texto = "texto="+document.getElementById('texto').value+document.getElementById('text').value+"&btn_ope="+btn.value;
 
 
Y al momento de Mandar  a llamarlo al segundo text seria asi?
Código: [Seleccionar]

if(isset($_POST['btn_ope']) && $_POST['texto'] != "" && $_POST['text']!="")
 

Verificando si es diferente de vasillo y lo demas...
Título: Re:AJAX un breve repaso
Publicado por: kid_goth en Julio 07, 2012, 08:47:42 pm
a ojo diria que si debe funcionar pero no lo he probado... :D
Título: Re:AJAX un breve repaso
Publicado por: deivid en Julio 07, 2012, 11:26:44 pm
Muy bueno el tutorial, haber que aprendo.
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 10, 2012, 08:20:36 pm
Pues lo Probe y no me funciono... :/
Título: Re:AJAX un breve repaso
Publicado por: kid_goth en Julio 10, 2012, 10:01:19 pm
y que error te da??? revisa en la consola de errores que te dije ;) y nos cuentas
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 11, 2012, 05:58:37 pm
Curioso... En Chrome no me funciona Pero, en FireFox si.... xD
Título: Re:AJAX un breve repaso
Publicado por: kid_goth en Julio 11, 2012, 06:25:11 pm
¬¬ eso es raro deberia ir en ambos normalmente
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 11, 2012, 06:49:22 pm
Mira las modificaciones que eh hecho...
Pagina HTML
Código: [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Primeros Pasos Ajax</title>
    <script type="text/javascript" src="ajax2.js" language="javascript"></script>
</head>
<br />
<div align="center">
<form action="#">
    <input type="text" name="texto" id="texto"><br>
        <input type="text" name="Nose" id="Nose"><br><br>
        <input type="button" value="Cipher" onClick="operar(this);">&nbsp;&nbsp;
        <input type="button" value="Decipher" onClick="operar(this);">
    </form>
<>
<div id="Mostrar" style="text-align: center;"><>
<body>
</body>
</html>



Pagina Js
Código: [Seleccionar]

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+document.getElementById('textUno').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 el de Php
Código: [Seleccionar]

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



Y si le agrego a la pag! De Php el
Código: [Seleccionar]
if(isset($_POST['btn_ope']) && $_POST['texto'] != "" && $_POST['textUno']!="")
Ya no funciona en ninguno de los 2
Título: Re:AJAX un breve repaso
Publicado por: kid_goth en Julio 11, 2012, 11:49:56 pm
no te funciona porque no hay ningun box que se llame textUno cambiale el name y el id a el que se llama Nose este:

Código: [Seleccionar]
<input type="text" name="Nose" id="Nose"><br><br>

por:

Código: [Seleccionar]
<input type="text" name="textUno" id="textUno"><br><br>

ya que al hacer el if en php y no encontrar ese valor simplemente te dara error por no cumplir la condicion

Código: [Seleccionar]
if(isset($_POST['btn_ope']) && $_POST['texto'] != "" && $_POST['textUno']!="")

Espero me hayas entendido ;)
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 12, 2012, 12:23:06 am
Si, copie el que no era! XD Esa era la primera prueba que estaba haciendo... Me fije que jalabas el objeto por el Id Por: getElementById Porque solo habia puesto el name='textUno'
Mira, tengo otra pregunta... Es algo similar al anterior Solo que ahora con un ComboBox y su evento OnChange
Mira:
Pagina Html
Código: [Seleccionar]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>ComboBox Ajax</title>
    <script type="text/javascript" src="ComboChange.js" language="javascript"></script>
[br /]
</head>
<body>
<div align="center">
   <form action="#">
       <select name="Cambiaste" onchange="FunChange()" id="Cambiaste">
           <option value="0"></option>
           <option value="1">CasillaUno</option>
            <option value="2">CasillaDos</option>
        </select>
    </form>
<>
<div id="Mostrar" align="center"><>
</body>
</html>

Ahora JS
Código: [Seleccionar]
// JavaScript Document
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 FunChange()
{
   var contenedor = document.getElementById('Mostrar');
   var pag = 'ComboChange.php';
   var texto = "texto="+document.getElementById('Cambiaste').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 el Php
Código: [Seleccionar]
<?Php
   //error_reporting(0);
   echo "Cambio algo[br /]";
   if(isset($_POST['Cambiaste']))
   {
      echo($_POST['Cambiaste']);
   }
?>

Si escoji el CasillaUno Deberia imprimirme '1'
Si escoji el CasillaDos Deberia imprimirme '2'
pero el echo que esta arriba si me lo imprime! Donde dice: "Cambio algo"
Pero, como que no coje nada que venga por medio de POST del ComboBox
Título: Re:AJAX un breve repaso
Publicado por: kid_goth en Julio 12, 2012, 12:39:23 am
Bien pasa casi que lo mismo pero totalmente distinto ;) jejejej no en serio:
en el php espera una variable llamada "Cambiaste" que esta dentro de $_POST resulta que la forma en que se envian datos ya sea $_GET o $_POST son de este tipo : variable1=valor1&variable2=valor2&...variablen=valorn la unica diferencia es que el GET se muestra en la direccion y la POST no, entonces debes comprender que debemos simular ese envio de datos.

En el codigo js en la variable texto debemos armaar ese tipo de variables y valores, asi que observemos el codigo:

Código: [Seleccionar]
var texto = "texto="+document.getElementById('Cambiaste').value;

si te das cuenta lo que estas mandando es la variable texto sin emb argo en el php recibes y/u operas la que se llama "Cambiaste" entonces para que funcione debes cambiar ese valor de texto a Cambiaste en el JS o el valor Cambiaste a texto en el php, lo natural es cambiarlo en el JS asi:

Código: [Seleccionar]
var texto = "Cambiaste="+document.getElementById('Cambiaste').value;

con eso ya deberia funcionar, ahora cambiemos una ultima cosilla para evitar confusiones cambiemos estas lineas:

Código: [Seleccionar]
var texto = "Cambiaste="+document.getElementById('Cambiaste').value;

ajax.setRequestHeader("Content-length", texto.length);

y

ajax.send(texto);

cambiando var texto = por var variables = asi:

Código: [Seleccionar]
var variables = "Cambiaste="+document.getElementById('Cambiaste').value;

ajax.setRequestHeader("Content-length", variables.length);

y

ajax.send(variables);

que ese "texto" se presta para muchos malos entendidos ;)  dale y me cuentas...
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 12, 2012, 12:44:48 am
Jajajajajajajajaja!! Eso era todo gracias! XD
De verdad! Gracias... xdd Ahora tengo otra cosa pensada! Pero intentare hacerla! A ver... Sino te pido ayuda!  ;D
Título: Re:AJAX un breve repaso
Publicado por: kid_goth en Julio 12, 2012, 12:46:43 am
 ;D ;D ;D ;D ;D ;D ;D  que bueno cualquier otra duda me cuentas y por si quieres una tareilla seria bueno te hicieras un login con ajax ;)
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 12, 2012, 12:56:50 am
Mira, como tengo en un web donde puedo emplear esto! A la perfeccion! Gracias!
mira quedo asi...
Código: [Seleccionar]

<?Php
//error_reporting(0);
echo "Cambio algo<br>";
if(isset($_POST['Cambiaste']))
{
$VarNose=($_POST['Cambiaste']);
if($VarNose==1)
{
?>
    <select id="DetaUno" name="DetaUno">
        <option id="D1">DetalleUno De la CasillaUno</option>
            <option id="D1">DetalleDos De la CasillaDos</option>
        </select>    
    <?Php
}
if($VarNose==2)
{
?>
    <select id="DetaDos" name="Detados">
        <option id="D1">DetalleUno De la CasillaDos</option>
            <option id="D1">DetalleDos De la CasillaDos</option>
        </select>
    <?Php
}
}
?>
:)
Jaja!! Dele vea que tengo ganas de aprender! ^^
Título: Re:AJAX un breve repaso
Publicado por: kid_goth en Julio 12, 2012, 01:41:56 am
:D s-lente y de eso se trata ese me imagino ya ta en uso xD...
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 12, 2012, 05:33:02 pm
Ya es funcional! :D
Si, no es mucho pedir quisiera aprender a hacer eso de las tablas que antes mencione...
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 12, 2012, 07:39:28 pm
Tengo otra pregunta... Que como me dijiste el
Código: [Seleccionar]
var texto= "texto="+document.getElementById('texto').value+document.getElementById('textoDos').value+"&btn_ope="+btn.value;
Al momento de llamarlo por POST
me tira las 2 cosas unidas.... Y necesitaria que se fueran las 2 por separado...
Título: Re:AJAX un breve repaso
Publicado por: kid_goth en Julio 12, 2012, 10:07:02 pm
las creas por variables aparte:

Código: [Seleccionar]
var texto= "texto="+document.getElementById('texto').value+"&texto2="+document.getElementById('textoDos').value+"&btn_ope="+btn.value;

quedaria asi dandole otro &texto2= :d asi se queda en variable aparte y la recibes con el post $_POST['texto2'] ...
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 12, 2012, 10:27:33 pm
Gracias! Ya me funciono... La vdd! Tenia a respuesta al lado! Y no la vi... con el:
Código: [Seleccionar]
+"&btn_ope="+btn.value
Ahi perdona mi burrada... xd
Título: Re:AJAX un breve repaso
Publicado por: Rock Lee en Julio 13, 2012, 12:44:15 am
Huy no lo había visto a esto ¬.¬ Kid tu tienes la culpa xD na mentira Muy bueno tu aporte n.n lo andaré probando cualquier duda te ando molestando un ratillo!

Un Saludo Familia!
Título: Re:AJAX un breve repaso
Publicado por: kid_goth en Julio 13, 2012, 03:25:39 pm
Huy no lo había visto a esto ¬.¬ Kid tu tienes la culpa xD na mentira Muy bueno tu aporte n.n lo andaré probando cualquier duda te ando molestando un ratillo!

Un Saludo Familia!


:D dale si si aqui estare por cierto sigue fallando el boton de code jejejejejejejje salen al reves y uno con tamaño de letra pequeño :-*
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 20, 2012, 10:23:52 pm
Oye parse... Una pregunta para ponerle! la imagen cuando este cargando... Como se hace? XD
Código: [Seleccionar]
contenedor.innerHTML='Cargando...';
Ahi eh buscando pero no me sale casi nada... xd
Y como no es pagina html! Nose... :S
Título: Re:AJAX un breve repaso
Publicado por: kid_goth en Julio 21, 2012, 03:16:15 am
Oye parse... Una pregunta para ponerle! la imagen cuando este cargando... Como se hace? XD
Código: [Seleccionar]
contenedor.innerHTML='Cargando...';
Ahi eh buscando pero no me sale casi nada... xd
Y como no es pagina html! Nose... :S


:D pos le pones el html de la imagen ;)


asi:


Código: [Seleccionar]
contenedor.innerHTML='<img src="ruta/de_la/imagen.gif" width="100px" heigth="100px">';



y listo lo unico que debes tener en cuenta es: al momento de linkear la imagen (o sea el src) debe ser a partir de donde se carga el ajax o sea el html que lo contiene...
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 21, 2012, 05:59:23 pm
Asi, intente hacerlo pero no me funciono...
Pero, dejame probar...
Título: Re:AJAX un breve repaso
Publicado por: kid_goth en Julio 21, 2012, 06:12:38 pm
recuerda que la ruta de la imagen debe ser de acuerdo al HTML no al ajax asi:

[carpeta] Imagenes -> cargando.gif
[carpeta] Scripts       -> ajax.js
[Archivo]  index.html -> Esta incluye el ajax :D

entonces en el ajax debes poner:

Código: [Seleccionar]
contenedor.innerHTML='<img src="/magenes/cargando.gif" width="100px" heigth="100px">';

y no como uno creyera:

Código: [Seleccionar]
contenedor.innerHTML='<img src="../magenes/cargando.gif" width="100px" heigth="100px">';

jejeje o sea linkear la imagen como si fuera para el index :D


Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 23, 2012, 06:56:48 pm
Jajajaja!! Gracias! Ya me funciono! :P Gracias!!
Título: Re:AJAX un breve repaso
Publicado por: Prow en Julio 27, 2012, 12:03:03 pm
Buen tutorial Kid!  :D

Siempre viene bien un refresco  ;D

Saludos
Título: Re:AJAX un breve repaso
Publicado por: Qfa en Julio 27, 2012, 04:56:01 pm
Jeje!! Este man ' kid_goth' sabe de todo!