Me mudo

Este blog no recibirá ya más actualizaciones. Ve al nuevo blog enricflorit.com o averigua por qué me mudo.

jueves, 23 de agosto de 2012

Intercambio de información entre servidor y cliente: JSON

Hace poco que empezó en la sección de Javascript de Foros del Web una discusión interesante: qué era mejor a nivel de rendimiento en AJAX al enviar datos del servidor al cliente: en JSON, XML o HTML. En realidad, todo el mundo tiene su método (el que le resulta más cómodo), así que en este post y alguno más intentaré explicar (con ejemplos) el uso de cada uno.

Hoy le toca al JSON. Son las siglas de JavaScript Object Notation, es decir, Notación de Objetos en JavaScript. Se está convirtiendo en un modo de transmitir información muy interesante por su fácil escritura y legibilidad. Y no solo en el ámbito web (ver sección de lenguajes).

Para empezar, crearemos un objeto xmlhttp:
if( window.XMLHttpRequest ){
  var xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject) {
  var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Abrimos la conexión con un archivo PHP que nos devolverá el JSON:
xmlhttp.open('GET', 'json.php', true);

Ahora pasamos al código PHP. Por suerte, este lenguaje incluye una librería básica de JSON a partir de su versión 5.2.0, así que en la mayoría de casos no tendremos problemas para implementar lo siguiente. Se trata de hacer un array que luego convertiremos a json usando json_encode.
<?php 
$array = array(
  'Hola mundo!',
  'Esta es una aplicación ajax',
  'Estoy usando json ;)'
);

echo json_encode( $array ); 
Sencillo, no? A partir de estos datos, vamos a crear una lista en el lado del cliente, usando js. Haremos uso del evento onreadystatechange:
xmlhttp.onreadystatechange = function(){
  if( xmlhttp.readyState == 4 && xmlhttp.status == 200 ){
    var r = xmlhttp.responseText,
    //Convertimos la cadena a JSON
    json = eval('(' + r + ')'),
    ul = document.createElement( 'ul' );

    if( json.length ){
      for( var i in json ){
        var li = document.createElement('li');
        li.innerHTML = json[i];
        ul.appendChild(li);
      }
      document.getElementById('response').appendChild(ul);
    }
  }
}
Finalmente, no queda más que enviar la petición al servidor:
xmlhttp.send( null );


Montando todo el código

Aquí os pongo cómo ha quedado nuestro script al final, incluyendo un enlace para llamar a la función ajax y una capa que hará de receptora.
<!doctype html>
<html>
<head>
  <title>AJAX</title>
<script>
function cargarLista(){
  var xmlhttp;
  if( window.XMLHttpRequest ){
    xmlhttp = new XMLHttpRequest();
  }else if(window.ActiveXObject) {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }else{
    return false;
  }

  xmlhttp.open('GET', 'http://localhost/dev/json.php');

  xmlhttp.onreadystatechange = function(){
    if( xmlhttp.readyState == 4 && xmlhttp.status == 200 ){
      var r = xmlhttp.responseText,
      //Convertimos la cadena a JSON
      json = eval('(' + r + ')'),
      ul = document.createElement( 'ul' );

      if( json.length ){
        for( var i in json ){
          var li = document.createElement('li');
          li.innerHTML = json[i];
          ul.appendChild(li);
        }
        document.getElementById('response').appendChild(ul);
      }
    }
  }

  xmlhttp.send( null );
}
</script>
</head>
<body>
<a href="javascript:;" onclick="cargarLista()">Cargar lista</a><br />

<div id="response">
</div>
</body>
</html>

El código PHP queda como lo habíamos puesto arriba.

A partir de aquí, se podría desarrollar mucho más, comprobar si ya se había cargado la lista, modificar el script PHP para que se muestren los datos guardados en una base de datos... Pero la esencia es esto.

En una entrada de la semana que viene escribiré sobre pasar información del servidor al cliente usando XML. Hasta otra!

Un saludo a todos ;-)

1 comentario:

  1. Te ha quedado bien el codigo esta simple.

    ResponderEliminar

Related Posts Plugin for WordPress, Blogger...