Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Unidad iii ajax

236 visualizaciones

Publicado el

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Unidad iii ajax

  1. 1. Unidad III AJAXINTEGRANTES: MIGUEL ANTONIO VÁZQUEZ MONTES 10410562 PEDRO ALEXANDER BALBUENA LOREDO 10410518 1
  2. 2. 22 - De JavaScript a JSON (utilizando la librería json.js)  Librería Javascript.  Permite convertir objeto o array de javascript a formato json y viceversa. 2
  3. 3. Archivos importados <script src="../json.js" language="JavaScript"></script> <script src="funciones.js" language="JavaScript"></script> 3
  4. 4. function mostrarConversion(e) { var obj={ nombre:'juan', edad:25, sueldos:[1200,1700,1990] }; var cadena=obj.toJSONString(); alert(cadena); } 4
  5. 5. function mostrarConversion(e) { var obj={ nombre:'juan', edad:25, sueldos:[1200,1700,1990] }; var cadena=obj.toJSONString(); alert(cadena); } Primero se define un objeto en JavaScript Se llama el método JSONString para que retorne un objeto en formato JSON 5
  6. 6. Ejercicio JSON  Ejercicio 6
  7. 7. 23 - De JSON a JavaScript (utilizando la librería json.js) 7
  8. 8. 8
  9. 9. 9
  10. 10. <?php $conexion=mysql_connect("localhost","root","z80") or die("Problemas en la conexion"); mysql_select_db("bdajax",$conexion) or die("Problemas en la seleccion de la base de datos"); $registros=mysql_query("select codigo,descripcion,precio from perifericos",$conexion) or die("Problemas en el select".mysql_error()); while ($reg=mysql_fetch_array($registros)) { $vec[]=$reg; } require('../JSON.php'); $json=new Services_JSON(); $cad=$json->encode($vec); echo $cad; ?> 10
  11. 11. 11
  12. 12. 12
  13. 13. 13
  14. 14. De JSON a PHP (utilizando la librería JSON.php) AHORA NOS QUEDA VER COMO EN EL SERVIDOR RECIBIR DATOS CON FORMATO JSON Y PROCEDER A GENERAR UNA CLASE EN PHP MEDIANTE LA LIBRERÍA JSON.PHP. LA SINTAXIS ES: $JSON=NEW SERVICES_JSON(); $CAD=$JSON->DECODE(STRIPSLASHES($_REQUEST['CADENA'])); ECHO 'NOMBRE:'.$CAD->NOMBRE; ... ... 14
  15. 15.  la clase Services_JSON tiene un método llamado decode que recibe como parámetro una cadena con datos codificados en JSON y procede a retornar la información en un objeto. 15
  16. 16. Ejemplo:  Confeccionaremos un problema que envíe desde el navegador información en formato JSON y en el servidor la convertiremos en un objeto de PHP y procederemos a generar un trozo de HTML que retornaremos al navegador para que lo muestre. 16
  17. 17.  El archivo pagina1.html  <html>  <head>  <title>Problema</title>  <script src="../json.js" language="JavaScript"></script>  <script src="funciones.js" language="JavaScript"></script>  </head>  <body>  <h2>Enviar datos desde el navegador en formato JSON y proceder a la  decodificación en una clase PHP con la librería JSON.php</h2>  <input type="button" value="Enviar" id="boton1">  <div id="resultados"></div>  </body>  </html> 17
  18. 18. Las funciones JavaScript 18
  19. 19.  Cuando se presiona el botón procedemos a partir de un objeto JavaScript generar una cadena en formato JSON, luego procedemos a llamar a la función enviarDatos:  var obj={  nombre:'juan',  edad:25,  sueldos:[1200,1700,1990]  };  var cadena=obj.toJSONString();  enviarDatos(cadena); 19
  20. 20.  La función enviarDatos procede a crear un objeto de la clase XMLHttpRequest y pasa mediante el parámetro GET la cadena en formato JSON:  var conexion1;  function enviarDatos(cadena)  {  conexion1=crearXMLHttpRequest();  conexion1.onreadystatechange = procesarEventos;  conexion1.open('GET','pagina1.php?cadena='+cadena, true);  conexion1.send(null);  } 20
  21. 21.  Solo queda mostrar el trozo de datos en HTML que retorna el servidor:  function procesarEventos()  {  var resultados = document.getElementById("resultados");  if(conexion1.readyState == 4)  {  resultados.innerHTML = conexion1.responseText;  }  else  {  resultados.innerHTML = "Cargando...";  }  } 21
  22. 22. archivo pagina1.php  <?php  require('../JSON.php');  $json=new Services_JSON();  $cad=$json->decode(stripslashes($_REQUEST['cadena']));  echo 'Nombre:'.$cad->nombre;  echo '<br>';  echo 'Edad:'.$cad->edad;  echo '<br>';  echo 'Primer sueldo:'.$cad->sueldos[0];  echo '<br>';  echo 'Segundo sueldo:'.$cad->sueldos[1];  echo '<br>';  echo 'Tercer sueldo:'.$cad->sueldos[2];  ?> 22
  23. 23.  El método que convierte una cadena con formato JSON en un objeto de PHP es:  $cad=$json->decode(stripslashes($_REQUEST['cadena']));  Recordemos que con la función stripslashes sacamos los caracteres de escape(barras invertidad para las comillas entre otras)  Luego podemos fácilmente acceder a los atributos del objeto con la sintaxis 23
  24. 24. De JSON a PHP (utilizando la librería JSON.php) AHORA NOS QUEDA VER COMO EN EL SERVIDOR RECIBIR DATOS CON FORMATO JSON Y PROCEDER A GENERAR UNA CLASE EN PHP MEDIANTE LA LIBRERÍA JSON.PHP. LA SINTAXIS ES: $JSON=NEW SERVICES_JSON(); $CAD=$JSON->DECODE(STRIPSLASHES($_REQUEST['CADENA'])); ECHO 'NOMBRE:'.$CAD->NOMBRE; ... ...
  25. 25.  la clase Services_JSON tiene un método llamado decode que recibe como parámetro una cadena con datos codificados en JSON y procede a retornar la información en un objeto.
  26. 26. Ejemplo:  Elaboraremos un problema que envíe desde el navegador información en formato JSON y en el servidor la convertiremos en un objeto de PHP y procederemos a generar un trozo de HTML que retornaremos al navegador para que lo muestre.
  27. 27.  El archivo pagina1.html  <html>  <head>  <title>Problema</title>  <script src="../json.js" language="JavaScript"></script>  <script src="funciones.js" language="JavaScript"></script>  </head>  <body>  <h2>Enviar datos desde el navegador en formato JSON y proceder a la  decodificación en una clase PHP con la librería JSON.php</h2>  <input type="button" value="Enviar" id="boton1">  <div id="resultados"></div>  </body>  </html>
  28. 28. las funciones JavaScrip
  29. 29.  Cuando se presiona el botón procedemos a partir de un objeto JavaScript generar una cadena en formato JSON, luego procedemos a llamar a la función enviarDatos:  var obj={  nombre:'juan',  edad:25,  sueldos:[1200,1700,1990]  };  var cadena=obj.toJSONString();  enviarDatos(cadena);
  30. 30.  La función enviarDatos procede a crear un objeto de la clase XMLHttpRequest y pasa mediante el parámetro GET la cadena en formato JSON:  var conexion1;  function enviarDatos(cadena)  {  conexion1=crearXMLHttpRequest();  conexion1.onreadystatechange = procesarEventos;  conexion1.open('GET','pagina1.php?cadena='+cadena, true);  conexion1.send(null);  }
  31. 31.  Solo queda mostrar el trozo de datos en HTML que retorna el servidor:  function procesarEventos()  {  var resultados = document.getElementById("resultados");  if(conexion1.readyState == 4)  {  resultados.innerHTML = conexion1.responseText;  }  else  {  resultados.innerHTML = "Cargando...";  }  }
  32. 32. archivo pagina1.php  <?php  require('../JSON.php');  $json=new Services_JSON();  $cad=$json->decode(stripslashes($_REQUEST['cadena']));  echo 'Nombre:'.$cad->nombre;  echo '<br>';  echo 'Edad:'.$cad->edad;  echo '<br>';  echo 'Primer sueldo:'.$cad->sueldos[0];  echo '<br>';  echo 'Segundo sueldo:'.$cad->sueldos[1];  echo '<br>';  echo 'Tercer sueldo:'.$cad->sueldos[2];  ?>
  33. 33.  El método que convierte una cadena con formato JSON en un objeto de PHP es:  $cad=$json->decode(stripslashes($_REQUEST['cadena']));  Recordemos que con la función stripslashes sacamos los caracteres de escape(barras invertidad para las comillas entre otras)  Luego podemos fácilmente acceder a los atributos del objeto con la sintaxis

×