SlideShare una empresa de Scribd logo
1 de 33
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
javascript a formato json y viceversa.
2
Archivos importados
<script src="../json.js" language="JavaScript"></script>
<script src="funciones.js" language="JavaScript"></script>
3
function
mostrarConversion(e)
{
var obj={
nombre:'juan',
edad:25,
sueldos:[1200,1700,1990]
};
var
cadena=obj.toJSONString();
alert(cadena);
}
4
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
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",$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
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 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
 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
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
 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
Las funciones JavaScript
18
 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
 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
 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
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
 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
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;
...
...
 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.
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.
 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>
las funciones JavaScrip
 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);
 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);
 }
 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...";
 }
 }
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];
 ?>
 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

Más contenido relacionado

La actualidad más candente (8)

Formulario De Registro De Boleta De Ventay Mantenimiento De Cliente
Formulario De Registro De Boleta De Ventay Mantenimiento De ClienteFormulario De Registro De Boleta De Ventay Mantenimiento De Cliente
Formulario De Registro De Boleta De Ventay Mantenimiento De Cliente
 
Codigopara mostrar ciudad
Codigopara mostrar ciudadCodigopara mostrar ciudad
Codigopara mostrar ciudad
 
Codigo
CodigoCodigo
Codigo
 
Introduccion a j_query
Introduccion a j_queryIntroduccion a j_query
Introduccion a j_query
 
Ejercicio Diagrama Clase Codigo Metodos
Ejercicio Diagrama Clase Codigo MetodosEjercicio Diagrama Clase Codigo Metodos
Ejercicio Diagrama Clase Codigo Metodos
 
Como usar ajax con jquery
Como usar ajax con jqueryComo usar ajax con jquery
Como usar ajax con jquery
 
Practica Cuatro Delphi
Practica Cuatro  DelphiPractica Cuatro  Delphi
Practica Cuatro Delphi
 
Curso de Spring: Transacciones
Curso de Spring: TransaccionesCurso de Spring: Transacciones
Curso de Spring: Transacciones
 

Destacado

Valor de una marca
Valor de una marcaValor de una marca
Valor de una marca
jpcoccaro
 
Bibliotecas en c
Bibliotecas en cBibliotecas en c
Bibliotecas en c
demata
 
Caso amazon
Caso amazonCaso amazon
Cial institucional
Cial institucionalCial institucional
Cial institucional
camaracial
 

Destacado (15)

Globalbook dia 21 2
Globalbook dia 21 2Globalbook dia 21 2
Globalbook dia 21 2
 
Valor de una marca
Valor de una marcaValor de una marca
Valor de una marca
 
Tetra pak
Tetra pakTetra pak
Tetra pak
 
Trends&Technology
Trends&TechnologyTrends&Technology
Trends&Technology
 
Hogares Tetra Pack
Hogares Tetra PackHogares Tetra Pack
Hogares Tetra Pack
 
WWW para editores (y más allá) (5)
WWW para editores (y más allá) (5)WWW para editores (y más allá) (5)
WWW para editores (y más allá) (5)
 
Proyecto E-book 2001
Proyecto E-book 2001Proyecto E-book 2001
Proyecto E-book 2001
 
Valor de la marca
Valor de la marcaValor de la marca
Valor de la marca
 
Caracteres y Cadenas en C
Caracteres y Cadenas en CCaracteres y Cadenas en C
Caracteres y Cadenas en C
 
Investigación detrás de la innovación: Frugos Sabores Caseros
Investigación detrás de la innovación: Frugos Sabores CaserosInvestigación detrás de la innovación: Frugos Sabores Caseros
Investigación detrás de la innovación: Frugos Sabores Caseros
 
Bibliotecas en c
Bibliotecas en cBibliotecas en c
Bibliotecas en c
 
Caso amazon
Caso amazonCaso amazon
Caso amazon
 
Tetra Pack
Tetra PackTetra Pack
Tetra Pack
 
Libreria De Harry Potter
Libreria De Harry PotterLibreria De Harry Potter
Libreria De Harry Potter
 
Cial institucional
Cial institucionalCial institucional
Cial institucional
 

Similar a Unidad iii ajax

Ajax
AjaxAjax
Ajax
utpl
 

Similar a Unidad iii ajax (20)

Ajax
AjaxAjax
Ajax
 
Creando un jwt token con node.js y express
Creando un jwt token con node.js y expressCreando un jwt token con node.js y express
Creando un jwt token con node.js y express
 
10. consumiendo datos
10. consumiendo datos10. consumiendo datos
10. consumiendo datos
 
Ajax
AjaxAjax
Ajax
 
Presentacion ajax
Presentacion   ajaxPresentacion   ajax
Presentacion ajax
 
Expo
ExpoExpo
Expo
 
Jquery para principianes
Jquery para principianesJquery para principianes
Jquery para principianes
 
J M E R L I N P H P
J M E R L I N P H PJ M E R L I N P H P
J M E R L I N P H P
 
Ajax
AjaxAjax
Ajax
 
AJAX EN CURSO PHP
AJAX EN CURSO PHPAJAX EN CURSO PHP
AJAX EN CURSO PHP
 
7. Utilización de mecanismos de comunicación asíncrona
7. Utilización de mecanismos de comunicación asíncrona7. Utilización de mecanismos de comunicación asíncrona
7. Utilización de mecanismos de comunicación asíncrona
 
AJAX a cuerda Lo básico sobre AJAX y su funcionamiento
AJAX a cuerda
Lo básico sobre AJAX y su funcionamientoAJAX a cuerda
Lo básico sobre AJAX y su funcionamiento
AJAX a cuerda Lo básico sobre AJAX y su funcionamiento
 
Unidad 3 AJAX
Unidad 3 AJAX Unidad 3 AJAX
Unidad 3 AJAX
 
Unidad3ajax
Unidad3ajaxUnidad3ajax
Unidad3ajax
 
Conexión a postgres desde
Conexión a postgres desdeConexión a postgres desde
Conexión a postgres desde
 
Ajax
AjaxAjax
Ajax
 
Inicios Ajax
Inicios AjaxInicios Ajax
Inicios Ajax
 
Ajax
AjaxAjax
Ajax
 
SALUDOS EN INGLES
SALUDOS EN INGLESSALUDOS EN INGLES
SALUDOS EN INGLES
 
Ajax
AjaxAjax
Ajax
 

Unidad iii ajax

  • 1. Unidad III AJAXINTEGRANTES: MIGUEL ANTONIO VÁZQUEZ MONTES 10410562 PEDRO ALEXANDER BALBUENA LOREDO 10410518 1
  • 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. Archivos importados <script src="../json.js" language="JavaScript"></script> <script src="funciones.js" language="JavaScript"></script> 3
  • 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
  • 7. 23 - De JSON a JavaScript (utilizando la librería json.js) 7
  • 8. 8
  • 9. 9
  • 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
  • 12. 12
  • 13. 13
  • 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.  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. 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.  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
  • 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.  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.  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. 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.  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. 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.  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. 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.  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>
  • 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.  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.  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. 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.  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