Autor Tema: Ajax (Leído 2898 veces)

RadicalEd · « **en:** Viernes 4 de Julio de 2008, 22:37 »

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

servidor.php
<?php
  include '../configuration.php';
  if($_GET["dato"]){
 
    $consulta_chequeo = "SELECT id FROM gasto WHERE id = ".$_GET["dato"];
    if($hay_resultados){
        echo "el dato esta siendo utilizado";
    }
}
?>
cliente.php
<html>
<head>
<script type="text/javascript">
function consultar(id){
    var error = getDataServer("servidor.php","?dato="+id);
    if(error){
        alert(error);
    }
    else{
        document.getElementById("div_"+id).style.display = "hidden";
    }
}
</script>
</head>
<body>
    <div id="div_1"><a href="javascript&#058;consultar(1)">1</a>
    <div id="div_2"><a href="javascript&#058;consultar(2)">2</a>
    <div id="div_3"><a href="javascript&#058;consultar(3)">3</a>
    <div id="div_4"><a href="javascript&#058;consultar(4)">4</a>
</body>
</html>
 

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

F_Tanori

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
servidor.php
<?php
include '../configuration.php';
if($_GET["dato"]){

$consulta_chequeo = "SELECT id FROM gasto WHERE id = ".$_GET["dato"];
if($hay_resultados){
echo "el dato esta siendo utilizado";
}
}
?>
cliente.php
<html>
<head>
<script type="text/javascript">
function consultar(id){
var error = getDataServer("servidor.php","?dato="+id);
if(error){
alert(error);
}
else{
document.getElementById("div_"+id).style.display = "hidden";
}
}
</script>
</head>
<body>
<div id="div_1"><a href="javascript:consultar(1)">1</a>
<div id="div_2"><a href="javascript:consultar(2)">2</a>
<div id="div_3"><a href="javascript:consultar(3)">3</a>
<div id="div_4"><a href="javascript:consultar(4)">4</a>
</body>
</html>

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

 
function ObjAjax(){
        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;
}
 
 

Funcion para cargar la pagina

Código: Text

 
function CargarPagina(url,divDestino,MostrarPreload){
        var contenido;
        
        contenido = document.getElementById(divDestino);
        ajax=ObjAjax(); //<----- CREAR HttpRequest
        
        
        ajax.open("GET", url,true); 
        ajax.onreadystatechange=function()
            {
                if(ajax.readyState==1){
                       if (MostrarPreload==1){
                         contenido.innerHTML ="Por favor espere cargando pagina...<br/>";
               } 
                }else if(ajax.readyState==4){
                        if(ajax.status==200){
                             contenido.innerHTML = unescape(ajax.responseText); 
                        }else if(ajax.status==404){
                              try{
                  contenido.innerHTML ='No se puede accesar al sito';
                              }catch(E){}  
                        }else{
                              contenido.innerHTML = "Error:"+ajax.status; 
                        }
                }
        }
       
        ajax.send(null);
 }
 
 

Uso:

Código: Text

 
 <div id="div_1"><a href="javascript&#058;CargarPagina('servidor.php?dato=1','div_1',1)">1</a>

Saludos

RadicalEd

Sorry, el hayresultados es la ejecución del query.

Pregunta???, siempre debe existir esa función ObjAjax() ?????

JrcsDev

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

<select onchange="cambiar(this.value);">
    <option value="-">-</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
 

(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

<input type="text" id="resultado" name="resultado" readonly="" />
 

Luego el código de la función cambiar(valor) en javascript:

Código: Javascript

<script language="javascript">
       function cambiar(valor)
       {       if (valor!='-')
                      document.getElementById('resultado').value=valor;
               else
                      document.getElementById('resultado').value='';
       }
</script
 

Esto deberia funcionar... en el select deben estar precargados los datos de ciudades y fletes... espero que esto te sirva... saludos!

grandzam

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...

RadicalEd · « **Respuesta #5 en:** Lunes 7 de Julio de 2008, 15:00 »

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
<select onchange="cambiar(this.value);">
<option value="-">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

(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
<input type="text" id="resultado" name="resultado" readonly="" />

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

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.

JrcsDev · « **Respuesta #6 en:** Martes 8 de Julio de 2008, 19:18 »

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
<select onchange="cambiar(this.value);">
<option value="-">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

(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
<input type="text" id="resultado" name="resultado" readonly="" />

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

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.

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

primero haces una consulta:

Código: PHP

$r=mysql_query("select ciudad,flete from distancias order by estado",$c);
 

luego vacias todos los registros en el select

Código: Text

<select onchange="cambiar(this.value);">
    <option value="-">-</option>
    <?php
            while ($rs=mysql_fetch_array($r))
            {     echo "<option value="$rs[1]">$rs[0]</option>";
            }
    ?>
</select>
 

Espero que esto te sea de utilidad... tambien puedes usar ajax... pero esta forma es mas facil...

RadicalEd · « **Respuesta #7 en:** Martes 8 de Julio de 2008, 20:49 »

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.

JrcsDev

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!

JrcsDev

si necesitas el ajax con post! avisame

F_Tanori

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

 
function CargarPaginaPost(url,divDestino,MostrarPreload,Parametros){
        var contenido;
        var rnd=Math.floor(Math.random()*5000);
 
        contenido = document.getElementById(divDestino);
        ajax=ObjAjax(); //<----- CREAR HttpRequest
        Parametros="?rnd="+rnd+"&"+Parametros
        
        ajax.open("POST", url,true); 
        ajax.onreadystatechange=function()
            {
                if(ajax.readyState==1){
                       if (MostrarPreload==1){
                         contenido.innerHTML ="Por favor espere cargando pagina...<br/>";
               } 
                }else if(ajax.readyState==4){
                        if(ajax.status==200){
                             contenido.innerHTML = unescape(ajax.responseText); 
                        }else if(ajax.status==404){
                              try{
                  contenido.innerHTML ='No se puede accesar al sito';
                              }catch(E){}  
                        }else{
                              contenido.innerHTML = "Error:"+ajax.status; 
                        }
                }
        }
         //ajax.setRequestHeader ("Cache-Control", "no-cache");
     //ajax.setRequestHeader ("Pragma", "no-cache");
        ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        ajax.send(Parametros);
 }
 
 

Uso:

Código: Text

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

Saludos

SoloCodigo

Autor Tema: Ajax (Leído 2898 veces)

RadicalEd

Ajax

F_Tanori

Re: Ajax

RadicalEd

Re: Ajax

JrcsDev

Re: Ajax

grandzam

Re: Ajax

RadicalEd

Re: Ajax

JrcsDev

Re: Ajax

RadicalEd

Re: Ajax

JrcsDev

Re: Ajax

JrcsDev

Re: Ajax

F_Tanori

Re: Ajax