AJAX, PHP y MYSQL - Un ejemplo muy práctico XD

richardinj · #1 (**permalink**) 10/10/2005, 11:31

Hola amigos.. aqui les muestro algo interesante que se puede hacer con AJAX.

http://www.alberguelajungla.com/demo

El cliente elije un producto que esta en un combo.. y va sumando el costo total... los precios son extraidos desde la BD y asi va sumando...

Saludos.

Fuente: http://www.alberguelajungla.com/demo/ajax.rar

SiR.CARAJ0DIDA · #2 (**permalink**) 10/10/2005, 14:16

no veo la necesidad de usar ajax, puedo poner los precios en el valor del select y listo, no creo q los precios aumenten mientras estoy comprando -_-

richardinj · #3 (**permalink**) 10/10/2005, 16:43

La lista de precios esta en una base de datos (codigo/descripcion/precio)...

Se carga en el Combo...y calcula costos... no solo suma.. tb resta... depende...

Luego de eso el usuario puede enviarnos una Pc configurada, se guarda su configuracion en una Tabla para luego analizarlo... y asi comprar...

Un poco mas de enfoque por favor.

Viet · #4 (**permalink**) 11/10/2005, 05:43

Me parece claro el ejemplo.... estaria bueno tener el souce para que usen de ejemplo los usuarios del foro

richardinj · #5 (**permalink**) 11/10/2005, 08:47

Herramientas >>> Ver código fuente

Saludos.

Viet · #6 (**permalink**) 11/10/2005, 09:13

Si, eso lo se, el coodigo del cliente esta muy bueno.... lo que me interesaba era el lado de apache..... ver el php que genera el xml y como lo manda.... porque se que hay que cambiar el header y me parece que si se puede ver ambos datos sera muy ejemplificador

saludos

richardinj · #7 (**permalink**) 11/10/2005, 19:48

http://www.alberguelajungla.com/demo/ajax.rar

Viet · #8 (**permalink**) 12/10/2005, 04:37

Muchas Gracias.... Muy Claro... y Pro Open Source!!!!!! jejejejje

jahepi · #9 (**permalink**) 16/10/2005, 13:31

Ohhhhh! richardinj, gracias por la información, por más que consultaba este subforo no me quedaba claro que era AJAX, finalmente veo una luz al final del camino.

De hecho es una tecnología muy similar que esta desarrollando Macromedia, me enteré un día en una conferencia y fué un representante de macromedia para dar a conocerla, me quede asombrado de lo que se puede hacer, la tecnología es llamada Macromedia FLEX de hecho aquí tengo la página con algunos ejemplos extraordinarios que se pueden desarrollar.
http://www.macromedia.com/software/flex/

Nos enseñaron gráficas de como la carga del servidor baja considerablemente usando esta tecnología.

Suerte!

richardinj · #10 (**permalink**) 16/10/2005, 17:06

Gracias por tu aporte....
jahepi

mario2005 · #11 (**permalink**) 17/10/2005, 00:50

Por lo que veo, poco o más bien nada de XML se genera para este ejemplo. De todas formas tampoco creo que sea necesario, la verdad es que aunque se comenta mucho sobre el tema del XML en Ajax, no creo que sea lo más importante o frecuente el uso de XML para Ajax. Yo personalmente he usado en varias ocasiones Ajax y la mayoría de las veces no he tenido necesidad de usar XML, es más, necesito que la respuesta que me envíe el servidor sea HTML.

MaBoRaK · #12 (**permalink**) 17/10/2005, 17:22

loading........

Eso es en aplicacion donde solo necesitas respuesta, pero si necesidad PARSEAR el mismo debe ser una respuesta XML

Ejemplo: RSS -> http://69.56.196.226/~maborak/leimnu...?&articulo=355

connection closed.

bhonox · #13 (**permalink**) 19/10/2005, 08:51

me queda una duda con el ejemplo dado por richardinj
lo revise y la verdad q nose nada de ajax pero si de js, y me encontre que solo recibe un valor osea:
recibido=xmlhttp.responseText;

mi duda es si fuesen dos o mas valores???

Viet · #14 (**permalink**) 19/10/2005, 09:57

En realidad para mandar mas de un valor desde el server al browser tenes que madarlos por xml o bien usar un separador y luego hacer un split de str recibido usando ese separador....

richardinj · #15 (**permalink**) 19/10/2005, 17:29

recibido=xmlhttp.responseText;

"recibido" puede recibir hasta una web entera generada por procesar.php

MaBoRaK · #16 (**permalink**) 19/10/2005, 18:32

loading...............

Se puede recibir toda la salida HTML que genere.

connection closed.

bhonox · #17 (**permalink**) 20/10/2005, 05:32

pero eso seria casi usar un innerHTML,

alguien tiene un ejemplo donde se arme un xml y al otro lado reciba el xml y lo parsee?
algun ejemplo practico para aprender 2 opciones!

Viet · #18 (**permalink**) 20/10/2005, 05:49

Aca tenes uno muy bueno.....

http://69.56.196.226/~maborak/leimnu...?&articulo=348

Saludos

bhonox · #19 (**permalink**) 20/10/2005, 05:57

