• Jueves 28 de Marzo de 2024, 23:44

Autor Tema:  Ajax  (Leído 2751 veces)

RadicalEd

  • Moderador
  • ******
  • Mensajes: 2430
  • Nacionalidad: co
    • Ver Perfil
Ajax
« en: Viernes 4 de Julio de 2008, 22:37 »
0
Pues por fin me va a tocar a usar esta vaina por que no veo de otra, lo que necesito hacer es recoger una ciudad de un combo y recargar un campo de la página con el dato de un flete sin recargar toda la página ya que primero que todo se perderían los datos (aunque con un GET es fácil recuperarlos) y quiero evitar eso de que se esté recargando la página, que mamera....
Pos mi pregunta es como funciona esta tecnología ya que me baje un pequeño ejemplo de práctica y no me funciona, este:
Código: PHP
  1. servidor.php
  2. <?php
  3.   include '../configuration.php';
  4.   if($_GET["dato"]){
  5.  
  6.     $consulta_chequeo = "SELECT id FROM gasto WHERE id = ".$_GET["dato"];
  7.     if($hay_resultados){
  8.         echo "el dato esta siendo utilizado";
  9.     }
  10. }
  11. ?>
  12. cliente.php
  13. <html>
  14. <head>
  15. <script type="text/javascript">
  16. function consultar(id){
  17.     var error = getDataServer("servidor.php","?dato="+id);
  18.     if(error){
  19.         alert(error);
  20.     }
  21.     else{
  22.         document.getElementById("div_"+id).style.display = "hidden";
  23.     }
  24. }
  25. </script>
  26. </head>
  27. <body>
  28.     <div id="div_1"><a href="javascript&#058;consultar(1)">1</a>
  29.     <div id="div_2"><a href="javascript&#058;consultar(2)">2</a>
  30.     <div id="div_3"><a href="javascript&#058;consultar(3)">3</a>
  31.     <div id="div_4"><a href="javascript&#058;consultar(4)">4</a>
  32. </body>
  33. </html>
  34.  
El error es que no hace nada, y me imágino que es por que el AJAX necesita un algo para ejecutarse; alguién me podría explicar como funciona bien esta tecnología.

Gracias
Chao
El pasado son solo recuerdos, el futuro son solo sueños

F_Tanori

  • Moderador
  • ******
  • Mensajes: 1919
  • Nacionalidad: mx
    • Ver Perfil
Re: Ajax
« Respuesta #1 en: Sábado 5 de Julio de 2008, 00:39 »
0
Cita de: "Edo"
Pues por fin me va a tocar a usar esta vaina por que no veo de otra, lo que necesito hacer es recoger una ciudad de un combo y recargar un campo de la página con el dato de un flete sin recargar toda la página ya que primero que todo se perderían los datos (aunque con un GET es fácil recuperarlos) y quiero evitar eso de que se esté recargando la página, que mamera....
Pos mi pregunta es como funciona esta tecnología ya que me baje un pequeño ejemplo de práctica y no me funciona, este:
Código: PHP
  1. servidor.php
  2. <?php
  3.   include '../configuration.php';
  4.   if($_GET["dato"]){
  5.  
  6.     $consulta_chequeo = "SELECT id FROM gasto WHERE id = ".$_GET["dato"];
  7.     if($hay_resultados){
  8.         echo "el dato esta siendo utilizado";
  9.     }
  10. }
  11. ?>
  12. cliente.php
  13. <html>
  14. <head>
  15. <script type="text/javascript">
  16. function consultar(id){
  17.     var error = getDataServer("servidor.php","?dato="+id);
  18.     if(error){
  19.         alert(error);
  20.     }
  21.     else{
  22.         document.getElementById("div_"+id).style.display = "hidden";
  23.     }
  24. }
  25. </script>
  26. </head>
  27. <body>
  28.     <div id="div_1"><a href="javascript&#058;consultar(1)">1</a>
  29.     <div id="div_2"><a href="javascript&#058;consultar(2)">2</a>
  30.     <div id="div_3"><a href="javascript&#058;consultar(3)">3</a>
  31.     <div id="div_4"><a href="javascript&#058;consultar(4)">4</a>
  32. </body>
  33. </html>
  34.  
El error es que no hace nada, y me imágino que es por que el AJAX necesita un algo para ejecutarse; alguién me podría explicar como funciona bien esta tecnología.

Gracias
Chao

En el primer archivo de donde aparece $hay_resultados ? y en cuanto a la funcion de js debes de mostrar getDataServer lo interesante de esto es usar el Objeto HttpRequest

