Este documento presenta una introducción a AJAX y JSON. Explica cómo convertir objetos de JavaScript a JSON y viceversa usando la biblioteca json.js, así como cómo convertir cadenas JSON a objetos PHP usando JSON.php. Muestra ejemplos de cómo serializar datos, definir objetos JSON y enviar información entre el cliente y el servidor usando estas tecnologías.

1. AJAX
Integrantes:
Luis Raúl Martínez Sáenz
Abraham Daniel López Molina - 10410582
Andrés Guerra Portillo - 10410059
24/11/2014

2. Agenda
 De JavaScript a JSON (utilizando la librería
json.js)
 De JSON a JavaScript (utilizando la librería
json.js)
 De JSON a PHP (utilizando la librería
JSON.php)

3. De JavaScript a JSON (utilizando la
librería json.js)

4. Serialización
 Consiste en un proceso de codificación de un
objeto en un medio de almacenamiento ,con el fin
de transmitirlo a través de una conexión en red
como una serie de bytes .
 La serie de bytes o el formato pueden ser usados
para crear un nuevo objeto que es idéntico en
todo al original, incluido su estado interno.
 La serialización es un mecanismo ampliamente
usado para transportar objetos a través de una
red, para hacer persistente un objeto en un
archivo o base de datos, o para distribuir objetos
idénticos a varias aplicaciones o localizaciones.

5. Objetos JSON
 Un objeto es un conjunto desordenado de
pares nombre/valor. Un objeto comienza con
{ (llave de apertura) y termine con } (llave de
cierre). Cada nombre es seguido por : (dos
puntos) y los pares nombre/valor están
separados por , (coma).

6. Ejemplo
 En el siguiente Ejemplo aparecerá un botón, al
presionarlo definimos un objeto que almacena
tres atributos, de los cuales uno es una array.
Luego convertimos dicho objeto a formato
JSON con un método contenido en la librería
json.js.

7. Pagina1.html

8. Funciones.js

11.  Lo más importante lo podemos encontrar en la
función mostrarConversion:
 function mostrarConversion(e) {
var obj={ nombre:'juan', edad:25,
sueldos:[1200,1700,1990] };
var cadena=obj.toJSONString();
alert(cadena); }

12.  Primero definimos un objeto en JavaScript:
var obj={ nombre:'juan', edad:25,
sueldos:[1200,1700,1990] };

13.  El objeto obj contiene tres atributos
(nombre,edad y sueldo), de los cuales el
último es un array con tres elementos.
 Luego simplemente llamando al método
toJSONString retorna un string con el
contendio del objeto pero codificado en
formato JSON:
var cadena=obj.toJSONString();
alert(cadena);

14. De JSON a JavaScript (utilizando la
librería json.js)

15. Ejemplo
 Resolveremos el mismo problema sobre la
base de datos de periféricos. Luego en el
navegador emplearemos la librería json.js
para convertir el archivo JSON a JavaScript.

16. pagina1.html

17. funciones.js

19. pagina1.php

20.  En la función procesar eventos debemos
llamar al método parseJSON:
var
datos=conexion1.responseText.parseJSON();
Esto lo podemos hacer ya que la librería
añade esta funcionalidad a los string.
Es importante importar la librería json.js

21. De JSON a PHP (utilizando la
librería JSON.php)

22.  Ahora nos queda ver como recibir datos en el
servidor 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['c
adena']));
echo 'Nombre:'.$cad->nombre;
... ...

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

24. Ejemplo
 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.

25. pagina1.html

26. Funciones JavaScript

28.  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);

29.  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); }

30.  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..."; } }

31. pagina1.php

32.  El método que convierte una cadena con formato
JSON en un objeto de PHP es:
 $cad=$json>decode(stripslashes($_REQUEST['c
adena'])); 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:
 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. Conclusiones:
 a. Conclusiones generales acerca de lo
aprendido.
Se aprendio sobre como enviar información en
formato JSON y en el servidor convertirla o
trabajarla de en otro formato y viceversa.
 b. Contratiempos presentados al realizar la
actividad.
Ninguno

34.  c. Opinión acerca de la dificultad de la
actividad
Difícil
 d. Tiempo aproximado de realización (en
horas).
5 horas

35. Referencias
 http://www.ajaxya.com.ar