Unidad III AJAXINTEGRANTES:
MIGUEL ANTONIO VÁZQUEZ MONTES 10410562
PEDRO ALEXANDER BALBUENA LOREDO 10410518
1
22 - De JavaScript a JSON
(utilizando la librería json.js)
 Librería Javascript.
 Permite convertir objeto o array de
ja...
Archivos importados
<script src="../json.js" language="JavaScript"></script>
<script src="funciones.js" language="JavaScri...
function
mostrarConversion(e)
{
var obj={
nombre:'juan',
edad:25,
sueldos:[1200,1700,1990]
};
var
cadena=obj.toJSONString(...
function
mostrarConversion(e)
{
var obj={
nombre:'juan',
edad:25,
sueldos:[1200,1700,1990]
};
var
cadena=obj.toJSONString(...
Ejercicio JSON
 Ejercicio
6
23 - De JSON a JavaScript
(utilizando la librería json.js)
7
8
9
<?php
$conexion=mysql_connect("localhost","root","z80")
or die("Problemas en la conexion");
mysql_select_db("bdajax",$cone...
11
12
13
De JSON a PHP (utilizando
la librería JSON.php)
AHORA NOS QUEDA VER COMO EN EL SERVIDOR RECIBIR DATOS CON
FORMATO JSON Y P...
 la clase Services_JSON tiene un método llamado decode que recibe como
parámetro una cadena con datos codificados en JSON...
Ejemplo:
 Confeccionaremos un problema que envíe desde el navegador información en
formato JSON y en el servidor la conve...
 El archivo pagina1.html
 <html>
 <head>
 <title>Problema</title>
 <script src="../json.js" language="JavaScript"></s...
Las funciones JavaScript
18
 Cuando se presiona el botón procedemos a partir de un objeto JavaScript
generar una cadena en formato JSON, luego proced...
 La función enviarDatos procede a crear un objeto de la clase XMLHttpRequest y
pasa mediante el parámetro GET la cadena e...
 Solo queda mostrar el trozo de datos en HTML que retorna el servidor:
 function procesarEventos()
 {
 var resultados ...
archivo pagina1.php
 <?php
 require('../JSON.php');
 $json=new Services_JSON();
 $cad=$json->decode(stripslashes($_REQ...
 El método que convierte una cadena con formato JSON en un
objeto de PHP es:
 $cad=$json->decode(stripslashes($_REQUEST[...
De JSON a PHP (utilizando
la librería JSON.php)
AHORA NOS QUEDA VER COMO EN EL SERVIDOR RECIBIR DATOS CON
FORMATO JSON Y P...
 la clase Services_JSON tiene un método llamado decode que recibe como
parámetro una cadena con datos codificados en JSON...
Ejemplo:
 Elaboraremos un problema que envíe desde el navegador información en
formato JSON y en el servidor la convertir...
 El archivo pagina1.html
 <html>
 <head>
 <title>Problema</title>
 <script src="../json.js" language="JavaScript"></s...
las funciones JavaScrip
 Cuando se presiona el botón procedemos a partir de un objeto JavaScript
generar una cadena en formato JSON, luego proced...
 La función enviarDatos procede a crear un objeto de la clase XMLHttpRequest y
pasa mediante el parámetro GET la cadena e...
 Solo queda mostrar el trozo de datos en HTML que retorna el servidor:
 function procesarEventos()
 {
 var resultados ...
archivo pagina1.php
 <?php
 require('../JSON.php');
 $json=new Services_JSON();
 $cad=$json->decode(stripslashes($_REQ...
 El método que convierte una cadena con formato JSON en un
objeto de PHP es:
 $cad=$json->decode(stripslashes($_REQUEST[...
Próxima SlideShare
Cargando en…5
×

Unidad iii ajax

224 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

×