Funcion para crear el objeto HttpRequest
Código: Text
  1.  
  2. function ObjAjax(){
  3.         var xmlhttp=false;
  4.         try{
  5.                 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  6.         }catch(e){
  7.                 try{
  8.                         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  9.                 }catch(E){
  10.                         xmlhttp = false;
  11.                 }
  12.         }
  13.  
  14.         if(!xmlhttp && typeof XMLHttpRequest!='undefined') {
  15.                 xmlhttp = new XMLHttpRequest();
  16.         }
  17.         return xmlhttp;
  18. }
  19.  
  20.  


Funcion para cargar la pagina
Código: Text
  1.  
  2. function CargarPagina(url,divDestino,MostrarPreload){
  3.         var contenido;
  4.        
  5.         contenido = document.getElementById(divDestino);
  6.         ajax=ObjAjax(); //<----- CREAR HttpRequest
  7.        
  8.        
  9.         ajax.open("GET", url,true);
  10.         ajax.onreadystatechange=function()
  11.             {
  12.                 if(ajax.readyState==1){
  13.                        if (MostrarPreload==1){
  14.                          contenido.innerHTML ="Por favor espere cargando pagina...<br/>";
  15.                }
  16.                 }else if(ajax.readyState==4){
  17.                         if(ajax.status==200){
  18.                              contenido.innerHTML = unescape(ajax.responseText);
  19.                         }else if(ajax.status==404){
  20.                               try{
  21.                   contenido.innerHTML ='No se puede accesar al sito';
  22.                               }catch(E){}  
  23.                         }else{
  24.                               contenido.innerHTML = "Error:"+ajax.status;
  25.                         }
  26.                 }
  27.         }
  28.        
  29.         ajax.send(null);
  30.  }
  31.  
  32.  

Uso:

Código: Text
  1.  
  2.  <div id="div_1"><a href="javascript&#058;CargarPagina('servidor.php?dato=1','div_1',1)">1</a>
  3.  
  4.  

Saludos
" ExIsTo y A vEcEs PiEnSo "

NOTA:
===========================================================================================================================
Este foro es para ayudar, aprender, compartir... usenlo para eso,
NO SE RESUELVEN DUDAS POR MENSAJE PRIVADO Y MENOS POR CORREO
===========================================================================================================================

RadicalEd

  • Moderador
  • ******
  • Mensajes: 2430
  • Nacionalidad: co
    • Ver Perfil
Re: Ajax
« Respuesta #2 en: Sábado 5 de Julio de 2008, 18:32 »
0
Sorry, el hayresultados es la ejecución del query.

Pregunta???, siempre debe existir esa función ObjAjax() ?????
El pasado son solo recuerdos, el futuro son solo sueños

JrcsDev

  • Miembro MUY activo
  • ***
  • Mensajes: 245
  • Nacionalidad: ve
    • Ver Perfil
    • http://codigo7.wordpress.com/
Re: Ajax
« Respuesta #3 en: Domingo 6 de Julio de 2008, 08:40 »
0
a ver... si no entendí mal, lo que quieres es que al seleccionar una ciudad en el SELECT (ComboBox), en un campo te aparezca el flete dependiendo de la ciudad... si eso es lo que necesitas, no veo la necesidad de ajax... puedes hacerlo solo con javascript y html, por ejemplo:

se tiene un select:
Código: Text
  1. <select onchange="cambiar(this.value);">
  2.     <option value="-">-</option>
  3.     <option value="1">1</option>
  4.     <option value="2">2</option>
  5.     <option value="3">3</option>
  6.     <option value="4">4</option>
  7. </select>
  8.  
(notar que en el evento onchange del select se coloca el nombre de la función que se ejecuta cuando el select cambia de item... el this.value le pasa como parámetro a la función el contenido de la propiedad value del select... es decir, el value del item seleccionado)

se tiene un campo input type="text":
Código: Text
  1. <input type="text" id="resultado" name="resultado" readonly="" />
  2.  

Luego el código de la función cambiar(valor) en javascript:
Código: Javascript
  1. <script language="javascript">
  2.        function cambiar(valor)
  3.        {       if (valor!='-')
  4.                       document.getElementById('resultado').value=valor;
  5.                else
  6.                       document.getElementById('resultado').value='';
  7.        }
  8. </script
  9.  

Esto deberia funcionar... en el select deben estar precargados los datos de ciudades y fletes... espero que esto te sirva... saludos!
Sígueme en Twitter]
Donar comida a los chicos necesitados!
Todo lo puedo en Cristo que me fortalece...

grandzam

  • Miembro MUY activo
  • ***
  • Mensajes: 118
    • Ver Perfil
Re: Ajax
« Respuesta #4 en: Domingo 6 de Julio de 2008, 18:16 »
0
Citar
Pregunta???, siempre debe existir esa función ObjAjax() ?????