juaz!! gracias VIET, pero por un problema de seguridad donde trabajo tienen bloqueado ese sitio, existe otra manera de verlo?

Viet · #20 (**permalink**) 21/10/2005, 05:42

Código:

   1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2. <
   3. html xmlns="http://www.w3.org/1999/xhtml" > <
   4. head> <
   5. title>Ciudad del Codigo Postal usando XmlHttpRequest</title> <
   6. script language="javascript"  type="text/javascript">
   7. var
   8. url = "getCityState.php?param="; // La direccion del archivo .php y el parametro que se le pasa
   9. var http = getHTTPObject(); // Esto crea el Objeto HTTP
  10. var enProceso = false; //Variable para saber si existe otro proceso en ejecucion
  11.
  12. function handleHttpResponse() {   if (
  13. http.readyState == 4) {     if (
  14. http.responseText.indexOf('invalid') == -1); {       
  15. // Use the XML DOM to unpack the city and state data       
  16.       
  17. var xmlDocument = http.responseXML;       var
  18. city = xmlDocument.getElementsByTagName('city').item(0).firstChild.data;       var
  19. state = xmlDocument.getElementsByTagName('state').item(0).firstChild.data;       
  20.       
  21. document.getElementById('city').value =  city;       
  22. document.getElementById('state').value = state;       
  23. enProceso = false;     
  24. //}     /*results = http.responseText.split(",");
  25.     document.getElementById('city').value = results[0];
  26.       document.getElementById('state').value = results[1];
  27.       enProceso = false;*/
  28.     //document.write ('da igual');
  29.   
  30. } }
  31.
  32. function
  33. updateCityState() {   if (!
  34. enProceso && http) {     var
  35. zipValue = document.getElementById("zip").value;     
  36. http.open ("GET", url + escape(zipValue), true);     
  37. http.onreadystatechange = handleHttpResponse;     
  38. enProceso = true;     
  39. http.send(null);   }
  40. }
  41.
  42. function
  43. getHTTPObject() {   var
  44. xmlhttp;   
  45. /*@cc_on   @if (@_jscript_version >= 5)
  46.     try {
  47.       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  48.     } catch (e) {
  49.       try {
  50.         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  51.       } catch (E) {
  52.         xmlhttp = false;
  53.       }
  54.     }
  55.   @else
  56.   xmlhttp = false;
  57.   @end @*/
  58.   
  59. if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {     
  60. try {       
  61. xmlhttp = new XMLHttpRequest();       
  62. xmlhttp.overrideMimeType("text/xml");     }
  63. catch (e) {       
  64. xmlhttp = false;     }
  65.   }
  66.   return
  67. xmlhttp; }
  68.
  69.
  70. </script>
  71. </head> <body>
  72. <form action="post">
  73.   <p>
  74.   ZIP code:
  75.   <input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" />
  76.   </p>
  77.   City:
  78.   <input type="text" name="city" id="city" />
  79.   State:
  80.   <input type="text" size="2" name="state" id="state" />
  81. </form>
  82. </body>
  83. </html>

y

Código:

     1. <?php
   2.
   3. /** * Conecta a la Base de Datos
   4. * Devuelve Falso si falla la conexion.
   5. * Asegurate de cambiar $database_name (nombre de la base de datos.
   6. *                         $database_username (nombre de usuario), and
   7. *                         $database_password (contraseña de usuario)
   8. *                         valores de las propiedades de tu base de datos
   9. **/
  10.
  11.
  12. function db_connect() {   
  13. $database_name = 'codigopostal'; // Pon el nombre de la base de datos   
  14. $database_username = 'root'; // Pon el nombre de tu usuario mysql   
  15. $database_password = 'seguro'; // Pon la contraseña de tu usuario mysql   
  16. $result = mysql_pconnect('localhost',$database_username, $database_password);   if (!
  17. $result) return false;   if (!
  18. mysql_select_db($database_name)) return false;   return
  19. $result; }
  20.
  21. $conn = db_connect(); // Conecta a la Base de Datos
  22. if ($conn) {   
  23. $zipcode = $_GET['param']; // Es el codigo postal que recoge   
  24. $query = "select * from zipcodes where zipcode = '$zipcode'";   
  25. $result = mysql_query($query,$conn);   
  26. $count = mysql_num_rows($result);   if (
  27. $count > 0) {     
  28. $city = mysql_result($result,0,'city');     
  29. $state = mysql_result($result,0,'state');   }
  30. }
  31. if (isset(
  32. $city) && isset($state)) {   
  33. // $return_value = $city . "," . $state;   
  34. $return_value = "<?xml version='1.0' standalone='yes'?><zip><city>".$city."</city><state>".$state."</state></zip>"; }
  35. else {  
  36.   
  37. $return_value = "invalid".",".$_GET['param']; // Include Zip for debugging purposes
  38. }
  39. header('Content-Type: text/xml'); echo
  40. $return_value; // This will become the response value for the XMLHttpRequest object
      ?>

saludos

bhonox · #21 (**permalink**) 21/10/2005, 06:29

Gracias...

richardinj · #22 (**permalink**) 31/10/2005, 21:27

de nada...

richardinj · #23 (**permalink**) 11/11/2005, 09:56

Alguien sabe como arreglar eso de las tildes,, ami no me reconoce...