Dentro de esta función existen dos objetos, ActiveXObject y XMLHttpRequest, en los cuáles su objetivo es crear una conexión asincrónica (ya con los métodos que maneja) para permitir el envío y la recepción de datos entre el cliente y el servidor. La diferencia de estos objetos (si no me equivoco) es que ActiveXObject se utiliza en Internet Explorer en versiones anteriores a la 7... XMLHttpRequest es utilizado en la mayoria de los navegadores basados en Gek, Mozilla, Camino, Galeon, Netscape, y otros como Safari, Opera, y Konkeror...

El manejo del objeto XMLHttpRequest es:

-Crear una instancia
-Preparar la petición
-Enviar la petición
-Recibir la respuesta

Bueno dejo que investigues por tí mismo este objeto de javascript tan interesante... Hasta luego...  :good:

RadicalEd

  • Moderador
  • ******
  • Mensajes: 2430
  • Nacionalidad: co
    • Ver Perfil
Re: Ajax
« Respuesta #5 en: Lunes 7 de Julio de 2008, 15:00 »
0
Cita de: "[x3mjr
"]a ver... si no entendí mal, lo que quieres es que al seleccionar una ciudad en el SELECT (ComboBox), en un campo te aparezca el flete dependiendo de la ciudad... si eso es lo que necesitas, no veo la necesidad de ajax... puedes hacerlo solo con javascript y html, por ejemplo:

se tiene un select:
Código: Text
  1. <select onchange="cambiar(this.value);">
  2.     <option value="-">-</option>
  3.     <option value="1">1</option>
  4.     <option value="2">2</option>
  5.     <option value="3">3</option>
  6.     <option value="4">4</option>
  7. </select>
  8.  
(notar que en el evento onchange del select se coloca el nombre de la función que se ejecuta cuando el select cambia de item... el this.value le pasa como parámetro a la función el contenido de la propiedad value del select... es decir, el value del item seleccionado)

se tiene un campo input type="text":
Código: Text
  1. <input type="text" id="resultado" name="resultado" readonly="" />
  2.  

Luego el código de la función cambiar(valor) en javascript:
Código: Javascript
  1. <script language="javascript">
  2.        function cambiar(valor)
  3.        {       if (valor!='-')
  4.                       document.getElementById('resultado').value=valor;
  5.                else
  6.                       document.getElementById('resultado').value='';
  7.        }
  8. </script
  9.  

Esto deberia funcionar... en el select deben estar precargados los datos de ciudades y fletes... espero que esto te sirva... saludos!
Es que me da mamera cargar como 200 registros dentro del propio código. :P  :wacko:
El pasado son solo recuerdos, el futuro son solo sueños

JrcsDev

  • Miembro MUY activo
  • ***
  • Mensajes: 245
  • Nacionalidad: ve
    • Ver Perfil
    • http://codigo7.wordpress.com/
Re: Ajax
« Respuesta #6 en: Martes 8 de Julio de 2008, 19:18 »
0
Cita de: "Edo"
Cita de: "[x3mjr
"]a ver... si no entendí mal, lo que quieres es que al seleccionar una ciudad en el SELECT (ComboBox), en un campo te aparezca el flete dependiendo de la ciudad... si eso es lo que necesitas, no veo la necesidad de ajax... puedes hacerlo solo con javascript y html, por ejemplo:

se tiene un select:
Código: Text
  1. <select onchange="cambiar(this.value);">
  2.     <option value="-">-</option>
  3.     <option value="1">1</option>
  4.     <option value="2">2</option>
  5.     <option value="3">3</option>
  6.     <option value="4">4</option>
  7. </select>
  8.  
(notar que en el evento onchange del select se coloca el nombre de la función que se ejecuta cuando el select cambia de item... el this.value le pasa como parámetro a la función el contenido de la propiedad value del select... es decir, el value del item seleccionado)

se tiene un campo input type="text":
Código: Text
  1. <input type="text" id="resultado" name="resultado" readonly="" />
  2.  

Luego el código de la función cambiar(valor) en javascript:
Código: Javascript
  1. <script language="javascript">
  2.        function cambiar(valor)
  3.        {       if (valor!='-')
  4.                       document.getElementById('resultado').value=valor;
  5.                else
  6.                       document.getElementById('resultado').value='';
  7.        }
  8. </script
  9.  

Esto deberia funcionar... en el select deben estar precargados los datos de ciudades y fletes... espero que esto te sirva... saludos!
Es que me da mamera cargar como 200 registros dentro del propio código. :P  :wacko:

jajaja entiendo lo que dices... pero cuando yo digo PRECARGADOS no me refiero a meterlos manualmente...

primero haces una consulta:

Código: PHP
  1. $r=mysql_query("select ciudad,flete from distancias order by estado",$c);
  2.  

luego vacias todos los registros en el select
Código: Text
  1. <select onchange="cambiar(this.value);">
  2.     <option value="-">-</option>
  3.     <?php
  4.             while ($rs=mysql_fetch_array($r))
  5.             {     echo "<option value="$rs[1]">$rs[0]</option>";
  6.             }
  7.     ?>
  8. </select>
  9.  

Espero que esto te sea de utilidad... tambien puedes usar ajax... pero esta forma es mas facil...
Sígueme en Twitter]
Donar comida a los chicos necesitados!
Todo lo puedo en Cristo que me fortalece...

RadicalEd

  • Moderador
  • ******
  • Mensajes: 2430
  • Nacionalidad: co
    • Ver Perfil
Re: Ajax
« Respuesta #7 en: Martes 8 de Julio de 2008, 20:49 »
0
Pos me toco hacer eso y pues era lo que quería evitar de recargar la página, además por que tanto el dato de la ciudad como el flete se deben guardar en la tabla que necesita estos datos, 'tons no puedo tomar solo uno y para eso necesitaba el AJAX.
El pasado son solo recuerdos, el futuro son solo sueños

JrcsDev

  • Miembro MUY activo
  • ***
  • Mensajes: 245
  • Nacionalidad: ve
    • Ver Perfil
    • http://codigo7.wordpress.com/
Re: Ajax
« Respuesta #8 en: Miércoles 9 de Julio de 2008, 04:54 »
0
pues no hay necesidad de recargar la página... la primera vez que se carga rellenas el select... y si lo que quieres es encesariamente AJAX, usa el la función que F_Tanori te dió... yo la uso desde hace más de un año y me funciona perfectamente, solo que yo la uso por POST!
Sígueme en Twitter]
Donar comida a los chicos necesitados!
Todo lo puedo en Cristo que me fortalece...

JrcsDev

  • Miembro MUY activo
  • ***
  • Mensajes: 245
  • Nacionalidad: ve
    • Ver Perfil
    • http://codigo7.wordpress.com/
Re: Ajax
« Respuesta #9 en: Miércoles 9 de Julio de 2008, 05:23 »
0
si necesitas el ajax con post! avisame
Sígueme en Twitter]
Donar comida a los chicos necesitados!
Todo lo puedo en Cristo que me fortalece...

F_Tanori

  • Moderador
  • ******
  • Mensajes: 1919
  • Nacionalidad: mx
    • Ver Perfil
Re: Ajax
« Respuesta #10 en: Miércoles 9 de Julio de 2008, 18:08 »
0
Claro , yo llevo tiempo usandola y funciona muy bien , tambien hay un proyecto que se llama SACK (Simple Ajax Code Kit) es muy bueno

http://www.twilightuniverse.com/projects/sack/

Para usarlo con POST hay que enviarle unas cabeceras

Funcion para cargar la pagina (POST)
Código: Text
  1.  
  2. function CargarPaginaPost(url,divDestino,MostrarPreload,Parametros){
  3.         var contenido;
  4.         var rnd=Math.floor(Math.random()*5000);
  5.  
  6.         contenido = document.getElementById(divDestino);
  7.         ajax=ObjAjax(); //<----- CREAR HttpRequest
  8.         Parametros="?rnd="+rnd+"&"+Parametros
  9.        
  10.         ajax.open("POST", url,true);
  11.         ajax.onreadystatechange=function()
  12.             {
  13.                 if(ajax.readyState==1){
  14.                        if (MostrarPreload==1){
  15.                          contenido.innerHTML ="Por favor espere cargando pagina...<br/>";
  16.                }
  17.                 }else if(ajax.readyState==4){
  18.                         if(ajax.status==200){
  19.                              contenido.innerHTML = unescape(ajax.responseText);
  20.                         }else if(ajax.status==404){
  21.                               try{
  22.                   contenido.innerHTML ='No se puede accesar al sito';
  23.                               }catch(E){}  
  24.                         }else{
  25.                               contenido.innerHTML = "Error:"+ajax.status;
  26.                         }
  27.                 }
  28.         }
  29.          //ajax.setRequestHeader ("Cache-Control", "no-cache");
  30.      //ajax.setRequestHeader ("Pragma", "no-cache");
  31.         ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  32.         ajax.send(Parametros);
  33.  }
  34.  
  35.  

Uso:

Código: Text
  1.  
  2.  <div id="div_1"><a href="javascript&#058;CargarPaginaPost('servidor.php','div_1',1,'dato=1&seccion=2&otroparam=4&activo=SI')">1</a>
  3.  
  4.  

Saludos
" ExIsTo y A vEcEs PiEnSo "

NOTA:
===========================================================================================================================
Este foro es para ayudar, aprender, compartir... usenlo para eso,
NO SE RESUELVEN DUDAS POR MENSAJE PRIVADO Y MENOS POR CORREO
===========================================================================================================================